@charset "UTF-8";
/* vazirfont */
@font-face {
  font-family: Yekan Bakh ExtraExpanded;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/yekanbakh/woff2/YekanBakh-Bold.woff2") format("woff2"), url("../fonts/yekanbakh/woff/YekanBakh-Bold.woff") format("woff");
}
@font-face {
  font-family: Yekan Bakh ExtraExpanded;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/yekanbakh/woff2/YekanBakh-Bold.woff2") format("woff2"), url("../fonts/yekanbakh/woff/YekanBakh-Bold.woff") format("woff");
}
@font-face {
  font-family: Yekan Bakh ExtraExpanded;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/yekanbakh/woff2/YekanBakh-Regular.woff2") format("woff2"), url("../fonts/yekanbakh/woff/YekanBakh-Regular.woff") format("woff");
}
/* yekanbakh */
/* Icons */
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icons/icomoon.eot?h2qzri");
  src: url("../fonts/icons/icomoon.eot?h2qzri#iefix") format("embedded-opentype"), url("../fonts/icons/icomoon.ttf?h2qzri") format("truetype"), url("../fonts/icons/icomoon.woff?h2qzri") format("woff"), url("../fonts/icons/icomoon.svg?h2qzri#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "dicardo";
  src: url("../fonts/newicon/dicardo.eot?7lbp7s");
  src: url("../fonts/newicon/dicardo.eot?7lbp7s#iefix") format("embedded-opentype"), url("../fonts/newicon/dicardo.ttf?7lbp7s") format("truetype"), url("../fonts/newicon/dicardo.woff?7lbp7s") format("woff"), url("../fonts/newicon/dicardo.svg?7lbp7s#dicardo") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=dicardo-],
[class*=" dicardo-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "dicardo" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dicardo-plus-svgrepo-com-1:before {
  content: "\e907";
}

.dicardo-alert-triangle-svgrepo-com:before {
  content: "\e906";
}

.dicardo-approved-aproved-confirm-2-svgrepo-com:before {
  content: "\e900";
}

.dicardo-alert:before {
  content: "\e900";
}

.dicardo-arow-down:before {
  content: "\e901";
  color: #acacac;
}

.dicardo-arrow-left:before {
  content: "\e902";
  color: #bababa;
}

.dicardo-arrow-right:before {
  content: "\e903";
  color: #bababa;
}

.dicardo-faq:before {
  content: "\e904";
  color: #575757;
}

.dicardo-image:before {
  content: "\e905";
  color: #2d264b;
}

.dicardo-new-heart:before {
  content: "\e906";
}

.dicardo-plus:before {
  content: "\e907";
  color: #fff;
}

.dicardo-recyclebin:before {
  content: "\e908";
  color: #b43737;
}

.dicardo-star:before {
  content: "\e909";
  color: #f7dc00;
}

.dicardo-star-o:before {
  content: "\e90a";
  color: #a8a8a8;
}

.dicardo-tiket:before {
  content: "\e90b";
}

@font-face {
  font-family: "personal";
  src: url("../fonts/new_icon/personal.eot?t2cbu7");
  src: url("../fonts/new_icon/personal.eot?t2cbu7#iefix") format("embedded-opentype"), url("../fonts/new_icon/personal.ttf?t2cbu7") format("truetype"), url("../fonts/new_icon/personal.woff?t2cbu7") format("woff"), url("../fonts/new_icon/personal.svg?t2cbu7#personal") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=pr-],
[class*=" pr-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "personal" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pr-clock-svgrepo-com:before {
  content: "\e92b";
}

.pr-video-svgrepo-com:before {
  content: "\e92c";
}

.pr-book-svgrepo-com:before {
  content: "\e92d";
}

.pr-folder-svgrepo-com:before {
  content: "\e92f";
}

.pr-credit-card-svgrepo-com:before {
  content: "\e92a";
}

.pr-minus-svgrepo-com:before {
  content: "\e928";
}

.pr-plus-svgrepo-com:before {
  content: "\e929";
}

.pr-off-svgrepo-com:before {
  content: "\e927";
}

.pr-reply:before {
  content: "\e925";
}

.pr-notification:before {
  content: "\e931";
}

.pr-phone-call-1:before {
  content: "\e930";
}

.pr-hard-drive:before {
  content: "\e92e";
}

.pr-like:before {
  content: "\e926";
}

.pr-arrow-right-svgrepo-com:before {
  content: "\e920";
}

.pr-arrow-left-svgrepo-com:before {
  content: "\e921";
}

.pr-arrow-top-svgrepo-com:before {
  content: "\e91f";
}

.pr-degrees-svgrepo-com:before {
  content: "\e907";
}

.pr-svgrepo-com:before {
  content: "\e909";
}

.pr-arrow-left-2-svgrepo-com:before {
  content: "\e90a";
  color: #030d45;
}

.pr-arrow-left-bold-svgrepo-com:before {
  content: "\e90e";
}

.pr-calendar-svgrepo-com:before {
  content: "\e90f";
}

.pr-comment-svgrepo-com:before {
  content: "\e911";
}

.pr-heart-svgrepo-com:before {
  content: "\e913";
}

.pr-instagram-svgrepo-com:before {
  content: "\e914";
}

.pr-star-svgrepo-com:before {
  content: "\e915";
}

.pr-user-svgrepo-com:before {
  content: "\e917";
}

.pr-whatsapp-svgrepo-com:before {
  content: "\e918";
}

.pr-youtube-svgrepo-com:before {
  content: "\e919";
}

.pr-more:before {
  content: "\e924";
}

.pr-share:before {
  content: "\e923";
}

.pr-view:before {
  content: "\e922";
}

.pr-close-1:before {
  content: "\e91e";
}

.pr-bin:before {
  content: "\e91d";
}

.pr-shopping-bag:before {
  content: "\e916";
}

.pr-search-interface-symbol:before {
  content: "\e912";
}

.pr-location:before {
  content: "\e910";
}

.pr-menu-1-1:before {
  content: "\e90d";
}

.pr-menu-2:before {
  content: "\e90c";
}

.pr-tv-screen:before {
  content: "\e90b";
}

.pr-linkedin:before {
  content: "\e906";
}

.pr-facebook:before {
  content: "\e91a";
}

.pr-twitter:before {
  content: "\e908";
}

.pr-instagram:before {
  content: "\e91b";
}

.pr-telegram:before {
  content: "\e91c";
}

.pr-email-2:before {
  content: "\e900";
}

.pr-server:before {
  content: "\e901";
}

.pr-open-book:before {
  content: "\e902";
}

.pr-text-document:before {
  content: "\e903";
}

.pr-user:before {
  content: "\e904";
}

.pr-home:before {
  content: "\e905";
}

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icons/icomoon.eot?ufya7j");
  src: url("../fonts/icons/icomoon.eot?ufya7j#iefix") format("embedded-opentype"), url("../fonts/icons/icomoon.ttf?ufya7j") format("truetype"), url("../fonts/icons/icomoon.woff?ufya7j") format("woff"), url("../fonts/icons/icomoon.svg?ufya7j#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dollor-panel:before {
  content: "\e943";
}

.icon-multi-user:before {
  content: "\e944";
}

.icon-phone:before {
  content: "\e945";
}

.icon-ask1:before {
  content: "\e946";
}

.icon-news1:before {
  content: "\e947";
}

.icon-eye:before {
  content: "\e948";
}

.icon-copy:before {
  content: "\e949";
}

.icon-ask:before {
  content: "\e94a";
}

.icon-news:before {
  content: "\e94b";
}

.icon-image:before {
  content: "\e900";
}

.icon-icon-success-info:before {
  content: "\e901";
}

.icon-drop-down:before {
  content: "\e902";
}

.icon-heart:before {
  content: "\e903";
}

.icon-miladcmi-logo:before {
  content: "\e904";
}

.icon-mail:before {
  content: "\e905";
}

.icon-menu:before {
  content: "\e906";
}

.icon-mobile:before {
  content: "\e907";
}

.icon-pluse:before {
  content: "\e908";
}

.icon-search:before {
  content: "\e909";
}

.icon-tick:before {
  content: "\e90a";
}

.icon-tupe:before {
  content: "\e90b";
}

.icon-arrow-left:before {
  content: "\e90c";
}

.icon-arrow-right:before {
  content: "\e90d";
}

.icon-card:before {
  content: "\e90e";
}

.icon-cart-basket:before {
  content: "\e90f";
}

.icon-comment:before {
  content: "\e910";
}

.icon-discount:before {
  content: "\e911";
}

.icon-guard:before {
  content: "\e912";
}

.icon-pre-order-icon:before {
  content: "\e913";
}

.icon-linkdin:before {
  content: "\e914";
}

.icon-insta:before {
  content: "\e915";
}

.icon-twiter:before {
  content: "\e916";
}

.icon-telegram:before {
  content: "\e917";
}

.icon-six-pad:before {
  content: "\e918";
}

.icon-facebook:before {
  content: "\e919";
}

.icon-arrow-left-dot:before {
  content: "\e91a";
}

.icon-close:before {
  content: "\e91b";
}

.icon-dimond:before {
  content: "\e91c";
}

.icon-what:before {
  content: "\e91d";
}

.icon-dollor:before {
  content: "\e91e";
}

.icon-share:before {
  content: "\e91f";
}

.icon-consent:before {
  content: "\e920";
}

.icon-get-method:before {
  content: "\e921";
}

.icon-product-type:before {
  content: "\e922";
}

.icon-danger:before {
  content: "\e923";
}

.icon-minus:before {
  content: "\e924";
}

.icon-zoom:before {
  content: "\e925";
}

.icon-play:before {
  content: "\e926";
}

.icon-rate-5:before {
  content: "\e927";
}

.icon-rate-4:before {
  content: "\e928";
}

.icon-rate-2:before {
  content: "\e929";
}

.icon-rate-3:before {
  content: "\e92a";
}

.icon-rate-1:before {
  content: "\e92b";
}

.icon-reload:before {
  content: "\e92c";
}

.icon-qoute:before {
  content: "\e92d";
}

.icon-info:before {
  content: "\e92e";
}

.icon-arrow-reply:before {
  content: "\e92f";
}

.icon-calender:before {
  content: "\e930";
}

.icon-statistics:before {
  content: "\e931";
}

.icon-hour:before {
  content: "\e932";
}

.icon-profile:before {
  content: "\e933";
}

.icon-cat:before {
  content: "\e934";
}

.icon-earn-money:before {
  content: "\e935";
}

.icon-headfone:before {
  content: "\e936";
}

.icon-cube:before {
  content: "\e937";
}

.icon-home:before {
  content: "\e938";
}

.icon-setting:before {
  content: "\e939";
}

.icon-drop-left:before {
  content: "\e93a";
}

.icon-notification-info:before {
  content: "\e93b";
}

.icon-close-border:before {
  content: "\e93c";
}

.icon-recycle-bin:before {
  content: "\e93d";
}

.icon-border-pluse:before {
  content: "\e93e";
}

.icon-file:before {
  content: "\e93f";
}

.icon-drop-down-fill:before {
  content: "\e940";
}

.icon-home-cat:before {
  content: "\e941";
}

.icon-amazing:before {
  content: "\e942";
}

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-cl: 0;
  --breakpoint-xs: 450px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  direction: ltr;
  scroll-behavior: smooth;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: right;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  text-decoration-skip-ink: none;
}

address {
  margin: 0;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0;
}

blockquote {
  margin: 0;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

a:hover {
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
}

a:focus {
  outline: 0;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
  border-style: none;
  max-width: 100%;
  height: auto;
}

svg {
  overflow: visible;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: right;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin: 0;
}

button {
  border-radius: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  border: 0;
  font-family: vazirfont;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

form {
  margin: 0;
}

button,
select {
  text-transform: none;
}

select {
  word-wrap: normal;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

em, i {
  font-style: normal;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin: 0;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "— ";
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 450px) {
  .d-xs-none {
    display: none !important;
  }
  .d-xs-inline {
    display: inline !important;
  }
  .d-xs-inline-block {
    display: inline-block !important;
  }
  .d-xs-block {
    display: block !important;
  }
  .d-xs-table {
    display: table !important;
  }
  .d-xs-table-row {
    display: table-row !important;
  }
  .d-xs-table-cell {
    display: table-cell !important;
  }
  .d-xs-flex {
    display: flex !important;
  }
  .d-xs-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}
@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
}
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 450px) {
  .flex-xs-row {
    flex-direction: row !important;
  }
  .flex-xs-column {
    flex-direction: column !important;
  }
  .flex-xs-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xs-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xs-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xs-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xs-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-xs-fill {
    flex: 1 1 auto !important;
  }
  .flex-xs-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xs-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xs-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xs-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-xs-start {
    justify-content: flex-start !important;
  }
  .justify-content-xs-end {
    justify-content: flex-end !important;
  }
  .justify-content-xs-center {
    justify-content: center !important;
  }
  .justify-content-xs-between {
    justify-content: space-between !important;
  }
  .justify-content-xs-around {
    justify-content: space-around !important;
  }
  .align-items-xs-start {
    align-items: flex-start !important;
  }
  .align-items-xs-end {
    align-items: flex-end !important;
  }
  .align-items-xs-center {
    align-items: center !important;
  }
  .align-items-xs-baseline {
    align-items: baseline !important;
  }
  .align-items-xs-stretch {
    align-items: stretch !important;
  }
  .align-content-xs-start {
    align-content: flex-start !important;
  }
  .align-content-xs-end {
    align-content: flex-end !important;
  }
  .align-content-xs-center {
    align-content: center !important;
  }
  .align-content-xs-between {
    align-content: space-between !important;
  }
  .align-content-xs-around {
    align-content: space-around !important;
  }
  .align-content-xs-stretch {
    align-content: stretch !important;
  }
  .align-self-xs-auto {
    align-self: auto !important;
  }
  .align-self-xs-start {
    align-self: flex-start !important;
  }
  .align-self-xs-end {
    align-self: flex-end !important;
  }
  .align-self-xs-center {
    align-self: center !important;
  }
  .align-self-xs-baseline {
    align-self: baseline !important;
  }
  .align-self-xs-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}
@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}
.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 450px) {
  .float-xs-left {
    float: left !important;
  }
  .float-xs-right {
    float: right !important;
  }
  .float-xs-none {
    float: none !important;
  }
}
@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}
@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}
@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 450px) {
  .m-xs-0 {
    margin: 0 !important;
  }
  .mt-xs-0,
.my-xs-0 {
    margin-top: 0 !important;
  }
  .mr-xs-0,
.mx-xs-0 {
    margin-right: 0 !important;
  }
  .mb-xs-0,
.my-xs-0 {
    margin-bottom: 0 !important;
  }
  .ml-xs-0,
.mx-xs-0 {
    margin-left: 0 !important;
  }
  .m-xs-1 {
    margin: 0.25rem !important;
  }
  .mt-xs-1,
.my-xs-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xs-1,
.mx-xs-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xs-1,
.my-xs-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xs-1,
.mx-xs-1 {
    margin-left: 0.25rem !important;
  }
  .m-xs-2 {
    margin: 0.5rem !important;
  }
  .mt-xs-2,
.my-xs-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xs-2,
.mx-xs-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xs-2,
.my-xs-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xs-2,
.mx-xs-2 {
    margin-left: 0.5rem !important;
  }
  .m-xs-3 {
    margin: 1rem !important;
  }
  .mt-xs-3,
.my-xs-3 {
    margin-top: 1rem !important;
  }
  .mr-xs-3,
.mx-xs-3 {
    margin-right: 1rem !important;
  }
  .mb-xs-3,
.my-xs-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xs-3,
.mx-xs-3 {
    margin-left: 1rem !important;
  }
  .m-xs-4 {
    margin: 1.5rem !important;
  }
  .mt-xs-4,
.my-xs-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xs-4,
.mx-xs-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xs-4,
.my-xs-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xs-4,
.mx-xs-4 {
    margin-left: 1.5rem !important;
  }
  .m-xs-5 {
    margin: 3rem !important;
  }
  .mt-xs-5,
.my-xs-5 {
    margin-top: 3rem !important;
  }
  .mr-xs-5,
.mx-xs-5 {
    margin-right: 3rem !important;
  }
  .mb-xs-5,
.my-xs-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xs-5,
.mx-xs-5 {
    margin-left: 3rem !important;
  }
  .p-xs-0 {
    padding: 0 !important;
  }
  .pt-xs-0,
.py-xs-0 {
    padding-top: 0 !important;
  }
  .pr-xs-0,
.px-xs-0 {
    padding-right: 0 !important;
  }
  .pb-xs-0,
.py-xs-0 {
    padding-bottom: 0 !important;
  }
  .pl-xs-0,
.px-xs-0 {
    padding-left: 0 !important;
  }
  .p-xs-1 {
    padding: 0.25rem !important;
  }
  .pt-xs-1,
.py-xs-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xs-1,
.px-xs-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xs-1,
.py-xs-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xs-1,
.px-xs-1 {
    padding-left: 0.25rem !important;
  }
  .p-xs-2 {
    padding: 0.5rem !important;
  }
  .pt-xs-2,
.py-xs-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xs-2,
.px-xs-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xs-2,
.py-xs-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xs-2,
.px-xs-2 {
    padding-left: 0.5rem !important;
  }
  .p-xs-3 {
    padding: 1rem !important;
  }
  .pt-xs-3,
.py-xs-3 {
    padding-top: 1rem !important;
  }
  .pr-xs-3,
.px-xs-3 {
    padding-right: 1rem !important;
  }
  .pb-xs-3,
.py-xs-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xs-3,
.px-xs-3 {
    padding-left: 1rem !important;
  }
  .p-xs-4 {
    padding: 1.5rem !important;
  }
  .pt-xs-4,
.py-xs-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xs-4,
.px-xs-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xs-4,
.py-xs-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xs-4,
.px-xs-4 {
    padding-left: 1.5rem !important;
  }
  .p-xs-5 {
    padding: 3rem !important;
  }
  .pt-xs-5,
.py-xs-5 {
    padding-top: 3rem !important;
  }
  .pr-xs-5,
.px-xs-5 {
    padding-right: 3rem !important;
  }
  .pb-xs-5,
.py-xs-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xs-5,
.px-xs-5 {
    padding-left: 3rem !important;
  }
  .m-xs-n1 {
    margin: -0.25rem !important;
  }
  .mt-xs-n1,
.my-xs-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xs-n1,
.mx-xs-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xs-n1,
.my-xs-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xs-n1,
.mx-xs-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xs-n2 {
    margin: -0.5rem !important;
  }
  .mt-xs-n2,
.my-xs-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xs-n2,
.mx-xs-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xs-n2,
.my-xs-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xs-n2,
.mx-xs-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xs-n3 {
    margin: -1rem !important;
  }
  .mt-xs-n3,
.my-xs-n3 {
    margin-top: -1rem !important;
  }
  .mr-xs-n3,
.mx-xs-n3 {
    margin-right: -1rem !important;
  }
  .mb-xs-n3,
.my-xs-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xs-n3,
.mx-xs-n3 {
    margin-left: -1rem !important;
  }
  .m-xs-n4 {
    margin: -1.5rem !important;
  }
  .mt-xs-n4,
.my-xs-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xs-n4,
.mx-xs-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xs-n4,
.my-xs-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xs-n4,
.mx-xs-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xs-n5 {
    margin: -3rem !important;
  }
  .mt-xs-n5,
.my-xs-n5 {
    margin-top: -3rem !important;
  }
  .mr-xs-n5,
.mx-xs-n5 {
    margin-right: -3rem !important;
  }
  .mb-xs-n5,
.my-xs-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xs-n5,
.mx-xs-n5 {
    margin-left: -3rem !important;
  }
  .m-xs-auto {
    margin: auto !important;
  }
  .mt-xs-auto,
.my-xs-auto {
    margin-top: auto !important;
  }
  .mr-xs-auto,
.mx-xs-auto {
    margin-right: auto !important;
  }
  .mb-xs-auto,
.my-xs-auto {
    margin-bottom: auto !important;
  }
  .ml-xs-auto,
.mx-xs-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
.my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
.mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
.my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
.mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
.my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
.mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
.my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
.mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
.my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
.mx-sm-2 {
    margin-right: 0.5rem !important;
  }
  .mb-sm-2,
.my-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-sm-2,
.mx-sm-2 {
    margin-left: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .mt-sm-3,
.my-sm-3 {
    margin-top: 1rem !important;
  }
  .mr-sm-3,
.mx-sm-3 {
    margin-right: 1rem !important;
  }
  .mb-sm-3,
.my-sm-3 {
    margin-bottom: 1rem !important;
  }
  .ml-sm-3,
.mx-sm-3 {
    margin-left: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .mt-sm-4,
.my-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mr-sm-4,
.mx-sm-4 {
    margin-right: 1.5rem !important;
  }
  .mb-sm-4,
.my-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-sm-4,
.mx-sm-4 {
    margin-left: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .mt-sm-5,
.my-sm-5 {
    margin-top: 3rem !important;
  }
  .mr-sm-5,
.mx-sm-5 {
    margin-right: 3rem !important;
  }
  .mb-sm-5,
.my-sm-5 {
    margin-bottom: 3rem !important;
  }
  .ml-sm-5,
.mx-sm-5 {
    margin-left: 3rem !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .pt-sm-0,
.py-sm-0 {
    padding-top: 0 !important;
  }
  .pr-sm-0,
.px-sm-0 {
    padding-right: 0 !important;
  }
  .pb-sm-0,
.py-sm-0 {
    padding-bottom: 0 !important;
  }
  .pl-sm-0,
.px-sm-0 {
    padding-left: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .pt-sm-1,
.py-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pr-sm-1,
.px-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pb-sm-1,
.py-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-sm-1,
.px-sm-1 {
    padding-left: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .pt-sm-2,
.py-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pr-sm-2,
.px-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pb-sm-2,
.py-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-sm-2,
.px-sm-2 {
    padding-left: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .pt-sm-3,
.py-sm-3 {
    padding-top: 1rem !important;
  }
  .pr-sm-3,
.px-sm-3 {
    padding-right: 1rem !important;
  }
  .pb-sm-3,
.py-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pl-sm-3,
.px-sm-3 {
    padding-left: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .pt-sm-4,
.py-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pr-sm-4,
.px-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pb-sm-4,
.py-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-sm-4,
.px-sm-4 {
    padding-left: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .pt-sm-5,
.py-sm-5 {
    padding-top: 3rem !important;
  }
  .pr-sm-5,
.px-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-5,
.py-sm-5 {
    padding-bottom: 3rem !important;
  }
  .pl-sm-5,
.px-sm-5 {
    padding-left: 3rem !important;
  }
  .m-sm-n1 {
    margin: -0.25rem !important;
  }
  .mt-sm-n1,
.my-sm-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-sm-n1,
.mx-sm-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-sm-n1,
.my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-sm-n1,
.mx-sm-n1 {
    margin-left: -0.25rem !important;
  }
  .m-sm-n2 {
    margin: -0.5rem !important;
  }
  .mt-sm-n2,
.my-sm-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-sm-n2,
.mx-sm-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-sm-n2,
.my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-sm-n2,
.mx-sm-n2 {
    margin-left: -0.5rem !important;
  }
  .m-sm-n3 {
    margin: -1rem !important;
  }
  .mt-sm-n3,
.my-sm-n3 {
    margin-top: -1rem !important;
  }
  .mr-sm-n3,
.mx-sm-n3 {
    margin-right: -1rem !important;
  }
  .mb-sm-n3,
.my-sm-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-sm-n3,
.mx-sm-n3 {
    margin-left: -1rem !important;
  }
  .m-sm-n4 {
    margin: -1.5rem !important;
  }
  .mt-sm-n4,
.my-sm-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-sm-n4,
.mx-sm-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-sm-n4,
.my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-sm-n4,
.mx-sm-n4 {
    margin-left: -1.5rem !important;
  }
  .m-sm-n5 {
    margin: -3rem !important;
  }
  .mt-sm-n5,
.my-sm-n5 {
    margin-top: -3rem !important;
  }
  .mr-sm-n5,
.mx-sm-n5 {
    margin-right: -3rem !important;
  }
  .mb-sm-n5,
.my-sm-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-sm-n5,
.mx-sm-n5 {
    margin-left: -3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mt-sm-auto,
.my-sm-auto {
    margin-top: auto !important;
  }
  .mr-sm-auto,
.mx-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-auto,
.my-sm-auto {
    margin-bottom: auto !important;
  }
  .ml-sm-auto,
.mx-sm-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
.my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
.mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
.my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
.mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
.my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
.mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
.my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
.mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
.my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
.mx-md-2 {
    margin-right: 0.5rem !important;
  }
  .mb-md-2,
.my-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-md-2,
.mx-md-2 {
    margin-left: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .mt-md-3,
.my-md-3 {
    margin-top: 1rem !important;
  }
  .mr-md-3,
.mx-md-3 {
    margin-right: 1rem !important;
  }
  .mb-md-3,
.my-md-3 {
    margin-bottom: 1rem !important;
  }
  .ml-md-3,
.mx-md-3 {
    margin-left: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .mt-md-4,
.my-md-4 {
    margin-top: 1.5rem !important;
  }
  .mr-md-4,
.mx-md-4 {
    margin-right: 1.5rem !important;
  }
  .mb-md-4,
.my-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-md-4,
.mx-md-4 {
    margin-left: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .mt-md-5,
.my-md-5 {
    margin-top: 3rem !important;
  }
  .mr-md-5,
.mx-md-5 {
    margin-right: 3rem !important;
  }
  .mb-md-5,
.my-md-5 {
    margin-bottom: 3rem !important;
  }
  .ml-md-5,
.mx-md-5 {
    margin-left: 3rem !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0,
.py-md-0 {
    padding-top: 0 !important;
  }
  .pr-md-0,
.px-md-0 {
    padding-right: 0 !important;
  }
  .pb-md-0,
.py-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0,
.px-md-0 {
    padding-left: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .pt-md-1,
.py-md-1 {
    padding-top: 0.25rem !important;
  }
  .pr-md-1,
.px-md-1 {
    padding-right: 0.25rem !important;
  }
  .pb-md-1,
.py-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-md-1,
.px-md-1 {
    padding-left: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .pt-md-2,
.py-md-2 {
    padding-top: 0.5rem !important;
  }
  .pr-md-2,
.px-md-2 {
    padding-right: 0.5rem !important;
  }
  .pb-md-2,
.py-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-md-2,
.px-md-2 {
    padding-left: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .pt-md-3,
.py-md-3 {
    padding-top: 1rem !important;
  }
  .pr-md-3,
.px-md-3 {
    padding-right: 1rem !important;
  }
  .pb-md-3,
.py-md-3 {
    padding-bottom: 1rem !important;
  }
  .pl-md-3,
.px-md-3 {
    padding-left: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .pt-md-4,
.py-md-4 {
    padding-top: 1.5rem !important;
  }
  .pr-md-4,
.px-md-4 {
    padding-right: 1.5rem !important;
  }
  .pb-md-4,
.py-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-md-4,
.px-md-4 {
    padding-left: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .pt-md-5,
.py-md-5 {
    padding-top: 3rem !important;
  }
  .pr-md-5,
.px-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-5,
.py-md-5 {
    padding-bottom: 3rem !important;
  }
  .pl-md-5,
.px-md-5 {
    padding-left: 3rem !important;
  }
  .m-md-n1 {
    margin: -0.25rem !important;
  }
  .mt-md-n1,
.my-md-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-md-n1,
.mx-md-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-md-n1,
.my-md-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-md-n1,
.mx-md-n1 {
    margin-left: -0.25rem !important;
  }
  .m-md-n2 {
    margin: -0.5rem !important;
  }
  .mt-md-n2,
.my-md-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-md-n2,
.mx-md-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-md-n2,
.my-md-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-md-n2,
.mx-md-n2 {
    margin-left: -0.5rem !important;
  }
  .m-md-n3 {
    margin: -1rem !important;
  }
  .mt-md-n3,
.my-md-n3 {
    margin-top: -1rem !important;
  }
  .mr-md-n3,
.mx-md-n3 {
    margin-right: -1rem !important;
  }
  .mb-md-n3,
.my-md-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-md-n3,
.mx-md-n3 {
    margin-left: -1rem !important;
  }
  .m-md-n4 {
    margin: -1.5rem !important;
  }
  .mt-md-n4,
.my-md-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-md-n4,
.mx-md-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-md-n4,
.my-md-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-md-n4,
.mx-md-n4 {
    margin-left: -1.5rem !important;
  }
  .m-md-n5 {
    margin: -3rem !important;
  }
  .mt-md-n5,
.my-md-n5 {
    margin-top: -3rem !important;
  }
  .mr-md-n5,
.mx-md-n5 {
    margin-right: -3rem !important;
  }
  .mb-md-n5,
.my-md-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-md-n5,
.mx-md-n5 {
    margin-left: -3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mt-md-auto,
.my-md-auto {
    margin-top: auto !important;
  }
  .mr-md-auto,
.mx-md-auto {
    margin-right: auto !important;
  }
  .mb-md-auto,
.my-md-auto {
    margin-bottom: auto !important;
  }
  .ml-md-auto,
.mx-md-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
.my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
.mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
.my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
.mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
.my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
.mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
.my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
.mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
.my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
.mx-lg-2 {
    margin-right: 0.5rem !important;
  }
  .mb-lg-2,
.my-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-lg-2,
.mx-lg-2 {
    margin-left: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .mt-lg-3,
.my-lg-3 {
    margin-top: 1rem !important;
  }
  .mr-lg-3,
.mx-lg-3 {
    margin-right: 1rem !important;
  }
  .mb-lg-3,
.my-lg-3 {
    margin-bottom: 1rem !important;
  }
  .ml-lg-3,
.mx-lg-3 {
    margin-left: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .mt-lg-4,
.my-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mr-lg-4,
.mx-lg-4 {
    margin-right: 1.5rem !important;
  }
  .mb-lg-4,
.my-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-lg-4,
.mx-lg-4 {
    margin-left: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .mt-lg-5,
.my-lg-5 {
    margin-top: 3rem !important;
  }
  .mr-lg-5,
.mx-lg-5 {
    margin-right: 3rem !important;
  }
  .mb-lg-5,
.my-lg-5 {
    margin-bottom: 3rem !important;
  }
  .ml-lg-5,
.mx-lg-5 {
    margin-left: 3rem !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0,
.py-lg-0 {
    padding-top: 0 !important;
  }
  .pr-lg-0,
.px-lg-0 {
    padding-right: 0 !important;
  }
  .pb-lg-0,
.py-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0,
.px-lg-0 {
    padding-left: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .pt-lg-1,
.py-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pr-lg-1,
.px-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pb-lg-1,
.py-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-lg-1,
.px-lg-1 {
    padding-left: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .pt-lg-2,
.py-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pr-lg-2,
.px-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pb-lg-2,
.py-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-lg-2,
.px-lg-2 {
    padding-left: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .pt-lg-3,
.py-lg-3 {
    padding-top: 1rem !important;
  }
  .pr-lg-3,
.px-lg-3 {
    padding-right: 1rem !important;
  }
  .pb-lg-3,
.py-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pl-lg-3,
.px-lg-3 {
    padding-left: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .pt-lg-4,
.py-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pr-lg-4,
.px-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pb-lg-4,
.py-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-lg-4,
.px-lg-4 {
    padding-left: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .pt-lg-5,
.py-lg-5 {
    padding-top: 3rem !important;
  }
  .pr-lg-5,
.px-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-5,
.py-lg-5 {
    padding-bottom: 3rem !important;
  }
  .pl-lg-5,
.px-lg-5 {
    padding-left: 3rem !important;
  }
  .m-lg-n1 {
    margin: -0.25rem !important;
  }
  .mt-lg-n1,
.my-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-lg-n1,
.mx-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-lg-n1,
.my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-lg-n1,
.mx-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .m-lg-n2 {
    margin: -0.5rem !important;
  }
  .mt-lg-n2,
.my-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-lg-n2,
.mx-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-lg-n2,
.my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-lg-n2,
.mx-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .m-lg-n3 {
    margin: -1rem !important;
  }
  .mt-lg-n3,
.my-lg-n3 {
    margin-top: -1rem !important;
  }
  .mr-lg-n3,
.mx-lg-n3 {
    margin-right: -1rem !important;
  }
  .mb-lg-n3,
.my-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-lg-n3,
.mx-lg-n3 {
    margin-left: -1rem !important;
  }
  .m-lg-n4 {
    margin: -1.5rem !important;
  }
  .mt-lg-n4,
.my-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-lg-n4,
.mx-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-lg-n4,
.my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-lg-n4,
.mx-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .m-lg-n5 {
    margin: -3rem !important;
  }
  .mt-lg-n5,
.my-lg-n5 {
    margin-top: -3rem !important;
  }
  .mr-lg-n5,
.mx-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n5,
.my-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-lg-n5,
.mx-lg-n5 {
    margin-left: -3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mt-lg-auto,
.my-lg-auto {
    margin-top: auto !important;
  }
  .mr-lg-auto,
.mx-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-auto,
.my-lg-auto {
    margin-bottom: auto !important;
  }
  .ml-lg-auto,
.mx-lg-auto {
    margin-left: auto !important;
  }
}
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
.my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
.mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
.my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
.mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
.my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
.mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
.my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
.mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
.my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
.mx-xl-2 {
    margin-right: 0.5rem !important;
  }
  .mb-xl-2,
.my-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .ml-xl-2,
.mx-xl-2 {
    margin-left: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .mt-xl-3,
.my-xl-3 {
    margin-top: 1rem !important;
  }
  .mr-xl-3,
.mx-xl-3 {
    margin-right: 1rem !important;
  }
  .mb-xl-3,
.my-xl-3 {
    margin-bottom: 1rem !important;
  }
  .ml-xl-3,
.mx-xl-3 {
    margin-left: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .mt-xl-4,
.my-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mr-xl-4,
.mx-xl-4 {
    margin-right: 1.5rem !important;
  }
  .mb-xl-4,
.my-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .ml-xl-4,
.mx-xl-4 {
    margin-left: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .mt-xl-5,
.my-xl-5 {
    margin-top: 3rem !important;
  }
  .mr-xl-5,
.mx-xl-5 {
    margin-right: 3rem !important;
  }
  .mb-xl-5,
.my-xl-5 {
    margin-bottom: 3rem !important;
  }
  .ml-xl-5,
.mx-xl-5 {
    margin-left: 3rem !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .pt-xl-0,
.py-xl-0 {
    padding-top: 0 !important;
  }
  .pr-xl-0,
.px-xl-0 {
    padding-right: 0 !important;
  }
  .pb-xl-0,
.py-xl-0 {
    padding-bottom: 0 !important;
  }
  .pl-xl-0,
.px-xl-0 {
    padding-left: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .pt-xl-1,
.py-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pr-xl-1,
.px-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pb-xl-1,
.py-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pl-xl-1,
.px-xl-1 {
    padding-left: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .pt-xl-2,
.py-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pr-xl-2,
.px-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pb-xl-2,
.py-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pl-xl-2,
.px-xl-2 {
    padding-left: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .pt-xl-3,
.py-xl-3 {
    padding-top: 1rem !important;
  }
  .pr-xl-3,
.px-xl-3 {
    padding-right: 1rem !important;
  }
  .pb-xl-3,
.py-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pl-xl-3,
.px-xl-3 {
    padding-left: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .pt-xl-4,
.py-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pr-xl-4,
.px-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pb-xl-4,
.py-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pl-xl-4,
.px-xl-4 {
    padding-left: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .pt-xl-5,
.py-xl-5 {
    padding-top: 3rem !important;
  }
  .pr-xl-5,
.px-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-5,
.py-xl-5 {
    padding-bottom: 3rem !important;
  }
  .pl-xl-5,
.px-xl-5 {
    padding-left: 3rem !important;
  }
  .m-xl-n1 {
    margin: -0.25rem !important;
  }
  .mt-xl-n1,
.my-xl-n1 {
    margin-top: -0.25rem !important;
  }
  .mr-xl-n1,
.mx-xl-n1 {
    margin-right: -0.25rem !important;
  }
  .mb-xl-n1,
.my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }
  .ml-xl-n1,
.mx-xl-n1 {
    margin-left: -0.25rem !important;
  }
  .m-xl-n2 {
    margin: -0.5rem !important;
  }
  .mt-xl-n2,
.my-xl-n2 {
    margin-top: -0.5rem !important;
  }
  .mr-xl-n2,
.mx-xl-n2 {
    margin-right: -0.5rem !important;
  }
  .mb-xl-n2,
.my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }
  .ml-xl-n2,
.mx-xl-n2 {
    margin-left: -0.5rem !important;
  }
  .m-xl-n3 {
    margin: -1rem !important;
  }
  .mt-xl-n3,
.my-xl-n3 {
    margin-top: -1rem !important;
  }
  .mr-xl-n3,
.mx-xl-n3 {
    margin-right: -1rem !important;
  }
  .mb-xl-n3,
.my-xl-n3 {
    margin-bottom: -1rem !important;
  }
  .ml-xl-n3,
.mx-xl-n3 {
    margin-left: -1rem !important;
  }
  .m-xl-n4 {
    margin: -1.5rem !important;
  }
  .mt-xl-n4,
.my-xl-n4 {
    margin-top: -1.5rem !important;
  }
  .mr-xl-n4,
.mx-xl-n4 {
    margin-right: -1.5rem !important;
  }
  .mb-xl-n4,
.my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }
  .ml-xl-n4,
.mx-xl-n4 {
    margin-left: -1.5rem !important;
  }
  .m-xl-n5 {
    margin: -3rem !important;
  }
  .mt-xl-n5,
.my-xl-n5 {
    margin-top: -3rem !important;
  }
  .mr-xl-n5,
.mx-xl-n5 {
    margin-right: -3rem !important;
  }
  .mb-xl-n5,
.my-xl-n5 {
    margin-bottom: -3rem !important;
  }
  .ml-xl-n5,
.mx-xl-n5 {
    margin-left: -3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mt-xl-auto,
.my-xl-auto {
    margin-top: auto !important;
  }
  .mr-xl-auto,
.mx-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-auto,
.my-xl-auto {
    margin-bottom: auto !important;
  }
  .ml-xl-auto,
.mx-xl-auto {
    margin-left: auto !important;
  }
}
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 450px) {
  .text-xs-left {
    text-align: left !important;
  }
  .text-xs-right {
    text-align: right !important;
  }
  .text-xs-center {
    text-align: center !important;
  }
}
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
  }
}
.container-fluid {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
  margin-left: 0;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-xl,
.col-xl-auto, .col-xl-24, .col-xl-23, .col-xl-22, .col-xl-21, .col-xl-20, .col-xl-19, .col-xl-18, .col-xl-17, .col-xl-16, .col-xl-15, .col-xl-14, .col-xl-13, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,
.col-lg-auto, .col-lg-24, .col-lg-23, .col-lg-22, .col-lg-21, .col-lg-20, .col-lg-19, .col-lg-18, .col-lg-17, .col-lg-16, .col-lg-15, .col-lg-14, .col-lg-13, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,
.col-md-auto, .col-md-24, .col-md-23, .col-md-22, .col-md-21, .col-md-20, .col-md-19, .col-md-18, .col-md-17, .col-md-16, .col-md-15, .col-md-14, .col-md-13, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,
.col-sm-auto, .col-sm-24, .col-sm-23, .col-sm-22, .col-sm-21, .col-sm-20, .col-sm-19, .col-sm-18, .col-sm-17, .col-sm-16, .col-sm-15, .col-sm-14, .col-sm-13, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col-xs,
.col-xs-auto, .col-xs-24, .col-xs-23, .col-xs-22, .col-xs-21, .col-xs-20, .col-xs-19, .col-xs-18, .col-xs-17, .col-xs-16, .col-xs-15, .col-xs-14, .col-xs-13, .col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1, .col,
.col-auto, .col-24, .col-23, .col-22, .col-21, .col-20, .col-19, .col-18, .col-17, .col-16, .col-15, .col-14, .col-13, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

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

.col-1 {
  flex: 0 0 4.1666666667%;
  max-width: 4.1666666667%;
}

.col-2 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-3 {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-4 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-5 {
  flex: 0 0 20.8333333333%;
  max-width: 20.8333333333%;
}

.col-6 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-7 {
  flex: 0 0 29.1666666667%;
  max-width: 29.1666666667%;
}

.col-8 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-9 {
  flex: 0 0 37.5%;
  max-width: 37.5%;
}

.col-10 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-11 {
  flex: 0 0 45.8333333333%;
  max-width: 45.8333333333%;
}

.col-12 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-13 {
  flex: 0 0 54.1666666667%;
  max-width: 54.1666666667%;
}

.col-14 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-15 {
  flex: 0 0 62.5%;
  max-width: 62.5%;
}

.col-16 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-17 {
  flex: 0 0 70.8333333333%;
  max-width: 70.8333333333%;
}

.col-18 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-19 {
  flex: 0 0 79.1666666667%;
  max-width: 79.1666666667%;
}

.col-20 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-21 {
  flex: 0 0 87.5%;
  max-width: 87.5%;
}

.col-22 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-23 {
  flex: 0 0 95.8333333333%;
  max-width: 95.8333333333%;
}

.col-24 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 25;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.order-13 {
  order: 13;
}

.order-14 {
  order: 14;
}

.order-15 {
  order: 15;
}

.order-16 {
  order: 16;
}

.order-17 {
  order: 17;
}

.order-18 {
  order: 18;
}

.order-19 {
  order: 19;
}

.order-20 {
  order: 20;
}

.order-21 {
  order: 21;
}

.order-22 {
  order: 22;
}

.order-23 {
  order: 23;
}

.order-24 {
  order: 24;
}

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

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

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

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

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

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

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

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

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

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

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

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

.offset-13 {
  margin-left: 54.1666666667%;
}

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

.offset-15 {
  margin-left: 62.5%;
}

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

.offset-17 {
  margin-left: 70.8333333333%;
}

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

.offset-19 {
  margin-left: 79.1666666667%;
}

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

.offset-21 {
  margin-left: 87.5%;
}

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

.offset-23 {
  margin-left: 95.8333333333%;
}

@media (min-width: 450px) {
  .col-xs {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xs-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xs-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
  }
  .col-xs-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xs-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-xs-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xs-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
  }
  .col-xs-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
  }
  .col-xs-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xs-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-xs-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xs-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
  }
  .col-xs-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
  }
  .col-xs-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xs-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-xs-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xs-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
  }
  .col-xs-18 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
  }
  .col-xs-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xs-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-xs-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xs-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
  }
  .col-xs-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xs-first {
    order: -1;
  }
  .order-xs-last {
    order: 25;
  }
  .order-xs-0 {
    order: 0;
  }
  .order-xs-1 {
    order: 1;
  }
  .order-xs-2 {
    order: 2;
  }
  .order-xs-3 {
    order: 3;
  }
  .order-xs-4 {
    order: 4;
  }
  .order-xs-5 {
    order: 5;
  }
  .order-xs-6 {
    order: 6;
  }
  .order-xs-7 {
    order: 7;
  }
  .order-xs-8 {
    order: 8;
  }
  .order-xs-9 {
    order: 9;
  }
  .order-xs-10 {
    order: 10;
  }
  .order-xs-11 {
    order: 11;
  }
  .order-xs-12 {
    order: 12;
  }
  .order-xs-13 {
    order: 13;
  }
  .order-xs-14 {
    order: 14;
  }
  .order-xs-15 {
    order: 15;
  }
  .order-xs-16 {
    order: 16;
  }
  .order-xs-17 {
    order: 17;
  }
  .order-xs-18 {
    order: 18;
  }
  .order-xs-19 {
    order: 19;
  }
  .order-xs-20 {
    order: 20;
  }
  .order-xs-21 {
    order: 21;
  }
  .order-xs-22 {
    order: 22;
  }
  .order-xs-23 {
    order: 23;
  }
  .order-xs-24 {
    order: 24;
  }
  .offset-xs-0 {
    margin-left: 0;
  }
  .offset-xs-1 {
    margin-left: 4.1666666667%;
  }
  .offset-xs-2 {
    margin-left: 8.3333333333%;
  }
  .offset-xs-3 {
    margin-left: 12.5%;
  }
  .offset-xs-4 {
    margin-left: 16.6666666667%;
  }
  .offset-xs-5 {
    margin-left: 20.8333333333%;
  }
  .offset-xs-6 {
    margin-left: 25%;
  }
  .offset-xs-7 {
    margin-left: 29.1666666667%;
  }
  .offset-xs-8 {
    margin-left: 33.3333333333%;
  }
  .offset-xs-9 {
    margin-left: 37.5%;
  }
  .offset-xs-10 {
    margin-left: 41.6666666667%;
  }
  .offset-xs-11 {
    margin-left: 45.8333333333%;
  }
  .offset-xs-12 {
    margin-left: 50%;
  }
  .offset-xs-13 {
    margin-left: 54.1666666667%;
  }
  .offset-xs-14 {
    margin-left: 58.3333333333%;
  }
  .offset-xs-15 {
    margin-left: 62.5%;
  }
  .offset-xs-16 {
    margin-left: 66.6666666667%;
  }
  .offset-xs-17 {
    margin-left: 70.8333333333%;
  }
  .offset-xs-18 {
    margin-left: 75%;
  }
  .offset-xs-19 {
    margin-left: 79.1666666667%;
  }
  .offset-xs-20 {
    margin-left: 83.3333333333%;
  }
  .offset-xs-21 {
    margin-left: 87.5%;
  }
  .offset-xs-22 {
    margin-left: 91.6666666667%;
  }
  .offset-xs-23 {
    margin-left: 95.8333333333%;
  }
}
@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
  }
  .col-sm-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-sm-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-sm-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-sm-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
  }
  .col-sm-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
  }
  .col-sm-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-sm-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-sm-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-sm-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
  }
  .col-sm-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
  }
  .col-sm-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-sm-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-sm-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-sm-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
  }
  .col-sm-18 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
  }
  .col-sm-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-sm-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-sm-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-sm-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
  }
  .col-sm-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-last {
    order: 25;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-6 {
    order: 6;
  }
  .order-sm-7 {
    order: 7;
  }
  .order-sm-8 {
    order: 8;
  }
  .order-sm-9 {
    order: 9;
  }
  .order-sm-10 {
    order: 10;
  }
  .order-sm-11 {
    order: 11;
  }
  .order-sm-12 {
    order: 12;
  }
  .order-sm-13 {
    order: 13;
  }
  .order-sm-14 {
    order: 14;
  }
  .order-sm-15 {
    order: 15;
  }
  .order-sm-16 {
    order: 16;
  }
  .order-sm-17 {
    order: 17;
  }
  .order-sm-18 {
    order: 18;
  }
  .order-sm-19 {
    order: 19;
  }
  .order-sm-20 {
    order: 20;
  }
  .order-sm-21 {
    order: 21;
  }
  .order-sm-22 {
    order: 22;
  }
  .order-sm-23 {
    order: 23;
  }
  .order-sm-24 {
    order: 24;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 4.1666666667%;
  }
  .offset-sm-2 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-3 {
    margin-left: 12.5%;
  }
  .offset-sm-4 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-5 {
    margin-left: 20.8333333333%;
  }
  .offset-sm-6 {
    margin-left: 25%;
  }
  .offset-sm-7 {
    margin-left: 29.1666666667%;
  }
  .offset-sm-8 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-9 {
    margin-left: 37.5%;
  }
  .offset-sm-10 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-11 {
    margin-left: 45.8333333333%;
  }
  .offset-sm-12 {
    margin-left: 50%;
  }
  .offset-sm-13 {
    margin-left: 54.1666666667%;
  }
  .offset-sm-14 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-15 {
    margin-left: 62.5%;
  }
  .offset-sm-16 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-17 {
    margin-left: 70.8333333333%;
  }
  .offset-sm-18 {
    margin-left: 75%;
  }
  .offset-sm-19 {
    margin-left: 79.1666666667%;
  }
  .offset-sm-20 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-21 {
    margin-left: 87.5%;
  }
  .offset-sm-22 {
    margin-left: 91.6666666667%;
  }
  .offset-sm-23 {
    margin-left: 95.8333333333%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
  }
  .col-md-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-md-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
  }
  .col-md-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
  }
  .col-md-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-md-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
  }
  .col-md-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
  }
  .col-md-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-md-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
  }
  .col-md-18 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
  }
  .col-md-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-md-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
  }
  .col-md-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 25;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-6 {
    order: 6;
  }
  .order-md-7 {
    order: 7;
  }
  .order-md-8 {
    order: 8;
  }
  .order-md-9 {
    order: 9;
  }
  .order-md-10 {
    order: 10;
  }
  .order-md-11 {
    order: 11;
  }
  .order-md-12 {
    order: 12;
  }
  .order-md-13 {
    order: 13;
  }
  .order-md-14 {
    order: 14;
  }
  .order-md-15 {
    order: 15;
  }
  .order-md-16 {
    order: 16;
  }
  .order-md-17 {
    order: 17;
  }
  .order-md-18 {
    order: 18;
  }
  .order-md-19 {
    order: 19;
  }
  .order-md-20 {
    order: 20;
  }
  .order-md-21 {
    order: 21;
  }
  .order-md-22 {
    order: 22;
  }
  .order-md-23 {
    order: 23;
  }
  .order-md-24 {
    order: 24;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 4.1666666667%;
  }
  .offset-md-2 {
    margin-left: 8.3333333333%;
  }
  .offset-md-3 {
    margin-left: 12.5%;
  }
  .offset-md-4 {
    margin-left: 16.6666666667%;
  }
  .offset-md-5 {
    margin-left: 20.8333333333%;
  }
  .offset-md-6 {
    margin-left: 25%;
  }
  .offset-md-7 {
    margin-left: 29.1666666667%;
  }
  .offset-md-8 {
    margin-left: 33.3333333333%;
  }
  .offset-md-9 {
    margin-left: 37.5%;
  }
  .offset-md-10 {
    margin-left: 41.6666666667%;
  }
  .offset-md-11 {
    margin-left: 45.8333333333%;
  }
  .offset-md-12 {
    margin-left: 50%;
  }
  .offset-md-13 {
    margin-left: 54.1666666667%;
  }
  .offset-md-14 {
    margin-left: 58.3333333333%;
  }
  .offset-md-15 {
    margin-left: 62.5%;
  }
  .offset-md-16 {
    margin-left: 66.6666666667%;
  }
  .offset-md-17 {
    margin-left: 70.8333333333%;
  }
  .offset-md-18 {
    margin-left: 75%;
  }
  .offset-md-19 {
    margin-left: 79.1666666667%;
  }
  .offset-md-20 {
    margin-left: 83.3333333333%;
  }
  .offset-md-21 {
    margin-left: 87.5%;
  }
  .offset-md-22 {
    margin-left: 91.6666666667%;
  }
  .offset-md-23 {
    margin-left: 95.8333333333%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
  }
  .col-lg-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-lg-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
  }
  .col-lg-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
  }
  .col-lg-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-lg-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
  }
  .col-lg-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
  }
  .col-lg-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-lg-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
  }
  .col-lg-18 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
  }
  .col-lg-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-lg-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
  }
  .col-lg-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 25;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-6 {
    order: 6;
  }
  .order-lg-7 {
    order: 7;
  }
  .order-lg-8 {
    order: 8;
  }
  .order-lg-9 {
    order: 9;
  }
  .order-lg-10 {
    order: 10;
  }
  .order-lg-11 {
    order: 11;
  }
  .order-lg-12 {
    order: 12;
  }
  .order-lg-13 {
    order: 13;
  }
  .order-lg-14 {
    order: 14;
  }
  .order-lg-15 {
    order: 15;
  }
  .order-lg-16 {
    order: 16;
  }
  .order-lg-17 {
    order: 17;
  }
  .order-lg-18 {
    order: 18;
  }
  .order-lg-19 {
    order: 19;
  }
  .order-lg-20 {
    order: 20;
  }
  .order-lg-21 {
    order: 21;
  }
  .order-lg-22 {
    order: 22;
  }
  .order-lg-23 {
    order: 23;
  }
  .order-lg-24 {
    order: 24;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 4.1666666667%;
  }
  .offset-lg-2 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-3 {
    margin-left: 12.5%;
  }
  .offset-lg-4 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-5 {
    margin-left: 20.8333333333%;
  }
  .offset-lg-6 {
    margin-left: 25%;
  }
  .offset-lg-7 {
    margin-left: 29.1666666667%;
  }
  .offset-lg-8 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-9 {
    margin-left: 37.5%;
  }
  .offset-lg-10 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-11 {
    margin-left: 45.8333333333%;
  }
  .offset-lg-12 {
    margin-left: 50%;
  }
  .offset-lg-13 {
    margin-left: 54.1666666667%;
  }
  .offset-lg-14 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-15 {
    margin-left: 62.5%;
  }
  .offset-lg-16 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-17 {
    margin-left: 70.8333333333%;
  }
  .offset-lg-18 {
    margin-left: 75%;
  }
  .offset-lg-19 {
    margin-left: 79.1666666667%;
  }
  .offset-lg-20 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-21 {
    margin-left: 87.5%;
  }
  .offset-lg-22 {
    margin-left: 91.6666666667%;
  }
  .offset-lg-23 {
    margin-left: 95.8333333333%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
  }
  .col-xl-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-xl-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-xl-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-xl-44 {
    flex: 0 0 19.6666666667%;
    max-width: 19.6666666667%;
  }
  .col-xl-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
  }
  .col-xl-6 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
  }
  .col-xl-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-xl-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }
  .col-xl-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-xl-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
  }
  .col-xl-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
  }
  .col-xl-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-xl-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .col-xl-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-xl-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
  }
  .col-xl-18 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
  }
  .col-xl-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-xl-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }
  .col-xl-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-xl-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
  }
  .col-xl-24 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-last {
    order: 25;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-6 {
    order: 6;
  }
  .order-xl-7 {
    order: 7;
  }
  .order-xl-8 {
    order: 8;
  }
  .order-xl-9 {
    order: 9;
  }
  .order-xl-10 {
    order: 10;
  }
  .order-xl-11 {
    order: 11;
  }
  .order-xl-12 {
    order: 12;
  }
  .order-xl-13 {
    order: 13;
  }
  .order-xl-14 {
    order: 14;
  }
  .order-xl-15 {
    order: 15;
  }
  .order-xl-16 {
    order: 16;
  }
  .order-xl-17 {
    order: 17;
  }
  .order-xl-18 {
    order: 18;
  }
  .order-xl-19 {
    order: 19;
  }
  .order-xl-20 {
    order: 20;
  }
  .order-xl-21 {
    order: 21;
  }
  .order-xl-22 {
    order: 22;
  }
  .order-xl-23 {
    order: 23;
  }
  .order-xl-24 {
    order: 24;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 4.1666666667%;
  }
  .offset-xl-2 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-3 {
    margin-left: 12.5%;
  }
  .offset-xl-4 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-5 {
    margin-left: 20.8333333333%;
  }
  .offset-xl-6 {
    margin-left: 25%;
  }
  .offset-xl-7 {
    margin-left: 29.1666666667%;
  }
  .offset-xl-8 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-9 {
    margin-left: 37.5%;
  }
  .offset-xl-10 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-11 {
    margin-left: 45.8333333333%;
  }
  .offset-xl-12 {
    margin-left: 50%;
  }
  .offset-xl-13 {
    margin-left: 54.1666666667%;
  }
  .offset-xl-14 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-15 {
    margin-left: 62.5%;
  }
  .offset-xl-16 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-17 {
    margin-left: 70.8333333333%;
  }
  .offset-xl-18 {
    margin-left: 75%;
  }
  .offset-xl-19 {
    margin-left: 79.1666666667%;
  }
  .offset-xl-20 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-21 {
    margin-left: 87.5%;
  }
  .offset-xl-22 {
    margin-left: 91.6666666667%;
  }
  .offset-xl-23 {
    margin-left: 95.8333333333%;
  }
}
@media print {
  *,
*::before,
*::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
img {
    page-break-inside: avoid;
  }
  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
.table th {
    background-color: #fff !important;
  }
  .table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}
/*# sourceMappingURL=reset.css.map */
/* libraries */
/*!
 * Bootstrap-select v1.13.18 (https://developer.snapappointments.com/bootstrap-select)
 *
 * Copyright 2012-2020 SnapAppointments, LLC
 * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
 */
@-webkit-keyframes bs-notify-fadeOut {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes bs-notify-fadeOut {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bs-notify-fadeOut {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
.bootstrap-select > select.bs-select-hidden, select.bs-select-hidden, select.selectpicker {
  display: none !important;
}

.bootstrap-select {
  width: 220px\0 ;
  vertical-align: middle;
}

.bootstrap-select > .dropdown-toggle {
  position: relative;
  width: 100%;
  text-align: right;
  white-space: nowrap;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.bootstrap-select > .dropdown-toggle:after {
  margin-top: -1px;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: #999;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:active, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:hover {
  color: rgba(255, 255, 255, 0.5);
}

.bootstrap-select > select {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  display: block !important;
  width: 0.5px !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none;
  z-index: 0 !important;
}

.bootstrap-select > select.mobile-device {
  top: 0;
  left: 0;
  display: block !important;
  width: 100% !important;
  z-index: 2 !important;
}

.bootstrap-select.is-invalid .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .has-error .bootstrap-select .dropdown-toggle, .was-validated .bootstrap-select select:invalid + .dropdown-toggle {
  border-color: #b94a48;
}

.bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select select:valid + .dropdown-toggle {
  border-color: #28a745;
}

.bootstrap-select.fit-width {
  width: auto !important;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 220px;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: thin dotted #333 !important;
  outline: 5px auto -webkit-focus-ring-color !important;
  outline-offset: -2px;
}

.bootstrap-select.form-control {
  margin-bottom: 0;
  padding: 0;
  border: none;
  height: auto;
}

:not(.input-group) > .bootstrap-select.form-control:not([class*=col-]) {
  width: 100%;
}

.bootstrap-select.form-control.input-group-btn {
  float: none;
  z-index: auto;
}

.form-inline .bootstrap-select, .form-inline .bootstrap-select.form-control:not([class*=col-]) {
  width: auto;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*=col-] {
  float: none;
  display: inline-block;
  margin-left: 0;
}

.bootstrap-select.dropdown-menu-right, .bootstrap-select[class*=col-].dropdown-menu-right, .row .bootstrap-select[class*=col-].dropdown-menu-right {
  float: right;
}

.form-group .bootstrap-select, .form-horizontal .bootstrap-select, .form-inline .bootstrap-select {
  margin-bottom: 0;
}

.form-group-lg .bootstrap-select.form-control, .form-group-sm .bootstrap-select.form-control {
  padding: 0;
}

.form-group-lg .bootstrap-select.form-control .dropdown-toggle, .form-group-sm .bootstrap-select.form-control .dropdown-toggle {
  height: 100%;
  font-size: inherit;
  line-height: inherit;
  border-radius: inherit;
}

.bootstrap-select.form-control-lg .dropdown-toggle, .bootstrap-select.form-control-sm .dropdown-toggle {
  font-size: inherit;
  line-height: inherit;
  border-radius: inherit;
}

.bootstrap-select.form-control-sm .dropdown-toggle {
  padding: 0.25rem 0.5rem;
}

.bootstrap-select.form-control-lg .dropdown-toggle {
  padding: 0.5rem 1rem;
}

.form-inline .bootstrap-select .form-control {
  width: 100%;
}

.bootstrap-select.disabled, .bootstrap-select > .disabled {
  cursor: not-allowed;
}

.bootstrap-select.disabled:focus, .bootstrap-select > .disabled:focus {
  outline: 0 !important;
}

.bootstrap-select.bs-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 0 !important;
  padding: 0 !important;
}

.bootstrap-select.bs-container .dropdown-menu {
  z-index: 1060;
}

.bootstrap-select .dropdown-toggle .filter-option {
  position: static;
  top: 0;
  left: 0;
  float: left;
  height: 100%;
  width: 100%;
  text-align: left;
  overflow: hidden;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.bs3.bootstrap-select .dropdown-toggle .filter-option {
  padding-right: inherit;
}

.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option {
  position: absolute;
  padding-top: inherit;
  padding-bottom: inherit;
  padding-left: inherit;
  float: none;
}

.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
  padding-right: inherit;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  overflow: hidden;
}

.bootstrap-select .dropdown-toggle .filter-expand {
  width: 0 !important;
  float: left;
  opacity: 0 !important;
  overflow: hidden;
}

.bootstrap-select .dropdown-toggle .caret {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  vertical-align: middle;
}

.input-group .bootstrap-select.form-control .dropdown-toggle {
  border-radius: inherit;
}

.bootstrap-select[class*=col-] .dropdown-toggle {
  width: 100%;
}

.bootstrap-select .dropdown-menu {
  min-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-select .dropdown-menu > .inner:focus {
  outline: 0 !important;
}

.bootstrap-select .dropdown-menu.inner {
  position: static;
  float: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.bootstrap-select .dropdown-menu li {
  position: relative;
}

.bootstrap-select .dropdown-menu li.active small {
  color: rgba(255, 255, 255, 0.5) !important;
}

.bootstrap-select .dropdown-menu li.disabled a {
  cursor: not-allowed;
}

.bootstrap-select .dropdown-menu li a {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bootstrap-select .dropdown-menu li a.opt {
  position: relative;
  padding-left: 2.25em;
}

.bootstrap-select .dropdown-menu li a span.check-mark {
  display: none;
}

.bootstrap-select .dropdown-menu li a span.text {
  display: inline-block;
}

.bootstrap-select .dropdown-menu li small {
  padding-left: 0.5em;
}

.bootstrap-select .dropdown-menu .notify {
  position: absolute;
  bottom: 5px;
  width: 96%;
  margin: 0 2%;
  min-height: 26px;
  padding: 3px 5px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  opacity: 0.9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-select .dropdown-menu .notify.fadeOut {
  -webkit-animation: 0.3s linear 750ms forwards bs-notify-fadeOut;
  -o-animation: 0.3s linear 750ms forwards bs-notify-fadeOut;
  animation: 0.3s linear 750ms forwards bs-notify-fadeOut;
}

.bootstrap-select .no-results {
  padding: 3px;
  background: #f5f5f5;
  margin: 0 5px;
  white-space: nowrap;
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option {
  position: static;
  display: inline;
  padding: 0;
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner, .bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
  display: inline;
}

.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before {
  content: " ";
}

.bootstrap-select.fit-width .dropdown-toggle .caret {
  position: static;
  top: auto;
  margin-top: -1px;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 5px;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 34px;
}

.bootstrap-select .bs-ok-default:after {
  content: "";
  display: block;
  width: 0.5em;
  height: 1em;
  border-style: solid;
  border-width: 0 0.26em 0.26em 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
  z-index: 1061;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
  content: "";
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(204, 204, 204, 0.2);
  position: absolute;
  bottom: -4px;
  left: 9px;
  display: none;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -4px;
  left: 10px;
  display: none;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
  bottom: auto;
  top: -4px;
  border-top: 7px solid rgba(204, 204, 204, 0.2);
  border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
  bottom: auto;
  top: -4px;
  border-top: 6px solid #fff;
  border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
  right: 12px;
  left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
  right: 13px;
  left: auto;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:after, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:before, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:after, .bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:before {
  display: block;
}

.bs-actionsbox, .bs-donebutton, .bs-searchbox {
  padding: 4px 8px;
}

.bs-actionsbox {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bs-actionsbox .btn-group button {
  width: 50%;
}

.bs-donebutton {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bs-donebutton .btn-group button {
  width: 100%;
}

.bs-searchbox + .bs-actionsbox {
  padding: 0 8px 4px;
}

.bs-searchbox .form-control {
  margin-bottom: 0;
  width: 100%;
  float: none;
}

/* megamenu responsive */
@media (max-width: 991px) {
  .site-header__search .sh-search-row > .sh-nav__cat {
    display: none !important;
  }
}
@keyframes mm-res-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.mega-menu-site-responsive {
  position: fixed;
  top: 0;
  right: -340px;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(160deg, #ffffff 0%, #f7f5ff 100%);
  box-shadow: -20px 0 60px rgba(40, 20, 100, 0.18);
  display: flex;
  flex-direction: column;
  z-index: 9999999;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border-radius: 24px 0 0 24px;
}
.mega-menu-site-responsive.active {
  right: 0;
}
.mega-menu-site-responsive .mm-res__head {
  position: relative;
  padding: 20px 18px 18px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #4c1d95 100%);
  color: #fff;
  flex-shrink: 0;
  border-bottom-right-radius: 28px;
  border-bottom-left-radius: 28px;
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.25);
}
.mega-menu-site-responsive .mm-res__head::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.mega-menu-site-responsive .mm-res__head::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.mega-menu-site-responsive .mm-res__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.mega-menu-site-responsive .mm-res__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}
.mega-menu-site-responsive .mm-res__logo img {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 5px;
  backdrop-filter: blur(8px);
}
.mega-menu-site-responsive .mm-res__logo span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.mega-menu-site-responsive .mm-res__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-menu-site-responsive .mm-res__theme,
.mega-menu-site-responsive .mm-res__close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  padding: 0;
}
.mega-menu-site-responsive .mm-res__theme:hover,
.mega-menu-site-responsive .mm-res__close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.mega-menu-site-responsive .mm-res__close:hover {
  transform: rotate(90deg);
}
.mega-menu-site-responsive .mm-res__theme {
  position: relative;
}
.mega-menu-site-responsive .mm-res__theme svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.mega-menu-site-responsive .mm-res__theme .mm-res__theme-sun {
  opacity: 1;
}
.mega-menu-site-responsive .mm-res__theme .mm-res__theme-moon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
}
.mega-menu-site-responsive .mm-res__theme:hover {
  transform: rotate(15deg);
}
.mega-menu-site-responsive .mm-res__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(10px);
}
.mega-menu-site-responsive .mm-res__search svg {
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}
.mega-menu-site-responsive .mm-res__search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.mega-menu-site-responsive .mm-res__search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.mega-menu-site-responsive .mm-res__auth {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.mega-menu-site-responsive .mm-res__auth-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}
.mega-menu-site-responsive .mm-res__auth-btn--login {
  background: #fff;
  color: #6d28d9;
}
.mega-menu-site-responsive .mm-res__auth-btn--login:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.mega-menu-site-responsive .mm-res__auth-btn--register {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}
.mega-menu-site-responsive .mm-res__auth-btn--register:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.mega-menu-site-responsive .mm-res__body, .mega-menu-site-responsive__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 20px;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}
.mega-menu-site-responsive .mm-res__body::-webkit-scrollbar, .mega-menu-site-responsive__body::-webkit-scrollbar {
  width: 5px;
}
.mega-menu-site-responsive .mm-res__body::-webkit-scrollbar-track, .mega-menu-site-responsive__body::-webkit-scrollbar-track {
  background: transparent;
}
.mega-menu-site-responsive .mm-res__body::-webkit-scrollbar-thumb, .mega-menu-site-responsive__body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.25);
  border-radius: 3px;
}
.mega-menu-site-responsive .mm-res__section-title {
  display: block;
  padding: 6px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #8b5cf6;
  letter-spacing: 0.8px;
  margin-top: 4px;
}
.mega-menu-site-responsive__body > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 6px 0;
}
.mega-menu-site-responsive__body > ul > li {
  margin-bottom: 4px;
  position: relative;
  border-bottom: none;
  animation: mm-res-fade-in 0.35s ease-out both;
}
.mega-menu-site-responsive__body > ul > li:nth-child(1) {
  animation-delay: 0.035s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(2) {
  animation-delay: 0.07s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(3) {
  animation-delay: 0.105s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(4) {
  animation-delay: 0.14s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(5) {
  animation-delay: 0.175s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(6) {
  animation-delay: 0.21s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(7) {
  animation-delay: 0.245s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(8) {
  animation-delay: 0.28s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(9) {
  animation-delay: 0.315s;
}
.mega-menu-site-responsive__body > ul > li:nth-child(10) {
  animation-delay: 0.35s;
}
.mega-menu-site-responsive__body > ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: #2d1f6e;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  line-height: 1.3;
}
.mega-menu-site-responsive__body > ul > li > a .mm-res__ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.mega-menu-site-responsive__body > ul > li > a .mm-res__label {
  flex: 1;
}
.mega-menu-site-responsive__body > ul > li > a .mm-res__chev {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  transition: transform 0.3s ease;
}
.mega-menu-site-responsive__body > ul > li > a:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.04));
  color: #6d28d9;
}
.mega-menu-site-responsive__body > ul > li > a:hover .mm-res__ico {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  transform: scale(1.05);
}
.mega-menu-site-responsive__body > ul > li > ul {
  list-style: none;
  padding: 6px 6px 6px 6px;
  margin: 4px 0 6px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(236, 72, 153, 0.03));
  border-radius: 12px;
  display: none;
}
.mega-menu-site-responsive__body > ul > li > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: #4c1d95;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.mega-menu-site-responsive__body > ul > li > ul > li > a .mm-res__ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  flex-shrink: 0;
}
.mega-menu-site-responsive__body > ul > li > ul > li > a:hover {
  background: #fff;
  color: #6d28d9;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.12);
}
.mega-menu-site-responsive__body > ul > li.active > a {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.06));
  color: #6d28d9;
}
.mega-menu-site-responsive__body > ul > li.active > a .mm-res__chev {
  transform: rotate(180deg);
}
.mega-menu-site-responsive__body > ul > li.active > ul {
  display: block;
}
.mega-menu-site-responsive__body > ul > li.menu-item-has-children:after {
  display: none;
}
.mega-menu-site-responsive__footer,
.mega-menu-site-responsive .mm-res__footer {
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.06));
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: none;
  border-top: 1px solid rgba(124, 58, 237, 0.08);
}
.mega-menu-site-responsive .mm-res__footer-title {
  font-size: 11px;
  font-weight: 600;
  color: #7c3aed;
  letter-spacing: 0.5px;
}
.mega-menu-site-responsive .mm-res__socials {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.mega-menu-site-responsive .mm-res__socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  transition: all 0.25s ease;
  margin-left: 0;
}
.mega-menu-site-responsive .mm-res__socials a:hover {
  transform: translateY(-3px);
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

.mask-shadow {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 9999998;
  filter: none;
}
.mask-shadow.active {
  visibility: visible;
  opacity: 1;
}

[data-theme=dark] .mega-menu-site-responsive {
  background: linear-gradient(160deg, #0f0a30 0%, #07052a 100%);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__head {
  background: linear-gradient(135deg, #4c1d95 0%, #3b1577 60%, #1e1057 100%);
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__theme .mm-res__theme-sun {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(90deg);
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__theme .mm-res__theme-moon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.9) rotate(0);
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > a {
  color: #e4deff;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > a .mm-res__ico {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.12));
  color: #c4b5fd;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > a:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #fff;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > ul {
  background: rgba(15, 10, 50, 0.6);
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > ul > li > a {
  color: #c7c5ee;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > ul > li > a .mm-res__ico {
  background: rgba(255, 255, 255, 0.06);
  color: #c4b5fd;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li > ul > li > a:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #fff;
  box-shadow: none;
}
[data-theme=dark] .mega-menu-site-responsive__body > ul > li.active > a {
  background: rgba(139, 92, 246, 0.18);
  color: #fff;
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__section-title {
  color: #a78bfa;
}
[data-theme=dark] .mega-menu-site-responsive__footer,
[data-theme=dark] .mega-menu-site-responsive .mm-res__footer {
  background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.08));
  border-top: 1px solid rgba(139, 92, 246, 0.15);
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__socials a {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  box-shadow: none;
}
[data-theme=dark] .mega-menu-site-responsive .mm-res__socials a:hover {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
}
[data-theme=dark] .mask-shadow {
  background: rgba(0, 0, 0, 0.7);
}

/* general */
body {
  direction: rtl;
  text-align: right;
  font-family: Yekan Bakh ExtraExpanded;
}

.en-number {
  font-family: Yekan Bakh ExtraExpanded !important;
}

*:focus {
  outline: unset;
}

.panel-wrapper {
  background-color: #f6f6f6;
  padding-top: 0;
}
.panel-wrapper .bootstrap-select {
  margin-bottom: 28px;
}
.panel-wrapper .bootstrap-select .dropdown-toggle {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  line-height: 53px;
  height: 53px;
  font-size: 14px;
}
.panel-wrapper .site-header {
  padding-top: 20px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}
.panel-wrapper .site-header:before, .panel-wrapper .site-header:after {
  display: none;
}

.cart-header {
  background-color: #f6f6f6;
}
.cart-header .site-header:before {
  background-image: linear-gradient(to right, #f7f7f7 0%, #f7f7f7 25%, #6a4fa0 33%, #16a2bd 42%, #89c736 52%, #fcc43f 61%, #d02054 69%, #f8f8f8 75%, #f8f8f8 100%);
}
.cart-header .site-header:after {
  display: none;
}
.cart-header .site-header .cart-header__bottom .site-header__bottom-search input {
  background-color: #ebebeb;
}
.cart-header .site-header .site-header__bottom .site-header__bottom-search button {
  background-color: #ebebeb;
}

.p32 {
  margin: 0 -16px;
}
.p32 > [class*=col-] {
  padding: 0 16px;
}

.p30 {
  margin: 0 -15px;
}
.p30 > [class*=col-] {
  padding: 0 15px;
}

.p13 > [class*=col-] {
  padding: 0 6.5px;
}

.mb-30 {
  margin-bottom: 30px;
}

.pl7 {
  padding-left: 7.5px;
}

.pr2 {
  padding-right: 2.5px;
}

.pl32 {
  padding-left: 32px;
}

.pr35 {
  padding-right: 35px;
}

.pl35 {
  padding-left: 35px;
}

.pl39 {
  padding-left: 39px;
}

.pr38 {
  padding-right: 38px;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

[data-theme=dark] {
  background-color: #070525;
}
[data-theme=dark] input,
[data-theme=dark] textarea {
  color: #c7c5ee;
}
[data-theme=dark] .panel-wrapper,
[data-theme=dark] .cart-header {
  background-color: unset;
}
[data-theme=dark] .content, [data-theme=dark] .content__title, [data-theme=dark] .content p {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search input {
  color: #c7c5ee;
  background-color: #03021a;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search input::-webkit-input-placeholder {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search input:-ms-input-placeholder {
  color: #908dd3;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search input::placeholder {
  color: #908dd3;
}
[data-theme=dark] .bootstrap-select .dropdown-toggle:before {
  color: #c7c5ee;
}
[data-theme=dark] .dropdown-menu {
  background-color: #070525;
}
[data-theme=dark] .dropdown-item {
  color: #c7c5ee;
}
[data-theme=dark] .dropdown-item:hover, [data-theme=dark] .dropdown-item:focus {
  background-color: #161246;
}
[data-theme=dark] .dropdown-item.active, [data-theme=dark] .dropdown-item:active {
  background-color: #17a404;
  color: #fff;
}
[data-theme=dark] .bootstrap-select .dropdown-toggle {
  background-color: transparent;
  border-color: #1e1b52;
}
[data-theme=dark] .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #c7c5ee;
}

.landing .container {
  width: 800px;
}

/* header */
.site-header {
  position: relative;
  /* old rainbow pseudo-elements removed */
  /* ── Modern header shadow divider ──────────────────── */
}
.site-header:before, .site-header:after {
  display: none;
}
.site-header__top {
  background-color: #f3f3f3;
}
.site-header__top__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__top__item ul {
  display: flex;
  align-items: center;
}
.site-header__top__item ul li {
  display: block;
  line-height: 40px;
  margin-left: 27px;
}
.site-header__top__item ul li a {
  font-size: 13.19px;
  font-weight: bold;
  color: #070525;
  transition: 0.03s;
}
.site-header__top__item ul li a:hover {
  color: #f31212;
}
.site-header__top__item ul li:last-child {
  margin-left: 0;
}
.site-header__top__item__social ul li:last-child {
  padding-left: 15px;
  border-left: 1px solid #070525;
}
.site-header__top__item__social ul li:last-child i {
  line-height: 40px;
}
.site-header__center {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  line-height: 50px;
}
.site-header__center .site-header__center-right {
  display: flex;
  align-items: center;
}
.site-header__center .site-header__center-right .site-header__center-name {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  margin-left: 40px;
}
.site-header__center .site-header__center-right .site-header__center-item {
  position: relative;
  margin-left: 23px;
  line-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__center .site-header__center-right .site-header__center-item:nth-last-of-type(1) {
  margin-left: 0;
}
.site-header__center .site-header__center-right .site-header__center-item i {
  color: #000000;
  line-height: inherit;
}
.site-header__center .site-header__center-right .site-header__center-item i.icon-tupe {
  font-size: 18px;
}
.site-header__center .site-header__center-right .site-header__center-item i.icon-card {
  font-size: 14px;
}
.site-header__center .site-header__center-right .site-header__center-item i.icon-heart {
  font-size: 16px;
}
.site-header__center .site-header__center-right .site-header__center-item i.icon-comment {
  font-size: 16px;
}
.site-header__center .site-header__center-right .site-header__center-item .site-header__center-item-count {
  padding: 3px 5px 2.5px 6px;
  display: flex;
  align-items: center;
  color: #fcfcfc;
  font-size: 14px;
  font-weight: 400;
  background-color: #f31212;
  position: absolute;
  border-radius: 60px;
  z-index: 10;
  line-height: 10px;
  top: 9px;
  left: 8px;
}
.site-header__center .site-header__center-right .site-header__center-item--light i {
  color: #bdbdbd;
}
.site-header__center .site-header__center-nav {
  margin-right: auto;
}
.site-header__center .site-header__center-nav ul {
  display: flex;
  align-items: center;
}
.site-header__center .site-header__center-nav ul li {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-left: 20px;
  transition: 0.3s;
}
.site-header__center .site-header__center-nav ul li:after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 60px;
  background-color: #d9d9d9;
  margin-right: 20px;
}
.site-header__center .site-header__center-nav ul li:last-child {
  margin-left: 0;
}
.site-header__center .site-header__center-nav ul li:last-child:after {
  display: none;
}
.site-header__center .site-header__center-nav ul li:hover {
  color: #f31212;
}
.site-header__bottom {
  display: flex;
  align-items: center;
  position: relative;
}
.site-header__bottom__theme-switch {
  display: flex;
  flex-direction: column;
  margin-left: 56px;
  position: relative;
  width: 22px;
  height: 46px;
  z-index: 10;
}
.site-header__bottom__theme-switch::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../img/sw.svg");
  z-index: 5;
  width: 22px;
  height: 46px;
}
.site-header__bottom__theme-switch:before {
  content: "";
  position: absolute;
  right: 6px;
  left: 6px;
  top: 5px;
  bottom: 5px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.site-header__bottom__theme-switch > span {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
  color: #424242;
  white-space: nowrap;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
}
.site-header__bottom__theme-switch > div {
  z-index: 6;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.site-header__bottom__theme-switch > div:first-child {
  margin-bottom: 2px;
}
.site-header__bottom__theme-switch > div:first-child::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #211f47;
  background-image: linear-gradient(60deg, #f3b112, #f38714);
  transition: 0.2s;
}
.site-header__bottom__theme-switch > div:nth-child(2)::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #757575;
  transition: 0.2s;
}
.site-header__bottom__theme-switch > div:nth-child(2)::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
}
.site-header__bottom__theme-switch > svg {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 16px;
  fill: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.site-header__bottom__theme-switch > svg.active {
  text-shadow: 0 0 #c7c5ee;
  fill: rgb(0, 0, 0);
}
.site-header__bottom__theme-switch[data-current-theme=dark] > div:first-child:before {
  background-image: unset;
}
.site-header__bottom__theme-switch[data-current-theme=dark] > div:nth-child(2):before {
  background-color: #24b7d4;
}
.site-header__bottom__theme-switch:hover > span {
  padding-left: 10px;
  opacity: 1;
  visibility: visible;
}
.site-header__bottom .site-header__bottom-cart {
  height: 50px;
  background-color: #25a913;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 25px;
  padding: 0 26px 0 18px;
  font-family: Yekan Bakh ExtraExpanded;
}
.site-header__bottom .site-header__bottom-cart .site-header__bottom-count {
  color: #fbfbfb;
  font-size: 22px;
  font-weight: 600;
  margin-left: 11px;
}
.site-header__bottom .site-header__bottom-cart .site-header__bottom-title {
  color: #fbfbfb;
  font-size: 14px;
  font-weight: bold;
  margin-left: 19px;
}
.site-header__bottom .site-header__bottom-cart i.basket {
  font-size: 21px;
  color: #fdfdfd;
  margin-left: 16px;
}
.site-header__bottom .site-header__bottom-cart i.drop {
  font-size: 15px;
  color: #ffffff;
}
.site-header__bottom .site-header__bottom-cart--empty {
  background-color: #f31212;
  padding: 0;
  width: 50px;
  justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eee, 0 0 0 8px #fff, 0 0 0 9px #f5f5f5;
}
.site-header__bottom .site-header__bottom-cart--empty i.basket {
  margin-left: 0;
}
.site-header__bottom .site-header__bottom-cat {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 60px;
  height: 49px;
  color: #000000;
  font-size: 13.7px;
  font-weight: 600;
  padding: 0 27px 0 9px;
  margin-left: 32px;
  transition: 0.3s;
  position: relative;
}
.site-header__bottom .site-header__bottom-cat.icon-menu {
  font-size: 15px;
  margin-left: 26px;
}
.site-header__bottom .site-header__bottom-cat.icon-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 112px;
  height: 50px;
  transform: translateY(-50%);
  border-radius: 0 60px 60px 0;
  transition: 0.3s;
  pointer-events: none;
}
.site-header__bottom .site-header__bottom-cat i {
  color: #000000;
}
.site-header__bottom .site-header__bottom-cat i.icon-menu {
  font-size: 15px;
  margin-left: 26px;
}
.site-header__bottom .site-header__bottom-cat i.icon-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 112px;
  height: 50px;
  transform: translateY(-50%);
  border-radius: 0 60px 60px 0;
  box-shadow: 17px 0 30px -14px rgba(0, 0, 0, 0.28);
  transition: 0.3s;
  pointer-events: none;
}
.site-header__bottom .site-header__bottom-cat i.icon-drop-down {
  font-size: 9px;
  margin-right: 13px;
  display: inline-block;
  transition: 0.3s;
  transform: rotateX(0);
}
.site-header__bottom .site-header__bottom-cat .megamenu {
  position: absolute;
  display: none;
  top: 100%;
  z-index: 99999;
  min-width: 759px;
  max-width: 1200px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul {
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #eeeeee;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li {
  padding: 0 15px;
  line-height: 60px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li > a {
  white-space: nowrap;
  transition: 0.2s;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0em;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li > a i {
  font-size: 14px;
  font-weight: 700;
  transform: rotate(180deg);
  margin-right: 5px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li:hover > a {
  color: #525FE1;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li:hover > a i {
  color: #525FE1;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list {
  position: absolute;
  right: 0;
  width: 100%;
  display: none;
  margin-top: 13px;
  border-radius: 10px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul {
  border-radius: 10px;
  background-color: #f6f6f6;
  display: grid;
  grid-template-columns: 210px 210px 210px;
  min-height: 361.98px;
  /* padding-top: 20px; */
  padding: 25px 30px;
  overflow: hidden;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul > li {
  line-height: 1;
  position: relative;
  padding: 0 0 17px 0px;
  flex: 0 0 19%;
  max-width: 210px;
  margin-left: 12px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul > li a {
  display: flex;
  align-items: center;
  height: 32px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  font-weight: 600;
  line-height: 20px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul > li a span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  transition: 0.2s;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul > li a img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
  margin-left: 5px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__content ul > li:hover a {
  color: #525FE1;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__img {
  position: absolute;
  top: 25px;
  left: 30px;
  max-width: 226px;
  width: 100%;
  height: 242px;
  border-radius: 5px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__button a {
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0em;
  max-width: 226px;
  height: 32px;
  background-color: #525FE1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  padding: 0 5px;
  margin-top: 16px;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li .item__list__button a i {
  color: #fff;
}
.site-header__bottom .site-header__bottom-cat .megamenu__tabs > ul > li.active .item__list {
  display: block;
}
.site-header__bottom .site-header__bottom-cat.active {
  background-color: #f4f4f4;
  padding-left: 23px;
}
.site-header__bottom .site-header__bottom-cat.active i.icon-drop-down {
  transform: rotateX(180deg);
}
.site-header__bottom .site-header__bottom-cat.active i.icon-menu:after {
  box-shadow: none;
}
.site-header__bottom .site-header__bottom-cat.active .megamenu {
  display: block;
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  top: calc(100% + 13px);
  right: 0;
}
.site-header__bottom .site-header__bottom-search {
  position: relative;
}
.site-header__bottom .site-header__bottom-search input {
  width: 260px;
  height: 49px;
  background-color: #f4f4f4;
  border-radius: 60px;
  padding-right: 20px;
  padding-left: 22px;
  transition: 0.3s width;
}
.site-header__bottom .site-header__bottom-search > i {
  font-size: 17px;
  color: #000000;
  transition: 0.5s;
  transform: rotate(0);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 21px;
  transform: translate(0, -50%);
  pointer-events: none;
}
.site-header__bottom .site-header__bottom-search .ajax-search {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(100% + 11px);
  box-shadow: 0 5px 38px rgba(0, 1, 1, 0.12);
  background-color: #ffffff;
  border-radius: 9px;
  display: none;
  flex-direction: column;
  z-index: 200;
  padding: 16px 15px 23px;
  overflow: hidden;
}
.site-header__bottom .site-header__bottom-search .ajax-search__close {
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
  color: #777;
  z-index: 2;
}
.site-header__bottom .site-header__bottom-search .ajax-search__cat {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #d1d1d1;
  padding-bottom: 19px;
  margin-bottom: 26px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__cat-item {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 13px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__cat-item a {
  color: #55247c;
  transition: 0.3s;
  opacity: 1;
}
.site-header__bottom .site-header__bottom-search .ajax-search__cat-item a:hover {
  opacity: 0.8;
}
.site-header__bottom .site-header__bottom-search .ajax-search__cat-item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-term {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-term span {
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-align: center;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-term img {
  max-width: 16px;
  max-height: 16px;
  border-radius: 3px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-item {
  display: flex;
  background-color: #E4E4E4;
  border-radius: 11px;
  padding: 7.5px 10.5px;
  margin-bottom: 7px;
  position: relative;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-item > a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  right: 0;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-info {
  display: flex;
  flex-direction: column;
  margin: 3px auto;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-info-img img {
  max-width: 18px;
  max-height: 18px;
  margin-left: 4px;
  border-radius: 3px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-info-img small {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-img {
  margin-left: 9px;
  width: 50px;
  height: 50px;
  border-radius: 9px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-img img {
  object-fit: cover;
  border-radius: 9px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-align: left;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 17px;
  font-weight: 600;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price .item {
  display: flex;
  align-items: center;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price .item .price {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  margin-left: 5px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price .item .unit {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price .item--min {
  margin-left: 14px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__product-price .item--max {
  margin-right: 14px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-header {
  background-color: #E4E4E4;
  border-radius: 11px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-header p h2 {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  background-color: #ffffff;
  position: relative;
  z-index: 100;
  padding-left: 7px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-header a {
  display: flex;
  align-items: center;
  padding: 20.5px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-header a span {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-header a i {
  margin-right: auto;
  font-size: 19.3px;
  color: #2A85FF;
  line-height: 15px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-content .swiper-ajax-product {
  overflow: visible !important;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-content .swiper-slide {
  width: 87px !important;
  height: 85px !important;
}
.site-header__bottom .site-header__bottom-search .ajax-search__all-product-content .item figure img {
  max-width: initial;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal {
  display: flex;
  flex-direction: column;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-header {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-header span {
  position: relative;
  background-color: #ffffff;
  z-index: 100;
  display: inline-block;
  padding-left: 9px;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-header:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 11px;
  border-bottom: 1px solid #d1d1d1;
  z-index: 90;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-content {
  display: flex;
  flex-direction: column;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-content .item {
  color: #55247c;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 13px;
  transition: 0.3s;
  opacity: 1;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-content .item:hover {
  opacity: 0.8;
}
.site-header__bottom .site-header__bottom-search .ajax-search__journal-content .item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.site-header__bottom .site-header__bottom-search.active .ajax-search {
  display: flex;
}
.site-header__bottom .site-header__bottom-search.active input {
  width: 410px;
}
.site-header__bottom .site-header__bottom-logo {
  margin-right: auto;
}
.site-header__rgb-color {
  position: relative;
  width: 100%;
  height: 20px;
}
.site-header__rgb-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 11, 72, 0.06) 20%, rgba(91, 82, 240, 0.12) 50%, rgba(15, 11, 72, 0.06) 80%, transparent 100%);
}
.site-header__rgb-color::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 20px;
  background: linear-gradient(180deg, rgba(15, 11, 72, 0.04) 0%, transparent 100%);
  pointer-events: none;
}
.site-header .site-header-responsive {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 5px 24px -14px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0 15px;
  display: none;
}
.site-header .site-header-responsive__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 15px;
}
.site-header .site-header-responsive__menu i {
  color: #f31212;
}
.site-header .site-header-responsive__user {
  margin-left: 10px;
}
.site-header .site-header-responsive__user, .site-header .site-header-responsive__cart {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.site-header .site-header-responsive__user a, .site-header .site-header-responsive__cart a {
  display: flex;
  align-items: center;
}
.site-header .site-header-responsive__user i, .site-header .site-header-responsive__cart i {
  color: #000;
  font-size: 16px;
  margin-left: 5px;
}
.site-header .site-header-responsive__cart {
  order: 4;
  margin-right: auto;
}
.site-header .site-header-responsive__cart a span {
  margin-right: 5px;
  background-color: #17a404;
  padding: 0 3px;
  line-height: 15px;
  color: #fff;
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  height: 20px;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
}
.site-header .site-header-responsive__cart.fill a i {
  color: #17a404;
}
.site-header .site-header-responsive > a {
  margin-right: auto;
}
.site-header .site-header-responsive > a img {
  height: 35px;
}
.site-header .mega-menu-site-responsive .logo-response {
  margin-bottom: 4px;
}
.site-header .mega-menu-site-responsive__search form {
  width: 100%;
  height: 49px;
  background-color: #f4f4f4;
  border-radius: 60px;
  padding-right: 20px;
  padding-left: 20px;
}
.site-header .mega-menu-site-responsive__search form button {
  left: 50px;
  position: absolute;
}
.site-header .mega-menu-site-responsive__header {
  padding: 30px 15px 0 15px;
  margin-bottom: 15px;
}
.site-header .mega-menu-site-responsive__header .close {
  position: absolute;
  top: 15px;
  left: 15px;
}
.site-header .mega-menu-site-responsive__header-profile {
  display: flex;
  align-items: center;
}
.site-header .mega-menu-site-responsive__header-profile .name {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  margin-left: 40px;
}
.site-header .mega-menu-site-responsive__header-profile .item {
  position: relative;
  margin-left: 23px;
}
.site-header .mega-menu-site-responsive__header-profile .item:nth-last-of-type(1) {
  margin-left: 0;
}
.site-header .mega-menu-site-responsive__header-profile .item i {
  color: #000000;
}
.site-header .mega-menu-site-responsive__header-profile .item i.icon-tupe {
  font-size: 18px;
}
.site-header .mega-menu-site-responsive__header-profile .item i.icon-card {
  font-size: 14px;
}
.site-header .mega-menu-site-responsive__header-profile .item i.icon-heart {
  font-size: 16px;
}
.site-header .mega-menu-site-responsive__header-profile .item i.icon-comment {
  font-size: 16px;
}
.site-header .mega-menu-site-responsive__header-profile .item .count {
  padding: 3px 5px 2.5px 6px;
  display: flex;
  align-items: center;
  color: #fcfcfc;
  font-size: 14px;
  font-weight: 600;
  background-color: #f31212;
  position: absolute;
  border-radius: 60px;
  z-index: 10;
  line-height: 10px;
  top: 9px;
  left: 8px;
}
.site-header .mega-menu-site-responsive__header-profile .item--light i {
  color: #bdbdbd;
}
.site-header .mega-menu-site-responsive__header-profile .item--cart {
  top: -1px;
}
.site-header .mega-menu-site-responsive__header-profile .item--cart .count {
  top: 10px;
}

@keyframes animate-cart-btn {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
[data-theme=dark] .site-header .site-header-responsive {
  background-color: #070525;
}
[data-theme=dark] .site-header .site-header-responsive__menu i {
  color: #fff;
}
[data-theme=dark] .site-header .site-header-responsive__user a {
  color: #c7c5ee;
}
[data-theme=dark] .site-header .site-header-responsive__cart a {
  color: #c7c5ee;
}
[data-theme=dark] .site-header .site-header-responsive__user i {
  color: #c7c5ee;
}
[data-theme=dark] .site-header .site-header-responsive__cart i {
  color: #c7c5ee;
}
[data-theme=dark] .site-header:before {
  background-image: linear-gradient(to right, #070525 0%, #070525 25%, #6a4fa0 33%, #16a2bd 42%, #89c736 52%, #fcc43f 61%, #d02054 69%, #070525 75%, #070525 100%);
}
[data-theme=dark] .site-header:after {
  background-color: #070525;
  background-image: linear-gradient(to right, #070525 0%, #070525 25%, #6a4fa0 33%, #16a2bd 42%, #89c736 52%, #fcc43f 61%, #d02054 69%, #070525 75%, #070525 100%);
}
[data-theme=dark] .site-header__top {
  background-color: #110f3f;
}
[data-theme=dark] .site-header__top__item ul li a {
  color: #fff;
}
[data-theme=dark] .site-header__top__item__social ul li:last-child {
  border-color: #fff;
}
[data-theme=dark] .site-header__center {
  border-bottom: 1px solid #110f3f;
}
[data-theme=dark] .site-header__center .site-header__center-right .site-header__center-name {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__center .site-header__center-right .site-header__center-item i {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__center .site-header__center-nav ul li {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__center .site-header__center-nav ul li::after {
  background-color: #1f1c53;
}
[data-theme=dark] .site-header__bottom-cat {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom-cat i {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom-cat i.icon-menu:after {
  box-shadow: 15px 0 40px -5px rgba(0, 0, 0, 0.85);
}
[data-theme=dark] .site-header__bottom-cat.active {
  background-color: #130e49;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul {
  background-color: #130e49;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul > li a {
  color: #fff;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul > li:hover > a {
  color: #c4f424;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul > li:hover > a i {
  color: #c4f424;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__content ul {
  background-color: #0f0b3b;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__content ul li:before {
  background-color: #c4f424;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__content ul li a {
  color: #fff;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__content ul li a.hover a {
  color: #c4f424;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__content ul li:hover a {
  color: #c4f424;
}
[data-theme=dark] .site-header__bottom-cat.active .megamenu__tabs ul .item__list__button {
  color: #fff;
}
[data-theme=dark] .site-header__bottom-cart {
  box-shadow: 0 0 0 4px #070525, 0 0 0 5px #1f1c53, 0 0 0 8px #070525, 0 0 0 9px #1f1c53;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__cat-item {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 13px;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__cat-item a {
  color: #55247c;
  transition: 0.3s;
  opacity: 1;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__cat-item a:hover {
  opacity: 0.8;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__cat-item:nth-last-of-type(1) {
  margin-bottom: 0;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__product-term span {
  color: #E7E7E7;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__product-item {
  background-color: #201E44;
  position: relative;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__product-info-img small {
  color: #DDDDDD;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__product-title {
  color: #DDDDDD;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__all-product-header {
  background-color: #201E44;
}
[data-theme=dark] .site-header__bottom-search .ajax-search__all-product-header a {
  color: #E5E5E5;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search > i {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__cat-item {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__cat-item a {
  color: #a91a4e;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__close {
  color: #cd1e54;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__cat {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #18164d;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__product-price {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__product-price .item .price {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__product-price .item .unit {
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__all-product-header:before {
  border-bottom: 1px solid #18164d;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__all-product-header h2 {
  color: #c7c5ee;
  background-color: #0d0b32;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__journal-header:before {
  border-bottom: 1px solid #18164d;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__journal-header span {
  background-color: #18164d;
  color: #c7c5ee;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search__journal-content .item {
  color: #cd1e54;
}
[data-theme=dark] .site-header__bottom .site-header__bottom-search .ajax-search {
  background-color: #0d0b32;
}
[data-theme=dark] .site-header__bottom__theme-switch::after {
  background-image: url("../img/sw-dark.svg");
}
[data-theme=dark] .site-header__bottom__theme-switch > span {
  color: #9795bc;
}
[data-theme=dark] .site-header__bottom__theme-switch:before {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
[data-theme=dark] .site-header__bottom__theme-switch > div:nth-child(2):before {
  background-color: #2196f3;
}
[data-theme=dark] .site-header__bottom__theme-switch > div:nth-child(2):after {
  background-color: #0e0c34;
}
[data-theme=dark] .site-header__bottom__theme-switch > svg {
  fill: rgba(199, 197, 238, 0.5);
}
[data-theme=dark] .site-header__bottom__theme-switch > svg.active {
  text-shadow: 0 0 #c7c5ee;
  fill: rgb(199, 197, 238);
}
[data-theme=dark] .site-header__bottom .site-header__bottom-cart--empty {
  box-shadow: 0 0 0 4px #070525, 0 0 0 5px #1f1c53, 0 0 0 8px #070525, 0 0 0 9px #1f1c53;
}
[data-theme=dark] .panel-wrapper .site-header {
  background-color: transparent;
}

@media (max-width: 992px) {
  [data-theme=dark] .site-header:before {
    right: 0;
    left: 0;
    background-image: linear-gradient(to right, #070525 0%, #070525 10%, #6a4fa0 25%, #16a2bd 35%, #89c736 50%, #fcc43f 65%, #d02054 70%, #070525 90%, #070525 100%);
  }
}
/* ════════════════════════════════════════════════════════
   HEADER REDESIGN — New Desktop Styles (sh-* components)
   ════════════════════════════════════════════════════════ */
/* Hide old desktop elements replaced by new design */
.site-header-wrapper {
  /* Glass effect on entire header wrapper */
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
}
.site-header-wrapper .site-header__center .site-header__center-right,
.site-header-wrapper .site-header__center .site-header__center-nav,
.site-header-wrapper .site-header__bottom__theme-switch:not(.sh-top__theme),
.site-header-wrapper .site-header__bottom-cart,
.site-header-wrapper .site-header__bottom-search,
.site-header-wrapper .site-header__bottom-logo,
.site-header-wrapper .site-header__bottom-cat:not(.sh-nav__cat) {
  display: none !important;
}

/* ─── ROW 1: Top Bar ────────────────────────────────── */
.site-header__top {
  background: #f5f4fa;
  border-bottom: 1px solid rgba(15, 11, 72, 0.09);
  /* Product links — RIGHT in RTL (first in DOM) */
  /* Contact + Theme — LEFT in RTL (last in DOM) */
}
.site-header__top .sh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}
.site-header__top .sh-top__links {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.site-header__top .sh-top__links li + li {
  border-right: 1px solid rgba(15, 11, 72, 0.09);
  padding-right: 14px;
  margin-right: 14px;
}
.site-header__top .sh-top__links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.site-header__top .sh-top__links a:hover {
  color: #0f0b48;
}
.site-header__top .sh-top__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
}
.site-header__top .sh-top__ico svg {
  width: 10px;
  height: 10px;
}
.site-header__top .sh-top__ico--gpt {
  background: #10a37f;
  color: #fff;
}
.site-header__top .sh-top__ico--cod {
  background: #c0392b;
  color: #fff;
}
.site-header__top .sh-top__ico--mj {
  background: #0d0d0d;
  color: #fff;
}
.site-header__top .sh-top__ico--ps {
  background: #003791;
  color: #fff;
}
.site-header__top .sh-top__ico--tg {
  background: #0088cc;
  color: #fff;
}
.site-header__top .sh-top__ico--gift {
  background: #e74c3c;
  color: #fff;
}
.site-header__top .sh-top__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.site-header__top .sh-top__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  height: 28px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.7);
  text-decoration: none;
  background: rgba(15, 11, 72, 0.06);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header__top .sh-top__contact svg {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.25s;
}
.site-header__top .sh-top__contact:hover {
  background: rgba(15, 11, 72, 0.12);
  color: #0f0b48;
}
.site-header__top .sh-top__contact:hover svg {
  opacity: 1;
}
.site-header__top .sh-top__theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(15, 11, 72, 0.18);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.site-header__top .sh-top__theme > div, .site-header__top .sh-top__theme > span {
  display: none;
}
.site-header__top .sh-top__theme::after, .site-header__top .sh-top__theme::before {
  display: none !important;
  content: none !important;
}
.site-header__top .sh-top__theme .sh-top__sun-icon,
.site-header__top .sh-top__theme .sh-top__moon-icon {
  position: static;
  transform: none;
  fill: none;
  pointer-events: none;
}
.site-header__top .sh-top__theme .sh-top__sun-icon {
  display: block;
  color: #0f0b48;
}
.site-header__top .sh-top__theme .sh-top__moon-icon {
  display: none;
  color: #0f0b48;
}
.site-header__top .sh-top__theme:hover {
  background: rgba(15, 11, 72, 0.07);
}

/* ─── ROW 2: Secondary Nav ───────────────────────────── */
.site-header__subnav {
  background: #fff;
  border-bottom: 1px solid rgba(15, 11, 72, 0.09);
  /* Auth links — RIGHT */
  /* Nav links */
}
.site-header__subnav .sh-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.site-header__subnav .sh-subnav__auth {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.site-header__subnav .sh-subnav__auth-link {
  font-size: 12px;
  font-weight: 600;
  color: #0f0b48;
  text-decoration: none;
  padding: 0 10px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  transition: background 0.2s;
}
.site-header__subnav .sh-subnav__auth-link:hover {
  background: rgba(15, 11, 72, 0.07);
}
.site-header__subnav .sh-subnav__auth-sep {
  width: 1px;
  height: 14px;
  background: rgba(15, 11, 72, 0.09);
}
.site-header__subnav .sh-subnav__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-header__subnav .sh-subnav__list li {
  position: relative;
}
.site-header__subnav .sh-subnav__list li::after {
  content: "•";
  color: rgba(15, 11, 72, 0.2);
  font-size: 8px;
  margin: 0 10px;
}
.site-header__subnav .sh-subnav__list li:last-child::after {
  display: none;
}
.site-header__subnav .sh-subnav__list a {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.site-header__subnav .sh-subnav__list a:hover {
  color: #0f0b48;
}

/* ─── ROW 2: Nav | Auth ────────────────────────────── */
.site-header__center {
  background: #fff;
  border-bottom: 1px solid rgba(15, 11, 72, 0.05);
}
.site-header__center > .container {
  padding-top: 0;
  padding-bottom: 0;
}
.site-header__center .sh-center {
  display: flex;
  align-items: center;
  height: 54px;
  gap: 12px;
}

/* Nav links — RIGHT (first in DOM, RTL start) */
.sh-center__nav {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
  flex: 1;
}
.sh-center__nav li {
  display: flex;
  align-items: center;
}
.sh-center__nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f0b48;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.sh-center__nav a svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: opacity 0.2s;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.sh-center__nav a:hover {
  background: rgba(91, 82, 240, 0.06);
  color: #5b52f0;
}
.sh-center__nav a:hover svg {
  opacity: 0.7;
}

/* Auth — vertically centered */
.sh-center > .sh-auth {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Logo — hidden for now */
.sh-center__logo {
  display: none;
}

/* ─── ROW 3: Smart Search Row ────────────────────────── */
.site-header__search {
  background: #f8f7fc;
  border-bottom: 1px solid rgba(15, 11, 72, 0.09);
}
.site-header__search > .container {
  padding-top: 0;
  padding-bottom: 0;
}

.sh-search-row {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 16px;
  /* Mega menu button in search row — same height as search bar */
}
.sh-search-row > .sh-nav__cat {
  height: 48px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Mega menu dropdown positions below the search row */
}
.sh-search-row > .sh-nav__cat .sh-nav__cat-btn {
  height: 48px;
  border-radius: 14px;
  padding: 0 22px;
  font-size: 13px;
}
.sh-search-row > .sh-nav__cat .sh-nav__megamenu {
  top: calc(100% + 12px);
}

/* Smart tags */
.sh-stags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sh-stags__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(15, 11, 72, 0.38);
  white-space: nowrap;
}
.sh-stags__list {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.sh-stag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid rgba(15, 11, 72, 0.13);
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #0f0b48;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(15, 11, 72, 0.04);
}
.sh-stag__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
}
.sh-stag__ico--gpt {
  background: rgba(16, 163, 127, 0.12);
  color: #10a37f;
}
.sh-stag__ico--ps {
  background: rgba(0, 55, 145, 0.12);
  color: #003791;
}
.sh-stag__ico--ff {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}
.sh-stag__ico--gift {
  background: rgba(231, 76, 60, 0.12);
  color: #e74c3c;
}
.sh-stag__ico--mj {
  background: rgba(13, 13, 13, 0.08);
  color: #333;
}
.sh-stag:hover {
  background: #0f0b48;
  border-color: #0f0b48;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 11, 72, 0.22);
}
.sh-stag:hover .sh-stag__ico {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* ── Smart Search (pill-in-pill) ─────────────────────── */
.sh-search {
  flex: 1;
  max-width: 820px;
  margin: 0;
  position: relative;
  /* inside search-row overrides */
  /* 🔍 Lens icon — RIGHT side in RTL (first child) */
  /* Input — fills the middle */
  /* 🔍 Lens hides when typing */
  /* ⚡ Advanced icon — LEFT side in RTL (last child) */
  /* Hide old elements */
  /* Smart Dropdown */
}
.sh-search-row .sh-search {
  max-width: none;
}
.sh-search__bar {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid rgba(15, 11, 72, 0.09);
  border-radius: 14px;
  background: #f8f7fc;
  padding: 0 6px;
  gap: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.sh-search__bar:focus-within {
  border-color: rgba(91, 82, 240, 0.4);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.08);
  background: #fff;
}
.sh-search__lens {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: rgba(15, 11, 72, 0.3);
  pointer-events: none;
  transition: all 0.25s ease;
}
.sh-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 10px;
  height: 100%;
  font-size: 13.5px;
  color: #0f0b48;
  outline: none;
  min-width: 0;
}
.sh-search input::placeholder {
  color: rgba(15, 11, 72, 0.28);
}
.sh-search__bar:focus-within .sh-search__lens {
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
  transition: all 0.25s ease;
}
.sh-search__adv {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(91, 82, 240, 0.05);
  border: none;
  color: #5b52f0;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.5;
}
.sh-search__adv:hover {
  background: rgba(91, 82, 240, 0.1);
  opacity: 1;
}
.sh-search__icon, .sh-search__submit {
  display: none;
}
.sh-search__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.09);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15, 11, 72, 0.12);
  overflow: hidden;
  z-index: 500;
  display: none;
  animation: sh-drop-in 0.18s ease;
}
.sh-search__panel.is-open {
  display: block;
}
.sh-search__recents {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.09);
}
.sh-search__group-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.32);
  letter-spacing: 0.05em;
  margin-bottom: 9px;
}
.sh-search__results {
  padding: 6px 10px;
}
.sh-search__panel-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(15, 11, 72, 0.09);
}
.sh-search__see-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b52f0;
  text-decoration: none;
}
.sh-search__see-all:hover {
  color: #0f0b48;
}
.sh-search__count {
  font-size: 11px;
  color: rgba(15, 11, 72, 0.38);
  font-weight: 400;
}

@keyframes sh-adv-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 250% 50%;
  }
}
@keyframes sh-drop-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Popular tags section inside dropdown */
.sh-search__popular {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.09);
}

/* Chips */
.sh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid rgba(15, 11, 72, 0.13);
  border-radius: 20px;
  background: rgba(15, 11, 72, 0.04);
  font-size: 12px;
  font-weight: 600;
  color: #0f0b48;
  cursor: pointer;
  transition: all 0.18s;
}
.sh-chip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sh-chip__ico--gpt {
  background: rgba(16, 163, 127, 0.12);
  color: #10a37f;
}
.sh-chip__ico--ps {
  background: rgba(0, 55, 145, 0.12);
  color: #003791;
}
.sh-chip:hover {
  background: rgba(91, 82, 240, 0.1);
  border-color: rgba(91, 82, 240, 0.4);
  color: #5b52f0;
}

/* Result Items */
.sh-result {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.15s;
}
.sh-result:hover {
  background: rgba(15, 11, 72, 0.04);
}
.sh-result__link {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.sh-result__img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
}
.sh-result__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sh-result__body {
  flex: 1;
  min-width: 0;
}
.sh-result__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.sh-result__meta img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.sh-result__meta small {
  font-size: 10px;
  color: #5b52f0;
  font-weight: 700;
}
.sh-result__title {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f0b48;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-result__title span {
  font-weight: inherit;
}
.sh-result__tag {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.sh-result__tag img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.sh-result__tag span {
  font-size: 11px;
  color: rgba(15, 11, 72, 0.45);
  font-weight: 600;
}

/* ── Auth ────────────────────────────────────────────── */
.sh-auth {
  flex-shrink: 0;
}
.sh-auth--user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sh-auth__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0f0b48 0%, #5b52f0 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.sh-auth__btn svg, .sh-auth__btn i {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sh-auth__btn:hover {
  color: #fff;
  box-shadow: 0 4px 18px rgba(91, 82, 240, 0.35);
  transform: translateY(-1px);
}
.sh-auth__btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(91, 82, 240, 0.2);
}

/* Panel (logged-in) */
.sh-panel {
  position: relative;
  /* Header: avatar + name + email (horizontal compact) */
  /* Wallet row */
  /* Quick stats row */
  /* Menu items */
  /* Logout */
}
.sh-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(15, 11, 72, 0.09);
  border-radius: 14px;
  padding: 0 16px 0 10px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: #0f0b48;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.sh-panel__btn:hover {
  border-color: #5b52f0;
  background: rgba(91, 82, 240, 0.04);
}
.sh-panel__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f0b48, #5b52f0);
  color: #fff;
  flex-shrink: 0;
}
.sh-panel__avatar svg {
  width: 16px;
  height: 16px;
}
.sh-panel__avatar--lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 8px 20px -6px rgba(91, 82, 240, 0.4);
}
.sh-panel__avatar-initial {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.sh-panel__avatar--lg .sh-panel__avatar-initial {
  font-size: 22px;
}
.sh-panel__btn-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}
.sh-panel__btn-hello {
  font-size: 12px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.6);
}
.sh-panel__btn-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
}
.sh-panel__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #e02040;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
}
.sh-panel__arrow {
  font-size: 9px !important;
  opacity: 0.5;
  transition: transform 0.2s;
}
.sh-panel__btn[aria-expanded=true] .sh-panel__arrow {
  transform: rotate(180deg);
}
.sh-panel__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 250px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(15, 11, 72, 0.12);
  overflow: hidden;
  display: none;
  z-index: 500;
  animation: sh-drop-in 0.2s ease;
}
.sh-panel__dropdown.is-open {
  display: block;
}
.sh-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(15, 11, 72, 0.07);
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.05), rgba(91, 82, 240, 0));
}
.sh-panel__header-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}
.sh-panel__name {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  line-height: 1.2;
}
.sh-panel__email {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  direction: ltr;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-panel__avatar--lg {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px -5px rgba(91, 82, 240, 0.4) !important;
  flex-shrink: 0;
}
.sh-panel__avatar--lg .sh-panel__avatar-initial {
  font-size: 14px;
}
.sh-panel__wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin: 8px 10px;
  background: linear-gradient(135deg, rgba(0, 179, 137, 0.08), rgba(0, 179, 137, 0.02));
  border-radius: 10px;
  border: 1px solid rgba(0, 179, 137, 0.18);
}
.sh-panel__wallet-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.2;
}
.sh-panel__wallet-label {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.sh-panel__wallet-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
  white-space: nowrap;
  line-height: 1.3;
}
.sh-panel__wallet-amount em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.sh-panel__wallet-charge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #00b389, #00d4a0);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(0, 179, 137, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.sh-panel__wallet-charge:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 14px -5px rgba(0, 179, 137, 0.6);
}
.sh-panel__wallet-charge svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}
.sh-panel__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 10px 6px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.07);
}
.sh-panel__quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 8px;
  background: rgba(15, 11, 72, 0.035);
  color: #0f0b48;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sh-panel__quick-item:hover {
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
}
.sh-panel__quick-item:hover svg {
  color: #5b52f0;
}
.sh-panel__quick-item svg {
  color: rgba(15, 11, 72, 0.55);
  transition: color 0.2s;
  width: 14px;
  height: 14px;
}
.sh-panel__quick-item span {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.65);
  line-height: 1.2;
}
.sh-panel__quick-item span strong {
  font-size: 11px;
  font-weight: 900;
  color: #0f0b48;
}
.sh-panel__menu {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.07);
}
.sh-panel__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0f0b48;
  text-decoration: none;
  border-radius: 7px;
  transition: background 0.15s;
  line-height: 1.3;
}
.sh-panel__menu a:hover {
  background: rgba(15, 11, 72, 0.05);
}
.sh-panel__menu a i {
  font-size: 13px;
  opacity: 0.45;
  width: 16px;
  text-align: center;
}
.sh-panel__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #e02040;
  text-decoration: none;
  transition: background 0.15s;
  line-height: 1.3;
}
.sh-panel__logout:hover {
  background: rgba(224, 32, 64, 0.05);
}
.sh-panel__logout i {
  font-size: 13px;
  width: 16px;
  text-align: center;
}

/* Auth (logged-in) responsive */
@media (max-width: 1100px) {
  .sh-panel__btn-text {
    display: none;
  }
  .sh-panel__btn {
    padding: 0 10px;
    height: 40px;
    gap: 6px;
  }
}
@media (max-width: 768px) {
  .sh-auth--user {
    gap: 6px;
  }
  .sh-auth__btn {
    padding: 0 14px;
    height: 36px;
    font-size: 12px;
    gap: 6px;
  }
  .sh-auth__btn svg {
    width: 14px;
    height: 14px;
  }
  .sh-panel__btn {
    height: 36px;
    padding: 0 8px;
    border-radius: 11px;
  }
  .sh-panel__avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .sh-panel__avatar-initial {
    font-size: 12px;
  }
  .sh-panel__badge {
    min-width: 14px;
    height: 14px;
    font-size: 8.5px;
    top: -4px;
    right: -4px;
    border-width: 1.5px;
  }
  .sh-panel__arrow {
    font-size: 8px !important;
  }
  /* Dropdown becomes a sheet anchored to header on mobile */
  .sh-panel__dropdown {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    margin-top: 6px;
  }
  .sh-panel__avatar--lg {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
  }
  .sh-panel__avatar--lg .sh-panel__avatar-initial {
    font-size: 13px;
  }
  .sh-panel__header {
    padding: 10px 12px;
    gap: 10px;
  }
  .sh-panel__name {
    font-size: 14px;
  }
  .sh-panel__email {
    font-size: 11px;
  }
  .sh-panel__wallet {
    padding: 8px 10px;
    margin: 8px 10px;
    gap: 6px;
  }
  .sh-panel__wallet-amount {
    font-size: 14px;
  }
  .sh-panel__wallet-charge {
    padding: 6px 10px;
    font-size: 12px;
  }
  .sh-panel__quick {
    padding: 0 10px 8px;
    gap: 4px;
  }
  .sh-panel__quick-item {
    padding: 6px 4px;
  }
  .sh-panel__quick-item span {
    font-size: 11px;
  }
  .sh-panel__quick-item span strong {
    font-size: 13px;
  }
  .sh-panel__quick-item svg {
    width: 14px;
    height: 14px;
  }
  .sh-panel__menu {
    padding: 4px 6px;
  }
  .sh-panel__menu a {
    padding: 8px 10px;
    font-size: 13px;
    gap: 8px;
  }
  .sh-panel__menu a i {
    font-size: 14px;
    width: 16px;
  }
  .sh-panel__logout {
    padding: 9px 14px;
    font-size: 13px;
    gap: 8px;
  }
  .sh-panel__logout i {
    font-size: 14px;
    width: 16px;
  }
}
@media (max-width: 480px) {
  .sh-auth__btn {
    padding: 0 10px;
    font-size: 12.5px;
  }
  .sh-panel__btn {
    padding: 0 6px;
  }
}
/* Mobile header profile panel — overrides .sh-panel__btn for the
   compact 38×38 white square inside the mobile header. */
.mh__panel {
  position: relative;
}
.mh__panel .sh-panel__btn.mh__action {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  gap: 0;
  flex-shrink: 0;
}
.mh__panel .sh-panel__btn.mh__action .sh-panel__avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.mh__panel .sh-panel__btn.mh__action .sh-panel__avatar-initial {
  font-size: 12px;
}
.mh__panel .sh-panel__btn.mh__action .sh-panel__badge {
  min-width: 14px;
  height: 14px;
  font-size: 8.5px;
  top: -4px;
  right: -4px;
  border-width: 1.5px;
}

/* Lifted dropdown (teleported to <body> by JS so it escapes
   parent stacking contexts like swiper/banner sections). */
.sh-panel__dropdown--lifted {
  position: fixed !important;
  top: 64px;
  left: 12px;
  right: 12px;
  bottom: auto;
  width: auto !important;
  max-width: none !important;
  margin: 0;
  z-index: 99999;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 11, 72, 0.25);
  overflow: hidden;
}

/* ─── ROW 4: Bottom Nav ──────────────────────────────── */
.site-header__bottom {
  background: transparent;
  border: none;
  overflow: visible;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header__bottom .container {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
.site-header__bottom .sh-nav {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 10px;
  padding: 4px 0;
  overflow: visible;
}
.site-header__bottom.is-pinned {
  box-shadow: 0 6px 24px -8px rgba(15, 11, 72, 0.12);
  border-bottom: 1px solid rgba(15, 11, 72, 0.06);
}

.sh-cats-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 6px 24px -8px rgba(15, 11, 72, 0.12);
  border-bottom: 1px solid rgba(15, 11, 72, 0.06);
  animation: sh-cats-stuck-in 0.22s ease;
}
.sh-cats-stuck > .container {
  padding-left: 16px;
  padding-right: 16px;
}

@keyframes sh-cats-stuck-in {
  from {
    transform: translateY(-8px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
[data-theme=dark] .sh-cats-stuck {
  background: rgba(14, 12, 30, 0.9);
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[id^=cat-] {
  scroll-margin-top: 80px;
}

html {
  scroll-behavior: smooth;
}

[data-theme=dark] .site-header__bottom {
  background: rgba(14, 12, 30, 0.9);
}
[data-theme=dark] .site-header__bottom.is-pinned {
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.sh-nav {
  /* Hide button in Row 4, only show mega menu dropdown */
}
.sh-nav__cat--hidden > .sh-nav__cat-btn {
  display: none;
}
.sh-nav__cat {
  position: relative;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.sh-nav__cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 11, 72, 0.04);
  color: #0f0b48;
  border: 1.5px solid rgba(15, 11, 72, 0.12);
  border-radius: 14px;
  padding: 0 20px;
  height: 48px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.sh-nav__cat-btn i {
  font-size: 13px;
  opacity: 0.5;
}
.sh-nav__cat-btn:hover {
  background: rgba(91, 82, 240, 0.06);
  border-color: rgba(91, 82, 240, 0.25);
  color: #5b52f0;
}
.sh-nav__cat-btn:hover i {
  opacity: 0.8;
}
.sh-nav__cat-arrow {
  font-size: 8px !important;
  opacity: 0.65;
  transition: transform 0.2s;
}
.sh-nav__cat:hover .sh-nav__cat-arrow {
  transform: rotate(180deg);
}

/* ── Category Pills row (with prev/next arrows) ──── */
.sh-cats-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.sh-cats-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #fff;
  border: 1.5px solid rgba(15, 11, 72, 0.1);
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(15, 11, 72, 0.15);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.sh-cats-nav:hover {
  background: linear-gradient(135deg, #0f0b48, #5b52f0);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(91, 82, 240, 0.5);
}
.sh-cats-nav:active {
  transform: translateY(0);
}
.sh-cats-nav.is-disabled, .sh-cats-nav[disabled] {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

[data-theme=dark] .sh-cats-nav {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .sh-cats-nav:hover {
  background: linear-gradient(135deg, #0f0b48, #5b52f0);
  color: #fff;
}

.sh-cats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: 6px 4px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sh-cats::-webkit-scrollbar {
  display: none;
}

.sh-cat {
  --c-color: #0f0b48;
  --c-rgb: 15, 11, 72;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 16px;
  height: 40px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(15, 11, 72, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: #0f0b48;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px -2px rgba(15, 11, 72, 0.06);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.sh-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 40%);
  pointer-events: none;
  opacity: 0.7;
}
.sh-cat:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--c-rgb), 0.3);
  color: var(--c-color);
  box-shadow: 0 8px 18px -6px rgba(var(--c-rgb), 0.25);
}
.sh-cat:hover .sh-cat__ico {
  transform: scale(1.08);
  background: linear-gradient(135deg, var(--c-color), color-mix(in oklab, var(--c-color), #fff 18%));
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(var(--c-rgb), 0.45);
}
.sh-cat.is-active {
  background: linear-gradient(135deg, color-mix(in oklab, var(--c-color), #fff 92%), color-mix(in oklab, var(--c-color), #fff 96%));
  border-color: var(--c-color);
  color: var(--c-color);
  box-shadow: 0 8px 22px -6px rgba(var(--c-rgb), 0.35), inset 0 0 0 1px rgba(var(--c-rgb), 0.1);
}
.sh-cat.is-active .sh-cat__ico {
  background: linear-gradient(135deg, var(--c-color), color-mix(in oklab, var(--c-color), #000 12%));
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(var(--c-rgb), 0.55);
  transform: scale(1.05);
}
.sh-cat__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  background: rgba(var(--c-rgb), 0.1);
  color: var(--c-color);
  transition: all 0.22s ease;
  position: relative;
  z-index: 1;
}
.sh-cat__ico--ai { /* purple */ }
.sh-cat__ico--gift { /* red    */ }
.sh-cat__ico--mobile { /* blue   */ }
.sh-cat__ico--pc { /* indigo */ }
.sh-cat__ico--xbox { /* green  */ }
.sh-cat__ico--ps { /* navy   */ }
.sh-cat__ico--adobe { /* rose   */ }
.sh-cat__ico--foryou { /* pink   */ }
.sh-cat:has(.sh-cat__ico--ai) {
  --c-color: #8E2DE2;
  --c-rgb: 142, 45, 226;
}
.sh-cat:has(.sh-cat__ico--gift) {
  --c-color: #dc2626;
  --c-rgb: 220, 38, 38;
}
.sh-cat:has(.sh-cat__ico--mobile) {
  --c-color: #2563eb;
  --c-rgb: 37, 99, 235;
}
.sh-cat:has(.sh-cat__ico--pc) {
  --c-color: #4f46e5;
  --c-rgb: 79, 70, 229;
}
.sh-cat:has(.sh-cat__ico--xbox) {
  --c-color: #16a34a;
  --c-rgb: 22, 163, 74;
}
.sh-cat:has(.sh-cat__ico--ps) {
  --c-color: #1e40af;
  --c-rgb: 30, 64, 175;
}
.sh-cat:has(.sh-cat__ico--adobe) {
  --c-color: #E0224F;
  --c-rgb: 224, 34, 79;
}
.sh-cat:has(.sh-cat__ico--foryou) {
  --c-color: #db2777;
  --c-rgb: 219, 39, 119;
}
.sh-cat--ai {
  --c-color: #8E2DE2;
  --c-rgb: 142, 45, 226;
}
.sh-cat--gift {
  --c-color: #dc2626;
  --c-rgb: 220, 38, 38;
}
.sh-cat--mobile {
  --c-color: #2563eb;
  --c-rgb: 37, 99, 235;
}
.sh-cat--pc {
  --c-color: #4f46e5;
  --c-rgb: 79, 70, 229;
}
.sh-cat--xbox {
  --c-color: #16a34a;
  --c-rgb: 22, 163, 74;
}
.sh-cat--ps {
  --c-color: #1e40af;
  --c-rgb: 30, 64, 175;
}
.sh-cat--adobe {
  --c-color: #E0224F;
  --c-rgb: 224, 34, 79;
}
.sh-cat--foryou {
  --c-color: #db2777;
  --c-rgb: 219, 39, 119;
}

[data-theme=dark] .sh-cat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f0ecff;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .sh-cat::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
}
[data-theme=dark] .sh-cat__ico {
  background: rgba(var(--c-rgb), 0.18);
  color: color-mix(in oklab, var(--c-color), #fff 32%);
}
[data-theme=dark] .sh-cat:hover {
  border-color: rgba(var(--c-rgb), 0.5);
  color: color-mix(in oklab, var(--c-color), #fff 28%);
}
[data-theme=dark] .sh-cat.is-active {
  background: linear-gradient(135deg, rgba(var(--c-rgb), 0.22), rgba(var(--c-rgb), 0.08));
  color: color-mix(in oklab, var(--c-color), #fff 40%);
  border-color: var(--c-color);
}

@media (max-width: 991px) {
  .sh-cats {
    gap: 6px;
    padding: 5px 4px;
  }
  .sh-cat {
    height: 36px;
    padding: 0 12px 0 14px;
    font-size: 12px;
    gap: 6px;
    border-radius: 12px;
  }
  .sh-cat__ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .sh-cat__ico svg {
    width: 12px !important;
    height: 12px !important;
  }
}
/* ══════════════════════════════════════════════════════
   Modern Mega Menu — Sidebar Icons + Accordion
══════════════════════════════════════════════════════ */
.sh-nav__megamenu {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  width: 940px;
  background: transparent;
  border-radius: 22px;
  z-index: 400;
  display: none;
  overflow: visible;
  animation: mm-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-nav__megamenu > .megamenu__inner {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(15, 11, 72, 0.06), 0 32px 80px rgba(15, 11, 72, 0.12);
  overflow: hidden;
}
.sh-nav__cat.is-open .sh-nav__megamenu {
  display: block;
}

.sh-nav__cat.is-open .sh-nav__cat-arrow {
  transform: rotate(180deg);
}

@keyframes mm-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.megamenu__inner {
  display: flex;
  min-height: 380px;
  max-height: 540px;
}

/* ── RIGHT sidebar: icon grid ──────────────────────── */
.mm-sidebar {
  width: 120px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(15, 11, 72, 0.02) 0%, rgba(15, 11, 72, 0.04) 100%);
  border-left: 1px solid rgba(15, 11, 72, 0.06);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  /* Custom scrollbar */
}
.mm-sidebar::-webkit-scrollbar {
  width: 3px;
}
.mm-sidebar::-webkit-scrollbar-thumb {
  background: rgba(15, 11, 72, 0.12);
  border-radius: 4px;
}

.mm-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 6px 9px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
  position: relative;
}
.mm-cat::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #5b52f0;
  opacity: 0;
  transform: scaleY(0);
  transition: all 0.22s ease;
}
.mm-cat:hover {
  background: rgba(15, 11, 72, 0.05);
}
.mm-cat:hover .mm-cat__ico {
  transform: scale(1.06);
}
.mm-cat.active {
  background: rgba(91, 82, 240, 0.08);
}
.mm-cat.active::before {
  opacity: 1;
  transform: scaleY(1);
}
.mm-cat.active .mm-cat__ico {
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.18);
  transform: scale(1.06);
}
.mm-cat.active .mm-cat__label {
  color: #5b52f0;
  font-weight: 700;
}
.mm-cat__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.mm-cat__ico svg {
  width: 22px;
  height: 22px;
}
.mm-cat__ico--ai {
  background: rgba(142, 45, 226, 0.1);
  color: #8E2DE2;
}
.mm-cat__ico--premium {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.mm-cat__ico--mobile {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.mm-cat__ico--gift {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.mm-cat__ico--ps {
  background: rgba(0, 55, 145, 0.1);
  color: #003791;
}
.mm-cat__ico--adobe {
  background: rgba(224, 34, 79, 0.1);
  color: #E0224F;
}
.mm-cat__ico--ms {
  background: rgba(0, 120, 212, 0.1);
  color: #0078d4;
}
.mm-cat__ico--edu {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.mm-cat__ico--av {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.mm-cat__label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.7);
  line-height: 1.35;
  max-width: 95px;
  transition: color 0.2s;
}

/* ── LEFT content: accordion panels ────────────────── */
.mm-content {
  flex: 1;
  padding: 0;
  position: relative;
  overflow-y: auto;
}
.mm-content::-webkit-scrollbar {
  width: 4px;
}
.mm-content::-webkit-scrollbar-thumb {
  background: rgba(15, 11, 72, 0.1);
  border-radius: 4px;
}

.mm-panel {
  display: none;
}
.mm-panel.active {
  display: block;
  animation: mm-fade 0.2s ease;
}

@keyframes mm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* View all header */
.mm-panel__viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  font-size: 14.5px;
  font-weight: 700;
  color: #5b52f0;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(91, 82, 240, 0.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(15, 11, 72, 0.06);
  transition: background 0.2s;
}
.mm-panel__viewall:hover {
  background: rgba(91, 82, 240, 0.07);
}
.mm-panel__viewall i {
  font-size: 13px;
  transition: transform 0.2s;
}
.mm-panel__viewall:hover i {
  transform: translateX(-3px);
}

/* Accordion */
.mm-accordion {
  padding: 4px 0;
  /* Accordion body */
}
.mm-accordion__item {
  border-bottom: 1px solid rgba(15, 11, 72, 0.05);
}
.mm-accordion__item:last-child {
  border-bottom: none;
}
.mm-accordion__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f0b48;
  transition: all 0.18s ease;
  text-align: right;
}
.mm-accordion__head:hover {
  background: rgba(15, 11, 72, 0.025);
}
.is-open > .mm-accordion__head {
  background: linear-gradient(90deg, transparent 0%, rgba(91, 82, 240, 0.06) 100%);
  color: #5b52f0;
}
.mm-accordion__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.5);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.mm-accordion__ico svg {
  width: 17px;
  height: 17px;
}
.is-open .mm-accordion__ico {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
  box-shadow: 0 2px 8px rgba(91, 82, 240, 0.12);
}
.mm-accordion__arrow {
  margin-right: auto;
  font-size: 10px !important;
  color: rgba(15, 11, 72, 0.3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
}
.is-open .mm-accordion__arrow {
  color: #5b52f0;
  transform: rotate(180deg);
}
.mm-accordion__body {
  display: none;
  padding: 2px 24px 16px;
  padding-right: 72px;
}
.is-open > .mm-accordion__body {
  display: block;
  animation: mm-slide-down 0.2s ease;
}
.mm-accordion__body a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #44426a;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.18s ease;
  position: relative;
}
.mm-accordion__body a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5b52f0;
  flex-shrink: 0;
  opacity: 0.35;
  transition: all 0.18s ease;
}
.mm-accordion__body a:hover {
  background: rgba(91, 82, 240, 0.06);
  color: #5b52f0;
  padding-right: 18px;
}
.mm-accordion__body a:hover::before {
  opacity: 1;
  transform: scale(1.3);
}

@keyframes mm-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ══════════════════════════════════════════════════════
   Dark Mode
══════════════════════════════════════════════════════ */
[data-theme=dark] .site-header-wrapper {
  background: rgba(14, 12, 30, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
[data-theme=dark] .site-header__rgb-color::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 20%, rgba(91, 82, 240, 0.18) 50%, rgba(255, 255, 255, 0.04) 80%, transparent 100%);
}
[data-theme=dark] .site-header__rgb-color::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}
[data-theme=dark] .site-header__top {
  background: #0e0c1e;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__top .sh-top__links li + li {
  border-right-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .site-header__top .sh-top__links a {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .site-header__top .sh-top__links a:hover {
  color: #fff;
}
[data-theme=dark] .site-header__top .sh-top__contact {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .site-header__top .sh-top__contact:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}
[data-theme=dark] .site-header__top .sh-top__theme {
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme=dark] .site-header__top .sh-top__theme .sh-top__sun-icon {
  display: none;
}
[data-theme=dark] .site-header__top .sh-top__theme .sh-top__moon-icon {
  display: block;
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .site-header__top .sh-top__theme:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .site-header__subnav {
  background: #13112a;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__subnav .sh-subnav__auth-link {
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .site-header__subnav .sh-subnav__auth-link:hover {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .site-header__subnav .sh-subnav__auth-sep {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .site-header__subnav .sh-subnav__list li::after {
  color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .site-header__subnav .sh-subnav__list a {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .site-header__subnav .sh-subnav__list a:hover {
  color: #fff;
}
[data-theme=dark] .site-header__center {
  background: #13112a;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__center .sh-center__nav a {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .site-header__center .sh-center__nav a svg {
  opacity: 0.3;
}
[data-theme=dark] .site-header__center .sh-center__nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}
[data-theme=dark] .site-header__center .sh-center__nav a:hover svg {
  opacity: 0.7;
}
[data-theme=dark] .site-header__center .sh-auth__btn {
  background: linear-gradient(135deg, #7169f2 0%, #5b52f0 100%);
}
[data-theme=dark] .site-header__center .sh-auth__btn:hover {
  box-shadow: 0 4px 20px rgba(91, 82, 240, 0.45);
}
[data-theme=dark] .site-header__center .sh-panel__btn {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}
[data-theme=dark] .site-header__center .sh-panel__btn:hover {
  border-color: #5b52f0;
  background: rgba(91, 82, 240, 0.1);
}
[data-theme=dark] .site-header__center .sh-panel__badge {
  border-color: #13112a;
}
[data-theme=dark] .site-header__center .sh-panel__dropdown {
  background: #1a1736;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .site-header__center .sh-panel__header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .site-header__center .sh-panel__name {
  color: #e8e6ff;
}
[data-theme=dark] .site-header__center .sh-panel__wallet {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .site-header__center .sh-panel__wallet-amount {
  color: #e8e6ff;
}
[data-theme=dark] .site-header__center .sh-panel__menu {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .site-header__center .sh-panel__menu a {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .site-header__center .sh-panel__menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__center .sh-panel__logout {
  color: #ff5070;
}
[data-theme=dark] .site-header__center .sh-panel__logout:hover {
  background: rgba(255, 80, 112, 0.08);
}
[data-theme=dark] .site-header__search {
  background: #0e0c1e;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__search .sh-stags__label {
  color: rgba(255, 255, 255, 0.25);
}
[data-theme=dark] .site-header__search .sh-stag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .site-header__search .sh-stag:hover {
  background: #5b52f0;
  border-color: #5b52f0;
  color: #fff;
}
[data-theme=dark] .site-header__search .sh-search__bar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.09);
}
[data-theme=dark] .site-header__search .sh-search__bar:focus-within {
  border-color: rgba(91, 82, 240, 0.6);
  background: rgba(255, 255, 255, 0.09);
}
[data-theme=dark] .site-header__search .sh-search input {
  color: #e8e6ff;
}
[data-theme=dark] .site-header__search .sh-search input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
[data-theme=dark] .site-header__search .sh-search__lens {
  color: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .site-header__search .sh-search__adv {
  color: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .site-header__search .sh-search__adv:hover {
  background: rgba(91, 82, 240, 0.12);
  color: rgba(91, 82, 240, 0.8);
}
[data-theme=dark] .site-header__search .sh-search__popular {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__search .sh-search__panel {
  background: #1a1736;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .site-header__search .sh-search__recents,
[data-theme=dark] .site-header__search .sh-search__panel-footer {
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-header__search .sh-search__group-label {
  color: rgba(255, 255, 255, 0.25);
}
[data-theme=dark] .site-header__search .sh-chip {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .site-header__search .sh-chip:hover {
  color: #fff;
  background: rgba(91, 82, 240, 0.18);
  border-color: rgba(91, 82, 240, 0.5);
}
[data-theme=dark] .site-header__search .sh-result:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .site-header__search .sh-result__title {
  color: #e8e6ff;
}
[data-theme=dark] .site-header__search .sh-result__tag span {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .site-header__search .sh-search__see-all {
  color: rgba(91, 82, 240, 0.85);
}
[data-theme=dark] .site-header__bottom {
  background: transparent;
}
[data-theme=dark] .site-header__bottom .sh-nav__cat-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-theme=dark] .site-header__bottom .sh-nav__cat-btn:hover {
  background: rgba(91, 82, 240, 0.12);
  border-color: rgba(91, 82, 240, 0.3);
  color: #fff;
}
[data-theme=dark] .site-header__bottom .sh-nav__megamenu > .megamenu__inner {
  background: #1a1736;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .site-header__bottom .mm-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-left-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .site-header__bottom .mm-cat::before {
  background: rgba(91, 82, 240, 0.7);
}
[data-theme=dark] .site-header__bottom .mm-cat:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .site-header__bottom .mm-cat.active {
  background: rgba(91, 82, 240, 0.12);
}
[data-theme=dark] .site-header__bottom .mm-cat__label {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .site-header__bottom .mm-cat.active .mm-cat__label {
  color: rgba(91, 82, 240, 0.9);
}
[data-theme=dark] .site-header__bottom .mm-panel__viewall {
  color: rgba(91, 82, 240, 0.85);
  background: linear-gradient(180deg, rgba(91, 82, 240, 0.06) 0%, transparent 100%);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .site-header__bottom .mm-panel__viewall:hover {
  background: rgba(91, 82, 240, 0.1);
}
[data-theme=dark] .site-header__bottom .mm-accordion__item {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .site-header__bottom .mm-accordion__head {
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .site-header__bottom .mm-accordion__head:hover {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme=dark] .site-header__bottom .mm-accordion__ico {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .site-header__bottom .is-open > .mm-accordion__head {
  background: linear-gradient(90deg, transparent 0%, rgba(91, 82, 240, 0.1) 100%);
  color: rgba(91, 82, 240, 0.9);
}
[data-theme=dark] .site-header__bottom .is-open .mm-accordion__ico {
  background: rgba(91, 82, 240, 0.15);
  color: rgba(91, 82, 240, 0.9);
}
[data-theme=dark] .site-header__bottom .mm-accordion__body a {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .site-header__bottom .mm-accordion__body a::before {
  background: rgba(91, 82, 240, 0.6);
}
[data-theme=dark] .site-header__bottom .mm-accordion__body a:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #fff;
}
[data-theme=dark] .site-header__bottom .sh-cat {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .site-header__bottom .sh-cat:hover {
  background: rgba(91, 82, 240, 0.12);
  border-color: rgba(91, 82, 240, 0.3);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91, 82, 240, 0.15);
}

.megamenu__inner {
  flex-direction: column;
  min-height: 0;
  max-height: none;
}

.mm-body {
  display: flex;
  min-height: 380px;
  max-height: 540px;
  flex: 1 1 auto;
  min-height: 0;
}

.mm-smart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.05) 0%, rgba(219, 39, 119, 0.04) 100%);
  border-bottom: 1px solid rgba(124, 58, 237, 0.1);
  flex-wrap: wrap;
}

.mm-smart-top__tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f0b48;
  min-width: 0;
}
.mm-smart-top__tagline svg {
  flex-shrink: 0;
  color: #db2777;
  animation: sm-spin 8s linear infinite;
}

.mm-smart-top__tagline-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

@keyframes sm-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.mm-smart-top__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 320px;
  min-width: 200px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mm-smart-top__search:focus-within {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.mm-smart-top__search svg {
  color: #94a3b8;
  flex-shrink: 0;
}
.mm-smart-top__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
}
.mm-smart-top__search input::placeholder {
  color: #94a3b8;
}
.mm-smart-top__search kbd {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  line-height: 1.2;
}

.mm-cat {
  position: relative;
}

.mm-cat__live {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px 1px 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 999px;
  box-shadow: 0 4px 10px -3px rgba(220, 38, 38, 0.5);
  line-height: 1.2;
}

.mm-cat__live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  animation: sm-pulse 1.6s ease-in-out infinite;
}

@keyframes sm-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}
.mm-cat__hot {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.5));
  animation: sm-flame 1.2s ease-in-out infinite;
}

@keyframes sm-flame {
  0%, 100% {
    transform: scale(1) rotate(-3deg);
  }
  50% {
    transform: scale(1.15) rotate(3deg);
  }
}
.mm-cat__sale {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #059669);
  border-radius: 6px;
  box-shadow: 0 3px 8px -2px rgba(22, 163, 74, 0.5);
  line-height: 1.2;
}

.mm-smart-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 14px;
  background: linear-gradient(90deg, rgba(15, 11, 72, 0.04), rgba(124, 58, 237, 0.06));
  border-top: 1px solid rgba(124, 58, 237, 0.1);
  overflow: hidden;
}

.mm-smart-bar__pulse {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: sm-pulse-ring 1.8s ease-out infinite;
}

@keyframes sm-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(22, 163, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}
.mm-smart-bar__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 22px;
}

.mm-smart-bar__msg {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #475569;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-smart-bar__msg svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.mm-smart-bar__msg strong {
  color: #0f0b48;
  font-weight: 800;
  background: rgba(124, 58, 237, 0.1);
  padding: 1px 6px;
  border-radius: 5px;
}
.mm-smart-bar__msg.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mm-smart-bar__dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.mm-smart-bar__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}
.mm-smart-bar__dot:hover {
  background: rgba(124, 58, 237, 0.5);
}
.mm-smart-bar__dot.is-active {
  width: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #db2777);
}

.sh-cat--foryou {
  position: relative;
  cursor: pointer;
  color: #fff !important;
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #6366f1 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -10px rgba(168, 85, 247, 0.6);
  overflow: visible !important;
}
.sh-cat--foryou .sh-cat__ico,
.sh-cat--foryou .sh-cat__ico--foryou {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.sh-cat--foryou:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -8px rgba(168, 85, 247, 0.7);
}

.sh-cat__foryou-label {
  font-weight: 800;
  color: #fff;
}

.sh-cat__foryou-pulse {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: sm-pulse-ring 1.8s ease-out infinite;
}

.foryou {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 16px;
  box-shadow: 0 24px 56px -18px rgba(15, 11, 72, 0.25);
  padding: 14px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}

.sh-cat--foryou:hover .foryou,
.sh-cat--foryou:focus-within .foryou,
.sh-cat--foryou.is-open .foryou {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.foryou__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.foryou__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-radius: 999px;
}

.foryou__hint {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.foryou__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foryou__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.22s ease;
}
.foryou__card:hover {
  transform: translateX(-3px);
  background: #fff;
  border-color: rgba(124, 58, 237, 0.25);
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.3);
}

.foryou__card-tag {
  position: absolute;
  top: -7px;
  right: 10px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  border-radius: 5px;
  line-height: 1.3;
}

.foryou__card--last .foryou__card-tag {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.foryou__card--similar .foryou__card-tag {
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

.foryou__card--exclusive .foryou__card-tag {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.foryou__card-img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
}
.foryou__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.foryou__card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.foryou__card-body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foryou__card-body small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.foryou__card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
}
.foryou__card-price del {
  color: #94a3b8;
  font-weight: 600;
  font-size: 10.5px;
}
.foryou__card-price span {
  color: #16a34a;
  font-weight: 800;
}
.foryou__card-price span em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  margin-right: 2px;
}

.foryou__card-discount {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 8px;
  letter-spacing: -0.3px;
}

.foryou__card-new {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #059669);
  border-radius: 8px;
}

.foryou__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
}
.foryou__foot svg {
  color: #7c3aed;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .foryou {
    width: 320px;
  }
}
@media (max-width: 768px) {
  .mm-smart-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }
  .mm-smart-top__tagline {
    font-size: 11.5px;
  }
  .mm-smart-top__search {
    flex: 1 1 auto;
  }
  .mm-smart-bar {
    padding: 9px 12px;
    gap: 8px;
  }
  .mm-smart-bar__msg {
    font-size: 11.5px;
  }
  .mm-smart-bar__dots {
    display: none;
  }
  .foryou {
    position: fixed;
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
.mm-accordion__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 12px 14px !important;
  background: rgba(248, 250, 252, 0.4);
}
.mm-accordion__body > a:not(.mm-item) {
  grid-column: span 2;
}

.mm-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 12px;
  text-decoration: none;
  color: #0f0b48;
  transition: all 0.22s ease;
  overflow: hidden;
  min-width: 0;
}
.mm-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(124, 58, 237, 0.06));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.mm-item:hover {
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.35);
}
.mm-item:hover::before {
  opacity: 1;
}
.mm-item:hover .mm-item__arrow {
  transform: translateX(-3px);
  color: #7c3aed;
}
.mm-item:hover .mm-item__ico {
  transform: scale(1.06);
}

.mm-item__ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  display: grid;
  place-items: center;
  padding: 6px;
  transition: transform 0.22s ease;
  position: relative;
  z-index: 1;
}
.mm-item__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.mm-item__ico--svg {
  padding: 8px;
  color: #7c3aed;
}
.mm-item__ico--svg svg {
  width: 100%;
  height: 100%;
}

.mm-item[data-color=green] .mm-item__ico {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
}

.mm-item[data-color=blue] .mm-item__ico {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
}

.mm-item[data-color=cyan] .mm-item__ico {
  background: linear-gradient(135deg, #cffafe, #a5f3fc);
  color: #0e7490;
}

.mm-item[data-color=purple] .mm-item__ico {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}

.mm-item[data-color=pink] .mm-item__ico {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #be185d;
}

.mm-item[data-color=orange] .mm-item__ico {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #c2410c;
}

.mm-item[data-color=indigo] .mm-item__ico {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #4338ca;
}

.mm-item__body {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.mm-item__body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.mm-item__body small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-item__arrow {
  flex-shrink: 0;
  color: #cbd5e1;
  transition: all 0.22s ease;
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .mm-accordion__body {
    grid-template-columns: 1fr;
  }
}
[data-theme=dark] .mm-smart-top {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(219, 39, 119, 0.08));
  border-bottom-color: rgba(167, 139, 250, 0.15);
}
[data-theme=dark] .mm-smart-top__tagline {
  color: #e4e1ff;
}
[data-theme=dark] .mm-smart-top__search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(167, 139, 250, 0.2);
}
[data-theme=dark] .mm-smart-top__search input {
  color: #f1efff;
}
[data-theme=dark] .mm-smart-top__search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .mm-smart-top__search svg {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .mm-smart-top__search kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .mm-smart-top__search:focus-within {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}
[data-theme=dark] .mm-smart-bar {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(219, 39, 119, 0.08));
  border-top-color: rgba(167, 139, 250, 0.15);
}
[data-theme=dark] .mm-smart-bar__msg {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .mm-smart-bar__msg strong {
  color: #fff;
  background: rgba(167, 139, 250, 0.18);
}
[data-theme=dark] .mm-smart-bar__msg svg {
  color: #c4b5fd;
}
[data-theme=dark] .mm-smart-bar__dot {
  background: rgba(167, 139, 250, 0.3);
}
[data-theme=dark] .mm-smart-bar__dot:hover {
  background: rgba(167, 139, 250, 0.55);
}
[data-theme=dark] .mm-smart-bar__dot.is-active {
  background: linear-gradient(90deg, #a78bfa, #f472b6);
}
[data-theme=dark] .foryou {
  background: #1e1b4b;
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 24px 56px -18px rgba(0, 0, 0, 0.6);
}
[data-theme=dark] .foryou__head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .foryou__hint {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .foryou__card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .foryou__card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(167, 139, 250, 0.35);
}
[data-theme=dark] .foryou__card-body strong {
  color: #f1efff;
}
[data-theme=dark] .foryou__card-body small {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .foryou__card-price del {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .foryou__card-price span {
  color: #4ade80;
}
[data-theme=dark] .foryou__card-price span em {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .foryou__card-img {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .foryou__foot {
  color: rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .foryou__foot svg {
  color: #c4b5fd;
}
[data-theme=dark] .mm-accordion__body {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme=dark] .mm-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: #f1efff;
}
[data-theme=dark] .mm-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .mm-item::before {
  background: linear-gradient(135deg, transparent, rgba(167, 139, 250, 0.12));
}
[data-theme=dark] .mm-item__body strong {
  color: #f1efff;
}
[data-theme=dark] .mm-item__body small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .mm-item__arrow {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .mm-item[data-color=green] .mm-item__ico {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.1));
  color: #6ee7b7;
}
[data-theme=dark] .mm-item[data-color=blue] .mm-item__ico {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
  color: #93c5fd;
}
[data-theme=dark] .mm-item[data-color=cyan] .mm-item__ico {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(8, 145, 178, 0.1));
  color: #67e8f9;
}
[data-theme=dark] .mm-item[data-color=purple] .mm-item__ico {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(124, 58, 237, 0.1));
  color: #c4b5fd;
}
[data-theme=dark] .mm-item[data-color=pink] .mm-item__ico {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.1));
  color: #f9a8d4;
}
[data-theme=dark] .mm-item[data-color=orange] .mm-item__ico {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.1));
  color: #fdba74;
}
[data-theme=dark] .mm-item[data-color=indigo] .mm-item__ico {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(79, 70, 229, 0.1));
  color: #a5b4fc;
}

.ai-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0 24px;
  direction: rtl;
}

.ai-hero__ticker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #0f0b48 0%, #1e1b4b 60%, #4c1d95 100%);
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 14px 36px -18px rgba(76, 29, 149, 0.5);
}

.ai-hero__ticker-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.6);
}

.ai-hero__ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  animation: ac-pulse 1.6s ease-in-out infinite;
}

@keyframes ac-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
.ai-hero__ticker-track {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.ai-hero__ticker-track::before, .ai-hero__ticker-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.ai-hero__ticker-track::before {
  right: 0;
  background: linear-gradient(270deg, #0f0b48, transparent);
}
.ai-hero__ticker-track::after {
  left: 0;
  background: linear-gradient(90deg, #4c1d95, transparent);
}

.ai-hero__ticker-line {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  animation: ac-marquee 60s linear infinite;
  will-change: transform;
}
.ai-hero__ticker-line:hover {
  animation-play-state: paused;
}

@keyframes ac-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
.ai-hero__ticker-item {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.ai-hero__ticker-item strong {
  color: #fff;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 5px;
}

.ai-hero__ticker-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 800;
}

.ai-hero__banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  background: linear-gradient(135deg, #faf5ff 0%, #fce7f3 50%, #fef3c7 100%);
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}

.ai-hero__banner-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}
.ai-hero__banner-glow--a {
  top: -80px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.5), transparent 60%);
  animation: ac-glow 7s ease-in-out infinite;
}
.ai-hero__banner-glow--b {
  bottom: -90px;
  left: -70px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 60%);
  animation: ac-glow 9s ease-in-out infinite reverse;
}

@keyframes ac-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}
.ai-hero__banner-text {
  min-width: 0;
}

.ai-hero__banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-radius: 999px;
  margin-bottom: 12px;
}

.ai-hero__banner-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: #0f0b48;
  margin: 0 0 8px;
}
.ai-hero__banner-title strong {
  background: linear-gradient(120deg, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ai-hero__banner-sub {
  font-size: 13px;
  line-height: 1.85;
  color: #475569;
  margin: 0;
  max-width: 420px;
}

.ai-hero__banner-picks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-hero__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  text-decoration: none;
  color: #0f0b48;
  transition: all 0.22s ease;
}
.ai-hero__pick:hover {
  transform: translateX(-4px);
  background: #fff;
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 12px 28px -14px rgba(124, 58, 237, 0.4);
}

.ai-hero__pick-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  border-radius: 7px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}

.ai-hero__pick-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.ai-hero__pick-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-hero__pick-ico--svg {
  padding: 8px;
  color: #7c3aed;
}

.ai-hero__pick[data-color=green] .ai-hero__pick-ico--svg {
  color: #16a34a;
  background: #d1fae5;
}

.ai-hero__pick[data-color=purple] .ai-hero__pick-ico--svg {
  color: #7c3aed;
  background: #ede9fe;
}

.ai-hero__pick[data-color=pink] .ai-hero__pick-ico--svg {
  color: #db2777;
  background: #fce7f3;
}

.ai-hero__pick-body {
  flex: 1 1 auto;
  min-width: 0;
}
.ai-hero__pick-body strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  margin-bottom: 2px;
}
.ai-hero__pick-body small {
  display: block;
  font-size: 11px;
  color: #64748b;
}

.ai-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 6px 20px -12px rgba(15, 11, 72, 0.08);
}

.ai-filter__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.ai-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #0f0b48;
}
.ai-filter__label svg {
  color: #7c3aed;
}

.ai-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.ai-filter__chip:hover {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.3);
}
.ai-filter__chip--active {
  color: #fff !important;
  background: linear-gradient(90deg, #7c3aed, #db2777) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.5);
}
.ai-filter__chip--toggle {
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #b45309;
}
.ai-filter__chip--toggle svg {
  color: #f59e0b;
}
.ai-filter__chip--toggle:hover {
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-color: transparent;
}
.ai-filter__chip--toggle:hover svg {
  color: #fff;
}
.ai-filter__chip--toggle.is-on {
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -6px rgba(217, 119, 6, 0.6);
}
.ai-filter__chip--toggle.is-on svg {
  color: #fff;
}

.ai-filter__divider {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0 4px;
}

.ai-filter__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.06), rgba(219, 39, 119, 0.04));
  border-right: 3px solid #7c3aed;
  border-radius: 10px;
  font-size: 12.5px;
  color: #475569;
}
.ai-filter__tagline svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.ai-filter__tagline strong {
  color: #0f0b48;
  font-weight: 800;
}

.ai-filter__tagline-text {
  transition: opacity 0.25s ease;
}

.ai-cards {
  margin: 28px 0 24px;
  direction: rtl;
}

.ai-cards__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ai-cards__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0;
}
.ai-cards__title svg {
  color: #7c3aed;
}

.ai-cards__count {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 999px;
}

.ai-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  transition: all 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}
.ai-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(124, 58, 237, 0.08));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}
.ai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 18px 38px -16px rgba(124, 58, 237, 0.35);
}
.ai-card:hover::before {
  opacity: 1;
}
.ai-card:hover .ai-card__hover-desc {
  max-height: 80px;
  margin-top: 8px;
  opacity: 1;
}
.ai-card:hover .ai-card__desc {
  opacity: 0.5;
}
.ai-card.is-comparing {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

.ai-card__cat {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 8px;
  z-index: 2;
  cursor: help;
}

.ai-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  border-radius: 6px;
  z-index: 2;
  letter-spacing: 0.2px;
}
.ai-card__badge--bestseller {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
.ai-card__badge--new {
  background: linear-gradient(90deg, #7c3aed, #db2777);
}
.ai-card__badge--instant {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.ai-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ai-card__logo {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 4px auto 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.ai-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-card__logo--svg {
  padding: 14px;
  color: #7c3aed;
}
.ai-card__logo[data-bg=purple] {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}
.ai-card__logo[data-bg=pink] {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #be185d;
}
.ai-card__logo[data-bg=cyan] {
  background: linear-gradient(135deg, #cffafe, #a5f3fc);
  color: #0e7490;
}
.ai-card__logo[data-bg=orange] {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #c2410c;
}
.ai-card__logo[data-bg=indigo] {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #4338ca;
}

.ai-card__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  text-align: center;
}

.ai-card__name {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 6px;
}

.ai-card__desc {
  font-size: 11.5px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 10px;
  min-height: 38px;
  transition: opacity 0.25s ease;
}

.ai-card__hover-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.65;
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(219, 39, 119, 0.05));
  border-radius: 10px;
  padding: 0 10px;
  transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  text-align: right;
  font-weight: 600;
  margin-top: 0;
}
.ai-card:hover .ai-card__hover-desc {
  padding: 8px 10px;
}

.ai-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-card__price del {
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 600;
}
.ai-card__price strong {
  font-size: 14px;
  font-weight: 900;
  color: #16a34a;
}
.ai-card__price strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  margin-right: 2px;
}

.ai-card__actions {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ai-card__action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}
.ai-card__action:hover {
  transform: translateY(-1px);
}
.ai-card__action--compare:hover {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.06);
}
.ai-card__action--demo:hover {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}
.ai-card__action.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  border-color: transparent;
}

.ai-cards__empty {
  text-align: center;
  padding: 50px 20px;
  color: #94a3b8;
}
.ai-cards__empty svg {
  color: #cbd5e1;
  margin-bottom: 12px;
}
.ai-cards__empty h4 {
  font-size: 15px;
  color: #0f0b48;
  margin: 0 0 6px;
  font-weight: 800;
}
.ai-cards__empty p {
  font-size: 12.5px;
  margin: 0;
}

.ai-compare {
  position: fixed;
  bottom: 18px;
  right: 18px;
  left: 18px;
  z-index: 90;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  box-shadow: 0 24px 56px -18px rgba(15, 11, 72, 0.3);
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  direction: rtl;
}
.ai-compare[hidden] {
  display: none;
}
.ai-compare.is-visible {
  transform: translateY(0);
}

.ai-compare__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-compare__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
}
.ai-compare__title svg {
  color: #7c3aed;
}

.ai-compare__count {
  color: #7c3aed;
  font-weight: 900;
}

.ai-compare__clear {
  background: none;
  border: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  width: fit-content;
}
.ai-compare__clear:hover {
  color: #ef4444;
}

.ai-compare__items {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0;
}

.ai-compare__item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f0b48;
}

.ai-compare__item-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 2px;
  flex-shrink: 0;
}
.ai-compare__item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-compare__item-img svg {
  color: #7c3aed;
}

.ai-compare__item-x {
  background: none;
  border: 0;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: all 0.18s ease;
}
.ai-compare__item-x:hover {
  color: #fff;
  background: #ef4444;
}

.ai-compare__btn {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.5);
}
.ai-compare__btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(124, 58, 237, 0.6);
}
.ai-compare__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-demo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ai-demo[hidden] {
  display: none;
}
.ai-demo.is-visible {
  opacity: 1;
}

.ai-demo__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 72, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ai-demo__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
  direction: rtl;
  transform: scale(0.95);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-demo.is-visible .ai-demo__panel {
  transform: scale(1);
}

.ai-demo__close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #64748b;
  transition: all 0.18s ease;
}
.ai-demo__close:hover {
  background: #ef4444;
  color: #fff;
}

.ai-demo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-left: 40px;
}

.ai-demo__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-radius: 999px;
}

.ai-demo__title {
  font-size: 16px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
}

.ai-demo__placeholder {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 36px 16px;
  background: linear-gradient(135deg, #f5f3ff, #fdf2f8);
  border-radius: 14px;
  text-align: center;
  color: #7c3aed;
}
.ai-demo__placeholder svg {
  opacity: 0.7;
}
.ai-demo__placeholder p {
  font-size: 13px;
  color: #0f0b48;
  font-weight: 700;
  margin: 0;
  max-width: 320px;
  line-height: 1.7;
}
.ai-demo__placeholder small {
  color: #94a3b8;
  font-size: 11px;
}

@media (max-width: 900px) {
  .ai-hero__banner {
    grid-template-columns: 1fr;
  }
  .ai-hero__banner-title {
    font-size: 18px;
  }
  .ai-cards__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .ai-compare {
    bottom: 10px;
    right: 10px;
    left: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ai-compare__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ai-compare__btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .ai-hero__ticker {
    padding: 8px 10px;
    gap: 8px;
  }
  .ai-hero__ticker-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
  .ai-hero__ticker-item {
    font-size: 12px;
  }
  .ai-hero__banner {
    padding: 18px 16px;
  }
  .ai-filter {
    padding: 12px 14px;
  }
  .ai-filter__chip {
    font-size: 11px;
    padding: 5px 10px;
  }
  .ai-cards__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ai-card {
    padding: 12px 10px;
  }
  .ai-card__logo {
    width: 52px;
    height: 52px;
  }
  .ai-card__name {
    font-size: 13px;
  }
  .ai-card__desc, .ai-card__hover-desc {
    font-size: 11px;
  }
}
[data-theme=dark] .ai-hero__banner {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.3), rgba(190, 24, 93, 0.2));
  border-color: rgba(167, 139, 250, 0.25);
}
[data-theme=dark] .ai-hero__banner-title {
  color: #f1efff;
}
[data-theme=dark] .ai-hero__banner-sub {
  color: rgba(255, 255, 255, 0.72);
}
[data-theme=dark] .ai-hero__pick {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1efff;
}
[data-theme=dark] .ai-hero__pick:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(167, 139, 250, 0.4);
}
[data-theme=dark] .ai-hero__pick-body strong {
  color: #f1efff;
}
[data-theme=dark] .ai-hero__pick-body small {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .ai-hero__pick-ico {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .ai-filter {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ai-filter__label {
  color: #f1efff;
}
[data-theme=dark] .ai-filter__label svg {
  color: #c4b5fd;
}
[data-theme=dark] .ai-filter__chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .ai-filter__chip:hover {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.4);
}
[data-theme=dark] .ai-filter__divider {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .ai-filter__tagline {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.15), rgba(219, 39, 119, 0.08));
  color: rgba(255, 255, 255, 0.82);
  border-right-color: #a78bfa;
}
[data-theme=dark] .ai-filter__tagline strong {
  color: #f1efff;
}
[data-theme=dark] .ai-filter__tagline svg {
  color: #c4b5fd;
}
[data-theme=dark] .ai-cards__title {
  color: #f1efff;
}
[data-theme=dark] .ai-cards__title svg {
  color: #c4b5fd;
}
[data-theme=dark] .ai-cards__count {
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.15);
}
[data-theme=dark] .ai-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .ai-card:hover {
  border-color: rgba(167, 139, 250, 0.4);
}
[data-theme=dark] .ai-card__cat {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ai-card__name {
  color: #f1efff;
}
[data-theme=dark] .ai-card__desc {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .ai-card__hover-desc {
  color: #c4b5fd;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(244, 114, 182, 0.08));
}
[data-theme=dark] .ai-card__price del {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .ai-card__price strong {
  color: #4ade80;
}
[data-theme=dark] .ai-card__price strong em {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ai-card__action {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .ai-card__logo {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(244, 114, 182, 0.06));
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .ai-cards__empty {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ai-cards__empty h4 {
  color: #f1efff;
}
[data-theme=dark] .ai-cards__empty svg {
  color: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .ai-compare {
  background: #1e1b4b;
  border-color: rgba(167, 139, 250, 0.3);
}
[data-theme=dark] .ai-compare__title {
  color: #f1efff;
}
[data-theme=dark] .ai-compare__title svg {
  color: #c4b5fd;
}
[data-theme=dark] .ai-compare__count {
  color: #c4b5fd;
}
[data-theme=dark] .ai-compare__item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1efff;
}
[data-theme=dark] .ai-compare__item-img {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .ai-compare__clear {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ai-demo__panel {
  background: #1e1b4b;
}
[data-theme=dark] .ai-demo__title {
  color: #f1efff;
}
[data-theme=dark] .ai-demo__close {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .ai-demo__placeholder {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(244, 114, 182, 0.06));
  color: #c4b5fd;
}
[data-theme=dark] .ai-demo__placeholder p {
  color: #f1efff;
}
[data-theme=dark] .ai-demo__placeholder small {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .ai-hero {
    gap: 12px;
    margin: 10px 0 16px;
  }
  .ai-hero__ticker {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 11px;
  }
  .ai-hero__ticker-badge {
    font-size: 9.5px;
    padding: 3px 8px;
    gap: 4px;
    letter-spacing: 0.2px;
  }
  .ai-hero__ticker-dot {
    width: 5px;
    height: 5px;
  }
  .ai-hero__ticker-item {
    font-size: 11.5px;
  }
  .ai-hero__ticker-sep {
    font-size: 11px;
    opacity: 0.4;
  }
  .ai-hero__banner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 14px;
    border-radius: 14px;
  }
  .ai-hero__banner-glow--a {
    width: 160px;
    height: 160px;
    top: -60px;
    right: -40px;
  }
  .ai-hero__banner-glow--b {
    width: 180px;
    height: 180px;
    bottom: -70px;
    left: -50px;
  }
  .ai-hero__banner-eyebrow {
    font-size: 10px;
    padding: 4px 10px;
    margin-bottom: 9px;
  }
  .ai-hero__banner-title {
    font-size: 17px;
    margin-bottom: 6px;
    line-height: 1.45;
  }
  .ai-hero__banner-sub {
    font-size: 12px;
    line-height: 1.7;
  }
  .ai-hero__banner-picks {
    gap: 6px;
  }
  .ai-hero__pick {
    padding: 9px 11px;
    gap: 9px;
    border-radius: 11px;
  }
  .ai-hero__pick:hover {
    transform: none;
  }
  .ai-hero__pick-num {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .ai-hero__pick-ico {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .ai-hero__pick-ico svg {
    width: 16px !important;
    height: 16px !important;
  }
  .ai-hero__pick-body strong {
    font-size: 12px;
  }
  .ai-hero__pick-body small {
    font-size: 10.5px;
  }
  .ai-filter {
    padding: 12px;
    gap: 12px;
    border-radius: 13px;
  }
  .ai-filter__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ai-filter__label {
    font-size: 11.5px;
    font-weight: 800;
    gap: 5px;
  }
  .ai-filter__label svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
  }
  .ai-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .ai-filter__chips::-webkit-scrollbar {
    display: none;
  }
  .ai-filter__chip {
    font-size: 11.5px;
    padding: 6px 11px;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ai-filter__chip--toggle {
    padding: 6px 11px;
    align-self: flex-start;
  }
  .ai-filter__chip--toggle svg {
    width: 11px !important;
    height: 11px !important;
  }
  .ai-filter__divider {
    display: none;
  }
  .ai-filter__tagline {
    font-size: 11px;
    padding: 9px 12px;
    line-height: 1.7;
    gap: 6px;
    border-right-width: 2px;
    align-items: flex-start;
  }
  .ai-filter__tagline svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
    margin-top: 2px;
  }
}
@media (max-width: 575px) {
  .ai-cat-header {
    display: none;
  }
  .ai-hero {
    margin: 6px 0 12px;
    gap: 10px;
  }
  .ai-hero__ticker {
    padding: 7px 9px;
    gap: 6px;
  }
  .ai-hero__ticker-badge {
    font-size: 9px;
    padding: 3px 7px;
  }
  .ai-hero__ticker-item {
    font-size: 11px;
  }
  .ai-hero__banner {
    padding: 14px 12px;
  }
  .ai-hero__banner-title {
    font-size: 15.5px;
  }
  .ai-hero__banner-sub {
    font-size: 11.5px;
  }
  .ai-hero__pick {
    padding: 8px 10px;
    gap: 8px;
  }
  .ai-hero__pick-ico {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  .ai-hero__pick-ico svg {
    width: 14px !important;
    height: 14px !important;
  }
  .ai-hero__pick-body strong {
    font-size: 11.5px;
  }
  .ai-hero__pick-body small {
    font-size: 10px;
  }
  .ai-filter {
    padding: 10px;
    gap: 10px;
  }
  .ai-filter__chips {
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .ai-filter__chip {
    font-size: 10.5px;
    padding: 5px 9px;
  }
  .ai-compare {
    bottom: 8px;
    right: 8px;
    left: 8px;
    padding: 10px 11px;
    gap: 8px;
    border-radius: 13px;
  }
  .ai-compare__head {
    flex: 1;
    gap: 2px;
  }
  .ai-compare__title {
    font-size: 11.5px;
    gap: 5px;
  }
  .ai-compare__title svg {
    width: 12px !important;
    height: 12px !important;
  }
  .ai-compare__count {
    font-size: 12px;
  }
  .ai-compare__clear {
    font-size: 9.5px;
    padding: 3px 7px;
    gap: 3px;
  }
  .ai-compare__clear svg {
    width: 10px !important;
    height: 10px !important;
  }
  .ai-compare__items {
    gap: 4px;
    flex-wrap: wrap;
  }
  .ai-compare__item {
    font-size: 10.5px;
    padding: 3px 8px 3px 4px;
    gap: 5px;
    max-width: 120px;
  }
  .ai-compare__item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 78px;
  }
  .ai-compare__item-img {
    width: 18px;
    height: 18px;
  }
  .ai-compare__item-img img, .ai-compare__item-img svg {
    width: 12px !important;
    height: 12px !important;
  }
  .ai-compare__item-x {
    width: 16px;
    height: 16px;
  }
  .ai-compare__item-x svg {
    width: 8px !important;
    height: 8px !important;
  }
  .ai-compare__btn {
    font-size: 11.5px;
    padding: 8px 12px;
    gap: 4px;
  }
  .ai-compare__btn svg {
    width: 11px !important;
    height: 11px !important;
  }
}
@media (max-width: 768px) {
  .ai-products {
    padding-bottom: 80px; /* space for fixed compare tray */
  }
  .ai-products__tag {
    font-size: 9.5px;
    padding: 2px 7px;
  }
  .ai-products .pagination {
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .ai-products .pagination li a.item {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
  }
  .ai-products__card-compare::after, .ai-products__card-compare::before {
    display: none !important;
  }
}
.mh {
  display: none;
}

@media (max-width: 991px) {
  .mh {
    display: block;
    position: sticky;
    top: 0;
    z-index: 9000;
    padding: 10px 14px 12px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(1.4) blur(18px);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.08);
    box-shadow: 0 6px 20px -14px rgba(124, 58, 237, 0.25);
    isolation: isolate;
  }
  .mh__glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.22), transparent 65%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
  }
  .mh__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .mh__menu {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(124, 58, 237, 0.2);
    background: #fff;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .mh__menu span {
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
    border-radius: 2px;
    transition: transform 0.3s ease;
  }
  .mh__menu:active {
    transform: scale(0.94);
    background: #f3f0ff;
  }
  .mh__logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
  }
  .mh__logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.5);
  }
  .mh__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }
  .mh__logo-text strong {
    font-size: 15px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1a1a2e, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .mh__logo-text small {
    font-size: 8.5px;
    font-weight: 800;
    color: #8a87a3;
    letter-spacing: 0.35em;
    margin-top: 2px;
  }
  .mh__actions {
    display: inline-flex;
    gap: 6px;
    margin-right: auto;
  }
  .mh__action {
    position: relative;
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(124, 58, 237, 0.2);
    background: #fff;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4a4664;
    transition: all 0.2s ease;
    text-decoration: none;
  }
  .mh__action:active {
    transform: scale(0.94);
    color: #7c3aed;
    background: #f3f0ff;
  }
  .mh__action-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
  }
  .mh__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px -8px rgba(124, 58, 237, 0.25);
  }
  .mh__search-ico {
    color: #7c3aed;
    flex-shrink: 0;
  }
  .mh__search input {
    flex: 1;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1a2e;
    font-family: inherit;
    min-width: 0;
  }
  .mh__search input::placeholder {
    color: #8a87a3;
  }
  .mh__search input:focus {
    outline: none;
  }
  .mh__search-mic {
    width: 30px;
    height: 30px;
    border: none;
    background: linear-gradient(135deg, #f3f0ff, #ede9fe);
    border-radius: 8px;
    color: #7c3aed;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .mh__search-mic:active {
    transform: scale(0.9);
  }
  .mh__search:focus-within {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
  }
  .mh__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px -2px;
    padding: 0 14px 2px;
  }
  .mh__chips::-webkit-scrollbar {
    display: none;
  }
  .mh__chip {
    --ch1: #a855f7;
    --ch2: #7c3aed;
    --ch-rgb: 139, 92, 246;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ch1), var(--ch2));
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 5px 12px -4px rgba(var(--ch-rgb), 0.45);
    transition: all 0.2s ease;
  }
  .mh__chip svg {
    opacity: 0.95;
  }
  .mh__chip[data-tone=violet] {
    --ch1: #a855f7;
    --ch2: #7c3aed;
    --ch-rgb: 139, 92, 246;
  }
  .mh__chip[data-tone=orange] {
    --ch1: #fb923c;
    --ch2: #ea580c;
    --ch-rgb: 251, 146, 60;
  }
  .mh__chip[data-tone=rose] {
    --ch1: #fb7185;
    --ch2: #e11d48;
    --ch-rgb: 244, 63, 94;
  }
  .mh__chip[data-tone=emerald] {
    --ch1: #34d399;
    --ch2: #059669;
    --ch-rgb: 16, 185, 129;
  }
  .mh__chip[data-tone=sky] {
    --ch1: #38bdf8;
    --ch2: #0284c7;
    --ch-rgb: 14, 165, 233;
  }
  .mh__chip:active {
    transform: scale(0.95);
    color: #fff;
  }
  .site-header-wrapper,
.site-header__top,
.site-header__bottom,
.site-header__search,
.site-header__main,
.site-header__mid,
.site-header__rgb-color {
    display: none !important;
  }
  .site-header {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
  }
  .site-header::before, .site-header::after {
    display: none !important;
  }
  .wrapper {
    padding-top: 0 !important;
  }
}
@media (max-width: 991px) {
  [data-theme=dark] .mh {
    background: rgba(15, 12, 46, 0.88);
    border-bottom-color: rgba(167, 139, 250, 0.15);
  }
  [data-theme=dark] .mh__glow {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.25), transparent 65%);
  }
  [data-theme=dark] .mh__menu {
    background: #15123a;
    border-color: #3d3485;
  }
  [data-theme=dark] .mh__menu span {
    background: linear-gradient(90deg, #a78bfa, #8b5cf6);
  }
  [data-theme=dark] .mh__menu:active {
    background: #1a1648;
  }
  [data-theme=dark] .mh__logo-text strong {
    background: linear-gradient(135deg, #f1efff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  [data-theme=dark] .mh__logo-text small {
    color: #8a87b3;
  }
  [data-theme=dark] .mh__action {
    background: #15123a;
    border-color: #3d3485;
    color: #c4b5fd;
  }
  [data-theme=dark] .mh__action:active {
    background: #1a1648;
    color: #fff;
  }
  [data-theme=dark] .mh__action-badge {
    border-color: #0f0c2e;
  }
  [data-theme=dark] .mh__search {
    background: #15123a;
    border-color: #2a2560;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.4);
  }
  [data-theme=dark] .mh__search input {
    color: #f1efff;
  }
  [data-theme=dark] .mh__search input::placeholder {
    color: #5a5790;
  }
  [data-theme=dark] .mh__search-ico {
    color: #a78bfa;
  }
  [data-theme=dark] .mh__search-mic {
    background: linear-gradient(135deg, #1a1648, #15123a);
    color: #a78bfa;
  }
  [data-theme=dark] .mh__search:focus-within {
    border-color: #a78bfa;
  }
}
.breadcromb {
  padding-top: 16px;
  padding-bottom: 16px;
}
.breadcromb__item ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 4px;
}
.breadcromb__item ul li {
  font-size: 13px;
  font-weight: 500;
  color: #888;
}
.breadcromb__item ul li a {
  color: #7c3aed;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcromb__item ul li a:hover {
  color: #6d28d9;
}
.breadcromb__item ul li span {
  color: #1a1a2e;
  font-weight: 600;
}
.breadcromb__item ul li:after {
  content: "/";
  color: #ccc;
  margin: 0 6px;
  font-size: 12px;
}
.breadcromb__item ul li:last-child:after {
  content: none;
}
@media (max-width: 768px) {
  .breadcromb {
    padding-top: 6px;
    padding-bottom: 0;
  }
  .breadcromb__item ul {
    gap: 2px;
  }
  .breadcromb__item ul li {
    font-size: 13px;
  }
  .breadcromb__item ul li:after {
    margin: 0 4px;
    font-size: 12px;
  }
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}
.news-ticker {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e, #2d1f6e);
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.12);
  height: 46px;
}
.news-ticker--header {
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  height: 40px;
}
.news-ticker__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.news-ticker__badge::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.news-ticker__badge svg {
  animation: pulse-badge 1.5s ease-in-out infinite;
}
.news-ticker__track {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-right: 20px;
}
.news-ticker__content {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 25s linear infinite;
  direction: rtl;
}
.news-ticker__item {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  padding: 0 16px;
  direction: rtl;
}
.news-ticker__item strong {
  color: #fbbf24;
  font-weight: 800;
  margin-left: 4px;
}
.news-ticker__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.news-ticker:hover .news-ticker__content {
  animation-play-state: paused;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@media (max-width: 768px) {
  .news-ticker {
    height: 38px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .news-ticker--header {
    height: 36px;
    margin-bottom: 0;
  }
  .news-ticker__badge {
    padding: 0 12px;
    font-size: 11px;
    gap: 4px;
  }
  .news-ticker__badge svg {
    width: 12px !important;
    height: 12px !important;
  }
  .news-ticker__item {
    font-size: 13px;
    padding: 0 12px;
  }
  .news-ticker__track {
    padding-right: 12px;
  }
}
@media (max-width: 480px) {
  .news-ticker {
    height: 36px;
  }
  .news-ticker--header {
    height: 34px;
  }
  .news-ticker__badge {
    padding: 0 10px;
    font-size: 10.5px;
  }
  .news-ticker__item {
    font-size: 12.5px;
    padding: 0 10px;
  }
}
[data-theme=dark] .news-ticker {
  background: linear-gradient(135deg, #070525, #13103f);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme=dark] .breadcromb__item ul li {
  color: #5a5790;
}
[data-theme=dark] .breadcromb__item ul li a {
  color: #a78bfa;
}
[data-theme=dark] .breadcromb__item ul li a:hover {
  color: #c4b5fd;
}
[data-theme=dark] .breadcromb__item ul li span {
  color: #e0e0ff;
}
[data-theme=dark] .breadcromb__item ul li:after {
  color: #333;
}

/* index */
@keyframes float-1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes float-2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes float-3 {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-14px) rotate(3deg);
  }
}
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}
@keyframes ring-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes glow-border-shift {
  0% {
    box-shadow: 0 0 25px 3px #8b5cf6, 0 0 60px 6px rgba(139, 92, 246, 0.2);
  }
  25% {
    box-shadow: 0 0 25px 3px #ec4899, 0 0 60px 6px rgba(236, 72, 153, 0.2);
  }
  50% {
    box-shadow: 0 0 25px 3px #3b82f6, 0 0 60px 6px rgba(59, 130, 246, 0.2);
  }
  75% {
    box-shadow: 0 0 25px 3px #10b981, 0 0 60px 6px rgba(16, 185, 129, 0.2);
  }
  100% {
    box-shadow: 0 0 25px 3px #8b5cf6, 0 0 60px 6px rgba(139, 92, 246, 0.2);
  }
}
@keyframes line-pulse {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes content-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.top-product {
  margin-bottom: 24px;
}
.top-product__showcase {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  min-height: 500px;
}
.top-product__orbit {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  position: relative;
  z-index: 5;
  padding: 20px 0;
  gap: 0;
}
.top-product__orbit--right {
  padding-left: 10px;
}
.top-product__orbit--left {
  padding-right: 10px;
}
.top-product__orbit-icon {
  position: relative;
  width: 68px;
  height: 68px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  --orbit-c1: #8b5cf6;
  --orbit-c2: #6d28d9;
}
.top-product__orbit-icon:nth-child(1) {
  animation: float-1 4s ease-in-out infinite;
}
.top-product__orbit-icon:nth-child(2) {
  animation: float-2 5s ease-in-out infinite 0.5s;
}
.top-product__orbit-icon:nth-child(3) {
  animation: float-3 4.5s ease-in-out infinite 1s;
}
.top-product__orbit-icon:nth-child(4) {
  animation: float-2 4.2s ease-in-out infinite 1.5s;
}
.top-product__orbit--right .top-product__orbit-icon:nth-child(1) {
  --orbit-c1: #f43f5e;
  --orbit-c2: #e11d48;
}
.top-product__orbit--right .top-product__orbit-icon:nth-child(2) {
  --orbit-c1: #3b82f6;
  --orbit-c2: #1d4ed8;
}
.top-product__orbit--right .top-product__orbit-icon:nth-child(3) {
  --orbit-c1: #f59e0b;
  --orbit-c2: #d97706;
}
.top-product__orbit--right .top-product__orbit-icon:nth-child(4) {
  --orbit-c1: #10b981;
  --orbit-c2: #059669;
}
.top-product__orbit--left .top-product__orbit-icon:nth-child(1) {
  --orbit-c1: #8b5cf6;
  --orbit-c2: #6d28d9;
}
.top-product__orbit--left .top-product__orbit-icon:nth-child(2) {
  --orbit-c1: #06b6d4;
  --orbit-c2: #0891b2;
}
.top-product__orbit--left .top-product__orbit-icon:nth-child(3) {
  --orbit-c1: #ec4899;
  --orbit-c2: #be185d;
}
.top-product__orbit--left .top-product__orbit-icon:nth-child(4) {
  --orbit-c1: #eab308;
  --orbit-c2: #ca8a04;
}
.top-product__orbit-icon__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86px;
  height: 86px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--orbit-c1-rgb, 139, 92, 246), 0.35) 0%, transparent 70%);
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.top-product__orbit-icon__ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--orbit-c1) 35%, transparent);
  animation: ring-spin 12s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.top-product__orbit-icon__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--orbit-c1) 0%, var(--orbit-c2) 100%);
  border: 2px solid color-mix(in srgb, var(--orbit-c1) 70%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--orbit-c1) 40%, transparent), 0 4px 14px rgba(0, 0, 0, 0.25);
}
.top-product__orbit-icon__inner img, .top-product__orbit-icon__inner svg {
  width: 28px;
  height: 28px;
  object-fit: contain;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  opacity: 1;
  transition: all 0.3s ease;
}
.top-product__orbit-icon__label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--orbit-c1) 0%, var(--orbit-c2) 100%);
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--orbit-c1) 45%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.25);
  letter-spacing: 0.1px;
}
.top-product__orbit-icon__line {
  display: none;
}
.top-product__orbit-icon:hover .top-product__orbit-icon__inner {
  border-color: color-mix(in srgb, var(--orbit-c1) 90%, #fff);
  box-shadow: 0 0 28px color-mix(in srgb, var(--orbit-c1) 55%, transparent), 0 6px 22px rgba(0, 0, 0, 0.3);
  transform: scale(1.08);
}
.top-product__orbit-icon:hover .top-product__orbit-icon__inner img, .top-product__orbit-icon:hover .top-product__orbit-icon__inner svg {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}
.top-product__orbit-icon:hover .top-product__orbit-icon__label {
  transform: translateX(-50%) translateY(-2px);
}
.top-product__orbit-icon:hover .top-product__orbit-icon__glow {
  opacity: 0.9;
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__inner {
  background: linear-gradient(145deg, var(--orbit-c1) 0%, var(--orbit-c2) 100%);
  border-color: #fff;
  box-shadow: 0 0 32px color-mix(in srgb, var(--orbit-c1) 65%, transparent), 0 0 64px color-mix(in srgb, var(--orbit-c1) 30%, transparent), 0 6px 24px rgba(0, 0, 0, 0.35);
  transform: scale(1.14);
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__inner img, .top-product__orbit-icon.is-active .top-product__orbit-icon__inner svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__ring {
  border-color: color-mix(in srgb, var(--orbit-c1) 60%, #fff);
  animation-duration: 6s;
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__label {
  font-size: 11px;
  padding: 4px 12px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--orbit-c1) 60%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--orbit-c1) 60%, transparent) 0%, transparent 70%);
  opacity: 1;
}
.top-product__orbit-icon.is-active .top-product__orbit-icon__line {
  display: block;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.6), rgba(139, 92, 246, 0.05));
  animation: line-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.top-product__orbit--right .top-product__orbit-icon.is-active .top-product__orbit-icon__line {
  left: 100%;
  margin-left: 4px;
}
.top-product__orbit--left .top-product__orbit-icon.is-active .top-product__orbit-icon__line {
  right: 100%;
  margin-right: 4px;
  background: linear-gradient(270deg, rgba(139, 92, 246, 0.6), rgba(139, 92, 246, 0.05));
}
.top-product__display {
  flex: 1;
  min-width: 0;
  height: 500px;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  animation: glow-border-shift 8s ease-in-out infinite;
}
.top-product__display__slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.top-product__display__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.top-product__display__slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}
.top-product__display__slide.is-active .top-product__display__content {
  animation: content-up 0.6s ease-out 0.3s backwards;
}
.top-product__display__slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-product__display__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.8) 100%);
  z-index: 1;
}
.top-product__display__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(139, 92, 246, 0.8);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.top-product__display__content {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 36px 40px;
  z-index: 3;
}
.top-product__display__content h2 {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.top-product__display__sub {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.top-product__display__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 18px;
  font-weight: 400;
  max-width: 400px;
}
.top-product__display__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  padding: 11px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 25px rgba(109, 40, 217, 0.35);
}
.top-product__display__btn svg {
  transition: transform 0.3s ease;
}
.top-product__display__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 35px rgba(109, 40, 217, 0.5);
}
.top-product__display__btn:hover svg {
  transform: translateX(-4px);
}
.top-product__display__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 10;
}
.top-product__display__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #3b82f6);
  border-radius: 0 3px 3px 0;
}
.top-product__responsive {
  border-radius: 18px;
  overflow: hidden;
  margin: 0 -5px;
  padding: 0 5px 30px;
}
.top-product__responsive .swiper-pagination {
  bottom: 6px;
}
.top-product__responsive .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(139, 92, 246, 0.35);
  opacity: 1;
  margin: 0 4px !important;
  transition: all 0.3s ease;
}
.top-product__responsive .swiper-pagination .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
}
.top-product__item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  height: 340px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.18);
  animation: glow-border-shift 8s ease-in-out infinite;
}
.top-product__item > a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
}
.top-product__item .top-product__item-img {
  height: 100%;
  width: 100%;
  margin: 0;
}
.top-product__item .top-product__item-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.top-product__item .top-product__item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}
.top-product__item .top-product__item-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(139, 92, 246, 0.85);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.top-product__item .top-product__item-info {
  position: absolute;
  right: 20px;
  left: 80px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.top-product__item .top-product__item-info .top-product__item-info-title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.top-product__item .top-product__item-info .top-product__item-info-title-en {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
}
.top-product__item .top-product__item-buy {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(109, 40, 217, 0.4);
}
.top-product__item .top-product__item-buy i {
  font-size: 24px;
  color: #fff;
}

@media (max-width: 1200px) {
  .top-product__orbit {
    flex: 0 0 90px;
    gap: 16px;
  }
  .top-product__orbit-icon {
    width: 56px;
    height: 56px;
  }
  .top-product__orbit-icon__glow {
    width: 70px;
    height: 70px;
  }
  .top-product__orbit-icon__inner img {
    width: 22px;
  }
  .top-product__orbit-icon__label {
    font-size: 9px;
    bottom: -16px;
  }
  .top-product__display {
    height: 460px;
  }
  .top-product__display__content h2 {
    font-size: 28px;
  }
  .top-product__display__content {
    padding: 28px 32px;
  }
}
@media (max-width: 991px) {
  .top-product__orbit {
    flex: 0 0 70px;
    gap: 12px;
  }
  .top-product__orbit-icon {
    width: 48px;
    height: 48px;
  }
  .top-product__orbit-icon__glow {
    width: 60px;
    height: 60px;
  }
  .top-product__orbit-icon__ring {
    display: none;
  }
  .top-product__orbit-icon__inner img {
    width: 18px;
  }
  .top-product__orbit-icon__label {
    font-size: 8px;
    bottom: -14px;
  }
  .top-product__orbit-icon__line {
    display: none !important;
  }
  .top-product__display {
    height: 400px;
  }
  .top-product__display__content h2 {
    font-size: 24px;
  }
  .top-product__display__desc {
    font-size: 12px;
  }
  .top-product__display__btn {
    font-size: 12px;
    padding: 9px 20px;
  }
  .top-product__display__content {
    padding: 24px 26px;
  }
}
@media (max-width: 767px) {
  .top-product {
    margin: 12px 0 16px;
    padding: 0;
  }
  .top-product__showcase {
    display: none;
  }
  .top-product__responsive {
    position: relative;
    overflow: visible !important;
    padding: 6px 0 0 !important;
    border-radius: 0 !important;
  }
  .top-product__responsive .swiper-wrapper {
    border-radius: 20px;
  }
  .top-product .swiper-slide {
    padding: 0 2px;
  }
  .top-product__item {
    position: relative;
    height: 260px;
    border-radius: 20px !important;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 18px 38px -14px rgba(15, 11, 72, 0.4);
  }
  .top-product__item-img {
    position: absolute;
    inset: 0;
    margin: 0;
  }
  .top-product__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.8s ease;
  }
  .top-product__item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 11, 72, 0) 30%, rgba(15, 11, 72, 0.55) 65%, rgba(15, 11, 72, 0.92) 100%), linear-gradient(270deg, rgba(124, 58, 237, 0.25) 0%, transparent 60%);
    z-index: 1;
  }
  .top-product__item-badge {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px !important;
    font-size: 10.5px !important;
    font-weight: 800;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    letter-spacing: 0.2px;
  }
  .top-product__item-info {
    position: absolute !important;
    right: 16px !important;
    left: 80px !important;
    bottom: 16px !important;
    z-index: 3;
  }
  .top-product__item-info-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .top-product__item-info-title-en {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.5px;
    direction: ltr;
    display: inline-block;
  }
  .top-product__item-buy {
    position: absolute !important;
    bottom: 14px !important;
    right: auto !important;
    left: 14px !important;
    z-index: 3;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.25s ease;
  }
  .top-product__item-buy i {
    font-size: 22px !important;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .top-product__item-buy:active {
    transform: scale(0.92);
  }
  .swiper-slide-active .top-product__item-img img {
    transform: scale(1);
  }
  .top-product__responsive-pagination {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .top-product__item {
    height: 220px;
    border-radius: 18px !important;
  }
  .top-product__item-badge {
    top: 12px !important;
    right: 12px !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
  .top-product__item-info {
    right: 12px !important;
    left: 70px !important;
    bottom: 12px !important;
  }
  .top-product__item-info-title {
    font-size: 16px !important;
  }
  .top-product__item-info-title-en {
    font-size: 10.5px !important;
  }
  .top-product__item-buy {
    width: 46px !important;
    height: 46px !important;
    left: 12px !important;
    border-radius: 12px !important;
  }
  .top-product__item-buy i {
    font-size: 20px !important;
  }
}
[data-theme=dark] .top-product__orbit-icon__inner {
  background: linear-gradient(145deg, #0f0b3b 0%, #1a1550 100%);
}
[data-theme=dark] .top-product__display__overlay {
  background: linear-gradient(180deg, rgba(7, 5, 37, 0) 20%, rgba(7, 5, 37, 0.15) 40%, rgba(7, 5, 37, 0.6) 75%, rgba(7, 5, 37, 0.9) 100%);
}

.feautures {
  padding: 28px 0;
}
.feautures__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.feautures__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  transition: all 0.25s ease;
}
.feautures__card:hover {
  border-color: rgba(91, 82, 240, 0.15);
  box-shadow: 0 4px 20px rgba(15, 11, 72, 0.06);
  transform: translateY(-2px);
}
.feautures__card:hover .feautures__icon {
  transform: scale(1.08);
}
.feautures__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.feautures__icon--shield {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.feautures__icon--zap {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
}
.feautures__icon--support {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.feautures__icon--lock {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.feautures__text {
  min-width: 0;
}
.feautures__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f0b48;
  margin: 0 0 4px;
  line-height: 1.4;
}
.feautures__desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.45);
  margin: 0;
  line-height: 1.5;
}

/* ── Dark Mode ── */
[data-theme=dark] .feautures__card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .feautures__card:hover {
  border-color: rgba(91, 82, 240, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme=dark] .feautures__title {
  color: #e4e1ff;
}
[data-theme=dark] .feautures__desc {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .feautures__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .feautures {
    padding: 18px 0;
  }
  .feautures__grid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 10px;
    margin: 0 -15px;
    padding-right: 15px;
    padding-left: 15px;
    scrollbar-width: none;
  }
  .feautures__grid::-webkit-scrollbar {
    display: none;
  }
  .feautures__card {
    flex: 0 0 auto;
    width: 230px;
    padding: 12px 14px;
    gap: 10px;
    scroll-snap-align: start;
  }
  .feautures__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .feautures__icon svg {
    width: 20px;
    height: 20px;
  }
  .feautures__title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }
  .feautures__desc {
    font-size: 10.5px;
    line-height: 1.4;
  }
}
@media (max-width: 480px) {
  .feautures__card {
    width: 210px;
  }
}
.product {
  margin-bottom: 28px;
  padding: 30px 0 34px;
  position: relative;
  /* ── Full-bleed glassmorphic gradient background ── */
  /* ── Section header ── */
  /* ═══ Redesigned Card — image on top, name card below ═══ */
}
.product::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.12) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.09) 0%, transparent 55%), linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(244, 241, 255, 0.5) 100%);
  border-top: 1px solid rgba(15, 11, 72, 0.05);
  border-bottom: 1px solid rgba(15, 11, 72, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}
.product::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(91, 82, 240, 0.35), rgba(236, 72, 153, 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}
.product > .container {
  position: relative;
  z-index: 2;
}
.product__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding: 0 4px;
  /* Hide dropdown if still in DOM */
}
.product__header .product__header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 11, 72, 0.08);
  flex-shrink: 0;
  padding: 0;
}
.product__header .product__header-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.product__header .product__header-title {
  color: #0f0b48;
  font-size: 20px;
  font-weight: 800;
  padding: 0;
  background: none;
}
.product__header .product__header-sort {
  display: none;
}
.product__header .product__header-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  color: #0f0b48;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
.product__header .product__header-more i {
  font-size: 10px;
  transition: transform 0.2s;
}
.product__header .product__header-more:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
}
.product__header .product__header-more:hover i {
  transform: translateX(-3px);
}
.product__header:before {
  display: none;
}
.product__content-swiper {
  overflow: visible;
}
.product__content-swiper .swiper-slide {
  filter: blur(6px);
  opacity: 0.1;
  transition: 0.3s;
}
.product__content-swiper .swiper-slide.swiper-slide-active {
  filter: blur(0);
  opacity: 1;
}
.product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide {
  filter: blur(0);
  opacity: 1;
}
.product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
  filter: blur(0);
  opacity: 1;
}
.product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
  filter: blur(0);
  opacity: 1;
}
@media (max-width: 767px) {
  .product {
    margin-bottom: 12px !important;
    padding: 22px 0 24px !important;
  }
  .product::before, .product::after {
    display: none !important;
  }
  .product__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 2px;
  }
  .product__header .product__header-logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .product__header .product__header-logo img {
    width: 20px;
    height: 20px;
  }
  .product__header .product__header-title {
    font-size: 16px;
    font-weight: 900;
  }
  .product__header .product__header-more {
    padding: 5px 11px;
    font-size: 11px;
    gap: 4px;
  }
  .product__header .product__header-more i {
    font-size: 9px;
  }
  .product__content-swiper .swiper-slide {
    filter: none !important;
    opacity: 1 !important;
  }
  .product__nav {
    display: none;
  }
  .product__item-img {
    margin: 0 0 8px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(15, 11, 72, 0.08);
  }
  .product__item-wrapper {
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(15, 11, 72, 0.06);
  }
  .product__item-name-en {
    font-size: 12px;
  }
  .product__item-name-fa {
    font-size: 10.5px;
  }
}
@media (max-width: 420px) {
  .product {
    padding: 18px 0 20px !important;
  }
  .product__header .product__header-title {
    font-size: 14.5px;
  }
  .product__header .product__header-more {
    padding: 4px 10px;
    font-size: 10.5px;
  }
}
.product__item {
  display: block;
  text-decoration: none;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  background: transparent;
  border: none;
  /* ── Image ── */
  /* ── Name card — sits right below the image ── */
  /* ── Hide old elements if still in DOM ── */
  /* ── Hover ── */
}
.product__item::before {
  display: none;
}
.product__item .product__item-img {
  position: relative;
  margin: 0 0 10px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: 0 6px 20px rgba(15, 11, 72, 0.1);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.product__item .product__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product__item .product__item-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 11, 72, 0.25) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.product__item .product__item-img .shadow {
  display: none;
}
.product__item .product__item-img--filter img {
  filter: grayscale(100%);
  opacity: 0.7;
}
.product__item .product__item-wrapper {
  position: relative;
  padding: 10px 14px 11px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.05);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.06);
  text-align: center;
  z-index: 2;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.product__item-name-en {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
  direction: ltr;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: color 0.25s ease;
}
.product__item-name-fa {
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.product__item .product__item-info,
.product__item .product__item-meta,
.product__item .product__item-price,
.product__item .product__item-footer {
  display: none;
}
.product__item .product__info-radio {
  position: absolute;
  inset: 0;
  z-index: 7;
  cursor: pointer;
}
.product__item:hover {
  transform: translateY(-5px);
}
.product__item:hover .product__item-img {
  box-shadow: 0 18px 44px rgba(15, 11, 72, 0.22);
}
.product__item:hover .product__item-img img {
  transform: scale(1.07);
}
.product__item:hover .product__item-img::after {
  opacity: 1;
}
.product__item:hover .product__item-wrapper {
  border-color: rgba(91, 82, 240, 0.25);
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.18);
}
.product__item:hover .product__item-name-en {
  color: #5b52f0;
}
.product__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 100%);
  border: 1px solid rgba(91, 82, 240, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.product__nav i {
  font-size: 16px;
  color: #5b52f0;
  transition: transform 0.3s ease;
}
.product__nav:hover {
  background: linear-gradient(135deg, #5b52f0 0%, #8b5cf6 100%);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(91, 82, 240, 0.4);
}
.product__nav:hover i {
  color: #fff;
}
.product__nav--next {
  left: -22px;
}
.product__nav--next:hover i {
  transform: translateX(-3px);
}
.product__nav--prev {
  right: -22px;
}
.product__nav--prev:hover i {
  transform: translateX(3px);
}
.product__nav.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.85);
}
.product__content {
  position: relative;
}
.product__content-animate {
  display: none;
}
.product--related {
  overflow: visible;
}

[data-theme=dark] .product::before {
  background: radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.18) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.12) 0%, transparent 55%), linear-gradient(135deg, rgba(26, 23, 64, 0.6) 0%, rgba(19, 17, 42, 0.5) 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 40px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .product__nav {
  background: linear-gradient(135deg, rgba(26, 23, 64, 0.9) 0%, rgba(19, 17, 42, 0.8) 100%);
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .product__nav i {
  color: #c4b5fd;
}
[data-theme=dark] .product__nav:hover {
  background: linear-gradient(135deg, #5b52f0 0%, #8b5cf6 100%);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.5);
}
[data-theme=dark] .product__nav:hover i {
  color: #fff;
}
[data-theme=dark] .product__header .product__header-title {
  color: #e4e1ff;
}
[data-theme=dark] .product__header .product__header-logo {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .product__header .product__header-more {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .product__header .product__header-more:hover {
  background: rgba(91, 82, 240, 0.15);
  color: #a78bfa;
}
[data-theme=dark] .product__item .product__item-img {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .product__item .product__item-wrapper {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .product__item .product__item-name-en {
  color: #f1efff;
}
[data-theme=dark] .product__item .product__item-name-fa {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .product__item:hover .product__item-img {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .product__item:hover .product__item-wrapper {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .product__item:hover .product__item-name-en {
  color: #c4b5fd;
}
[data-theme=dark] .product__item .product__item-price .product__item-price-title {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .product__item .product__item-price .product__item-price-numb {
  color: #e4e1ff;
}
[data-theme=dark] .product__item .product__item-price .product__item-price-numb i {
  color: #e4e1ff;
}
[data-theme=dark] .product__big-horizontal .logo {
  background-image: url(../img/corner-curve-dark.svg);
}

.discount {
  overflow: hidden;
  position: relative;
  margin-bottom: 36px;
  padding: 48px 0;
  width: 100%;
  /* ── Background: full-bleed gradient ── */
  /* ── Header ── */
  /* Discount percent badge */
  /* ── Nav arrows ── */
  /* ═══ Discount Card (Redesigned) ═══ */
}
.discount__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #0f0b48 0%, #1a1058 30%, #2d1f8a 60%, #5b52f0 100%);
  overflow: hidden;
}
.discount__background::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.discount__background::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.08);
}
.discount__background img {
  display: none;
}
.discount__wrapper {
  position: relative;
  z-index: 2;
}
.discount__content-swiper {
  padding: 10px;
  margin: -10px;
  overflow: visible;
}
.discount__content {
  position: relative;
}
.discount__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 0 4px;
}
.discount__header > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}
.discount__header-info {
  flex: 1;
}
.discount__header-info-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.discount__header-info-title-big {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.discount__header-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  flex-direction: row-reverse;
}
.discount__header-more:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-3px);
}
.discount__header-more i {
  font-size: 10px;
}
.discount .discount-percent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #ef4444;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.discount .discount-percent__numb {
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.discount .discount-percent__numb i {
  font-size: 12px;
}
.discount__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.discount__nav i {
  font-size: 14px;
  color: #fff;
}
.discount__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}
.discount__nav--next {
  left: -5px;
}
.discount__nav--prev {
  right: -5px;
}
.discount__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.discount__item {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafafe 100%);
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15, 11, 72, 0.08);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  isolation: isolate;
  /* subtle gradient glow behind card */
  /* ── Discount badge ── */
  /* ── Image area ── */
  /* ── Product name ── */
  /* ── Footer: price + buy ── */
  /* ── Hover ── */
}
.discount__item::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 80%;
  background: radial-gradient(ellipse at top, rgba(91, 82, 240, 0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.discount__item .discount__item-discount {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 6px 12px 6px 10px;
  background: linear-gradient(135deg, #ff4d6d 0%, #ef4444 100%);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.discount__item .discount__item-discount i {
  font-size: 11px;
  margin-right: 2px;
}
.discount__item .discount__item-img {
  position: relative;
  margin: 0;
  padding: 20px 20px 14px;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discount__item .discount__item-img::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 10px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(15, 11, 72, 0.25) 0%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.discount__item .discount__item-img a {
  display: block;
}
.discount__item .discount__item-img img {
  width: 100%;
  max-width: 170px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 11, 72, 0.22);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.discount__item .discount__item-info {
  padding: 4px 18px 0;
  z-index: 1;
  position: relative;
}
.discount__item .discount__item-info .discount__item-info-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f0b48;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: right;
  min-height: 40px;
}
.discount__item .discount__item-info .discount__item-info-title a {
  color: inherit;
  text-decoration: none;
}
.discount__item .discount__item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 18px;
  gap: 10px;
  z-index: 1;
  position: relative;
}
.discount__item .discount__item-footer .discount__item-footer-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}
.discount__item .discount__item-footer .discount__item-footer-price ins {
  font-size: 16px;
  font-weight: 800;
  color: #0f0b48;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.discount__item .discount__item-footer .discount__item-footer-price ins::after {
  content: "تومان";
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-right: 2px;
}
.discount__item .discount__item-footer .discount__item-footer-price .unit {
  display: none;
}
.discount__item .discount__item-footer .discount__item-footer-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #5b52f0 0%, #7c3aed 100%);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
  flex-shrink: 0;
}
.discount__item .discount__item-footer .discount__item-footer-buy > i {
  position: relative;
  font-size: 17px;
  color: #fff;
}
.discount__item .discount__item-footer .discount__item-footer-buy > i i {
  position: absolute;
  top: -4px;
  right: -5px;
  font-size: 8px;
  background: #fff;
  color: #5b52f0;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.discount__item .discount__item-footer .discount__item-footer-buy:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.5);
}
.discount__item:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 82, 240, 0.25);
  box-shadow: 0 18px 40px rgba(15, 11, 72, 0.18);
}
.discount__item:hover::before {
  opacity: 1;
}
.discount__item:hover .discount__item-img img {
  transform: scale(1.04);
}
.discount__item:hover .discount__item-img::after {
  opacity: 0.9;
}

/* ══ Dark Mode ══ */
[data-theme=dark] .discount__background {
  background: linear-gradient(135deg, #08061a 0%, #0f0b30 30%, #1a1058 60%, #2d1f8a 100%);
}
[data-theme=dark] .discount__item {
  background: linear-gradient(180deg, #1a1740 0%, #13112a 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .discount__item::before {
  background: radial-gradient(ellipse at top, rgba(91, 82, 240, 0.22) 0%, transparent 60%);
}
[data-theme=dark] .discount__item:hover {
  border-color: rgba(91, 82, 240, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .discount__item .discount__item-img::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
}
[data-theme=dark] .discount__item .discount__item-info-title {
  color: #e4e1ff;
}
[data-theme=dark] .discount__item .discount__item-info-title a {
  color: #e4e1ff;
}
[data-theme=dark] .discount__item .discount__item-footer-price ins {
  color: #fff;
}
[data-theme=dark] .discount__item .discount__item-footer-price ins::after {
  color: rgba(255, 255, 255, 0.45);
}

/* ══ Responsive ══ */
@media (max-width: 991px) {
  .discount__header {
    flex-wrap: wrap;
  }
  .discount__header-info-title-big {
    font-size: 18px;
  }
  .discount__header-more {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .discount {
    padding: 22px 0;
  }
  .discount__header-info-title-big {
    font-size: 15px;
  }
  .discount__nav {
    display: none;
  }
  .discount__item-img {
    padding: 14px 14px 10px;
  }
  .discount__item-img img {
    max-width: 130px;
    border-radius: 16px;
  }
  .discount__item-info {
    padding: 4px 12px 0;
  }
  .discount__item-info-title {
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 36px;
    -webkit-line-clamp: 2;
  }
  .discount__item-footer {
    padding: 10px 12px 12px;
    gap: 6px;
  }
  .discount__item-footer-price ins {
    font-size: 13.5px;
  }
  .discount__item-footer-price ins::after {
    font-size: 9.5px;
  }
  .discount__item-footer-buy {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .discount__item-footer-buy > i {
    font-size: 14px;
  }
  .discount__item-discount {
    top: 8px;
    right: 8px;
    padding: 4px 9px 4px 8px;
    font-size: 11px;
  }
  .discount__item-discount i {
    font-size: 9px;
  }
}
@media (max-width: 420px) {
  .discount__item-info-title {
    font-size: 11.5px !important;
    min-height: 34px !important;
  }
  .discount__item-footer-price ins {
    font-size: 13px !important;
  }
  .discount__item-footer-buy {
    width: 34px !important;
    height: 34px !important;
  }
}
@keyframes nv-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
  }
}
.newonvan {
  position: relative;
  padding: 44px 0;
  margin-bottom: 24px;
}
.newonvan__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding: 0 4px;
}
.newonvan__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.newonvan__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
  animation: nv-badge-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.newonvan__badge svg {
  fill: currentColor;
  stroke: none;
}
.newonvan__title {
  font-size: 20px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
  line-height: 1.3;
}
.newonvan__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.5);
  margin: 0;
  line-height: 1.4;
}
.newonvan__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.newonvan__more:hover {
  background: #5b52f0;
  color: #fff;
  transform: translateX(-3px);
}
.newonvan__content {
  position: relative;
}
.newonvan__content-swiper {
  overflow: visible;
  padding: 8px 2px 12px;
}
.newonvan__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.1);
  color: #5b52f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.25s ease;
  padding: 0;
}
.newonvan__nav:hover {
  background: #5b52f0;
  color: #fff;
  border-color: #5b52f0;
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.35);
}
.newonvan__nav--prev {
  right: -18px;
}
.newonvan__nav--next {
  left: -18px;
}
.newonvan__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.newonvan__item {
  height: auto;
}
.newonvan__item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 11, 72, 0.06);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.newonvan__item-img {
  position: relative;
  margin: 0;
  padding: 28px 22px 20px;
  aspect-ratio: 1/0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(236, 72, 153, 0.06) 100%);
  overflow: hidden;
}
.newonvan__item-img::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -30%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(91, 82, 240, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.newonvan__item-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(15, 11, 72, 0.25);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.newonvan__item-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newonvan__item-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #5b52f0;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  background: rgba(91, 82, 240, 0.1);
  border-radius: 6px;
  align-self: flex-start;
}
.newonvan__item-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f0b48;
  margin: 2px 0 0;
  line-height: 1.3;
  direction: ltr;
  text-align: right;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.newonvan__item-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5b52f0;
  margin-top: 4px;
  transition: gap 0.25s ease;
}
.newonvan__item-link:hover {
  transform: translateY(-6px);
  border-color: rgba(91, 82, 240, 0.2);
  box-shadow: 0 20px 40px rgba(15, 11, 72, 0.18);
}
.newonvan__item-link:hover .newonvan__item-img img {
  transform: scale(1.05) rotate(-2deg);
}
.newonvan__item-link:hover .newonvan__item-cta {
  gap: 10px;
}

[data-theme=dark] .newonvan__title {
  color: #e4e1ff;
}
[data-theme=dark] .newonvan__subtitle {
  color: rgba(199, 197, 238, 0.5);
}
[data-theme=dark] .newonvan__more {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}
[data-theme=dark] .newonvan__more:hover {
  background: #7c3aed;
  color: #fff;
}
[data-theme=dark] .newonvan__nav {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  color: #c4b5fd;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .newonvan__nav:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
[data-theme=dark] .newonvan__item-link {
  background: linear-gradient(180deg, #1a1740 0%, #13112a 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .newonvan__item-link:hover {
  border-color: rgba(91, 82, 240, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .newonvan__item-img {
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
}
[data-theme=dark] .newonvan__item-img img {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .newonvan__item-title {
  color: #fff;
}
[data-theme=dark] .newonvan__item-tag {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}
[data-theme=dark] .newonvan__item-cta {
  color: #c4b5fd;
}

@media (max-width: 991px) {
  .newonvan {
    padding: 36px 0;
  }
  .newonvan__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .newonvan__more {
    align-self: flex-end;
  }
  .newonvan__title {
    font-size: 19px;
  }
}
@media (max-width: 767px) {
  .newonvan {
    padding: 22px 0;
  }
  .newonvan__header {
    gap: 8px;
    margin-bottom: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .newonvan__header-left {
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .newonvan__badge {
    padding: 4px 9px;
    font-size: 9.5px;
    letter-spacing: 0.8px;
    flex-shrink: 0;
  }
  .newonvan__badge svg {
    width: 11px;
    height: 11px;
  }
  .newonvan__title {
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 2px;
  }
  .newonvan__subtitle {
    font-size: 10.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .newonvan__more {
    padding: 6px 10px;
    font-size: 10.5px;
    flex-shrink: 0;
  }
  .newonvan__more svg {
    width: 11px;
    height: 11px;
  }
  .newonvan__nav {
    display: none;
  }
  .newonvan__item-link {
    border-radius: 18px;
  }
  .newonvan__item-img {
    padding: 20px 16px 12px;
  }
  .newonvan__item-img img {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 20px;
    object-fit: cover;
  }
  .newonvan__item-body {
    padding: 10px 14px 14px;
    gap: 6px;
  }
  .newonvan__item-tag {
    font-size: 10px;
    padding: 3px 8px;
  }
  .newonvan__item-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
  }
  .newonvan__item-cta {
    font-size: 11px;
  }
  .newonvan__item-cta svg {
    width: 11px;
    height: 11px;
  }
}
@media (max-width: 420px) {
  .newonvan__title {
    font-size: 14px;
  }
  .newonvan__subtitle {
    display: none;
  }
  .newonvan__item-img {
    padding: 16px 14px 10px;
  }
  .newonvan__item-title {
    font-size: 13px;
  }
}
@keyframes ain-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
  }
}
.ai-news {
  position: relative;
  padding: 44px 0;
  margin-bottom: 24px;
}
.ai-news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding: 0 4px;
}
.ai-news__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ai-news__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
  animation: ain-badge-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.ai-news__badge svg {
  fill: currentColor;
  stroke: none;
}
.ai-news__title {
  font-size: 20px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
  line-height: 1.3;
}
.ai-news__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.5);
  margin: 0;
  line-height: 1.4;
}
.ai-news__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-news__more:hover {
  background: #5b52f0;
  color: #fff;
  transform: translateX(-3px);
}
.ai-news__content {
  position: relative;
}
.ai-news__swiper {
  overflow: visible;
  padding: 8px 2px 12px;
}
.ai-news__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.1);
  color: #5b52f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.25s ease;
  padding: 0;
}
.ai-news__nav:hover {
  background: #5b52f0;
  color: #fff;
  border-color: #5b52f0;
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.35);
}
.ai-news__nav--prev {
  right: -20px;
}
.ai-news__nav--next {
  left: -20px;
}
.ai-news__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.ai-news__item {
  height: auto;
}
.ai-news__item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #1a1740;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 28px rgba(15, 11, 72, 0.18);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.ai-news__item-img {
  position: relative;
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0829 0%, #13112a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-news__item-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease;
}
.ai-news__item-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-news__item-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
  transition: gap 0.25s ease, transform 0.25s ease;
}
.ai-news__item-desc {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.9;
  margin: 0;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-news__item-link:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15, 11, 72, 0.28);
}
.ai-news__item-link:hover .ai-news__item-img img {
  transform: scale(1.04);
}
.ai-news__item-link:hover .ai-news__item-cta {
  gap: 10px;
  transform: translateY(-1px);
}

[data-theme=dark] .ai-news__title {
  color: #e4e1ff;
}
[data-theme=dark] .ai-news__subtitle {
  color: rgba(199, 197, 238, 0.5);
}
[data-theme=dark] .ai-news__more {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}
[data-theme=dark] .ai-news__more:hover {
  background: #7c3aed;
  color: #fff;
}
[data-theme=dark] .ai-news__nav {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #c4b5fd;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .ai-news__nav:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
[data-theme=dark] .ai-news__item-link {
  background: #0f0b30;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .ai-news__item-link:hover {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65);
}

@media (max-width: 991px) {
  .ai-news {
    padding: 32px 0;
  }
  .ai-news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ai-news__more {
    align-self: flex-end;
  }
  .ai-news__title {
    font-size: 19px;
  }
  .ai-news__subtitle {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .ai-news {
    padding: 22px 0;
  }
  .ai-news__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0;
  }
  .ai-news__header-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
    flex: none;
    min-width: 0;
  }
  .ai-news__header-left > div {
    width: 100%;
  }
  .ai-news__badge {
    padding: 5px 11px;
    font-size: 9.5px;
    letter-spacing: 0.8px;
    flex-shrink: 0;
  }
  .ai-news__badge svg {
    width: 11px;
    height: 11px;
  }
  .ai-news__title {
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 2px;
    white-space: normal;
  }
  .ai-news__subtitle {
    font-size: 10.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ai-news__more {
    align-self: center;
    padding: 6px 14px;
    font-size: 10.5px;
    flex-shrink: 0;
  }
  .ai-news__more svg {
    width: 11px;
    height: 11px;
  }
  .ai-news__nav {
    display: none;
  }
  .ai-news__item-link {
    border-radius: 16px;
  }
  .ai-news__item-img {
    aspect-ratio: 16/10;
  }
  .ai-news__item-img img {
    border-radius: 16px 16px 0 0;
  }
  .ai-news__item-body {
    padding: 12px 14px 14px;
    gap: 6px;
  }
  .ai-news__item-desc {
    font-size: 11px;
    line-height: 1.75;
    -webkit-line-clamp: 2;
  }
  .ai-news__item-cta {
    font-size: 10.5px;
    padding: 7px 12px;
    gap: 4px;
  }
  .ai-news__item-cta svg {
    width: 11px;
    height: 11px;
  }
}
@media (max-width: 420px) {
  .ai-news__title {
    font-size: 14px;
  }
  .ai-news__subtitle {
    display: none;
  }
  .ai-news__item-desc {
    font-size: 10.5px;
  }
}
@keyframes aid-shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes aid-pulse-red {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes aid-glow-float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, -20px);
  }
}
@keyframes aid-flame-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.ai-deals {
  position: relative;
  padding: 56px 0 48px;
  margin: 28px 0;
  width: 100%;
  background: radial-gradient(ellipse at top, #1a0b4a 0%, #0d0730 50%, #070220 100%);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}
.ai-deals__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: aid-glow-float 12s ease-in-out infinite;
}
.ai-deals__glow--1 {
  top: -80px;
  right: -60px;
  width: 340px;
  height: 340px;
  background: rgba(168, 85, 247, 0.4);
}
.ai-deals__glow--2 {
  bottom: -100px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: rgba(34, 211, 238, 0.3);
  animation-delay: -6s;
}
.ai-deals__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ai-deals__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.ai-deals__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
  animation: aid-pulse-red 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.ai-deals__title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 3px;
  line-height: 1.3;
  background: linear-gradient(90deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-deals__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.4;
}
.ai-deals__countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.ai-deals__countdown-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.3px;
}
.ai-deals__countdown-boxes {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-deals__countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #1a103d 0%, #0d0724 100%);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
.ai-deals__countdown-num {
  font-size: 16px;
  font-weight: 900;
  color: #22d3ee;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.ai-deals__countdown-unit {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.ai-deals__countdown-sep {
  font-size: 18px;
  font-weight: 900;
  color: #22d3ee;
  animation: aid-flame-flicker 1s ease-in-out infinite;
}
.ai-deals__content {
  position: relative;
  z-index: 2;
}
.ai-deals__swiper {
  overflow: visible;
  padding: 10px 2px 14px;
}
.ai-deals__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.25s ease;
  padding: 0;
  backdrop-filter: blur(10px);
}
.ai-deals__nav:hover {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(168, 85, 247, 0.5);
}
.ai-deals__nav--prev {
  right: -20px;
}
.ai-deals__nav--next {
  left: -20px;
}
.ai-deals__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.ai-deals__item {
  height: auto;
}
.ai-deals__item-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 16px 16px;
  background: linear-gradient(155deg, #1a1245 0%, #0f0830 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ai-deals__item-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899);
  opacity: 0.7;
}
.ai-deals__item-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
}
.ai-deals__item-discount {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 5px 10px;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 10px;
  direction: ltr;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
  letter-spacing: 0.3px;
}
.ai-deals__item-flame {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(168, 85, 247, 0.2);
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 800;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  letter-spacing: 0.4px;
  backdrop-filter: blur(6px);
}
.ai-deals__item-flame svg {
  color: #a855f7;
  animation: aid-flame-flicker 1.2s ease-in-out infinite;
}
.ai-deals__item-flame--hot {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}
.ai-deals__item-flame--hot svg {
  color: #ef4444;
}
.ai-deals__item-img {
  position: relative;
  margin: 18px auto 14px;
  padding: 0;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-deals__item-img::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ai-deals__item-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ai-deals__item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  z-index: 2;
}
.ai-deals__item-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #22d3ee;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  background: rgba(34, 211, 238, 0.1);
  border-radius: 6px;
  align-self: center;
  text-transform: uppercase;
}
.ai-deals__item-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 2px 0 4px;
  line-height: 1.3;
  direction: ltr;
  letter-spacing: -0.01em;
}
.ai-deals__item-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.ai-deals__item-price-old {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
  direction: ltr;
}
.ai-deals__item-price-new {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  direction: ltr;
}
.ai-deals__item-price-new span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.ai-deals__item-cta {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-deals__item-link:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 22px 44px rgba(10, 5, 40, 0.6), 0 0 0 1px rgba(168, 85, 247, 0.15);
}
.ai-deals__item-link:hover::after {
  animation: aid-shine 0.8s ease forwards;
}
.ai-deals__item-link:hover .ai-deals__item-img::before {
  opacity: 1;
}
.ai-deals__item-link:hover .ai-deals__item-img img {
  transform: scale(1.06) rotate(-3deg);
}
.ai-deals__item-link:hover .ai-deals__item-cta {
  transform: scale(1.1);
  box-shadow: 0 10px 22px rgba(168, 85, 247, 0.6);
}

@media (max-width: 991px) {
  .ai-deals {
    padding: 40px 0 36px;
  }
  .ai-deals__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .ai-deals__countdown {
    width: 100%;
    justify-content: space-between;
  }
  .ai-deals__title {
    font-size: 18px;
  }
  .ai-deals__subtitle {
    font-size: 11.5px;
  }
}
@media (max-width: 991px) {
  .ai-deals {
    padding: 32px 0 28px;
    margin: 0 0 18px;
  }
  .ai-deals__header {
    gap: 14px;
    margin-bottom: 20px;
    align-items: flex-start;
    flex-direction: column;
  }
  .ai-deals__header-left {
    width: 100%;
    gap: 10px;
  }
  .ai-deals__title {
    font-size: 18px;
  }
  .ai-deals__subtitle {
    font-size: 11.5px;
  }
  .ai-deals__countdown {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .ai-deals {
    padding: 22px 0;
  }
  .ai-deals__nav {
    display: none;
  }
  .ai-deals__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .ai-deals__header-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .ai-deals__header-left > div {
    width: 100%;
  }
  .ai-deals__badge {
    padding: 5px 11px;
    font-size: 9.5px;
    letter-spacing: 1px;
  }
  .ai-deals__title {
    font-size: 15px;
    line-height: 1.35;
  }
  .ai-deals__subtitle {
    font-size: 10.5px;
    line-height: 1.6;
  }
  .ai-deals__countdown {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 8px 14px;
    gap: 8px;
  }
  .ai-deals__countdown-label {
    display: none;
  }
  .ai-deals__countdown-boxes {
    gap: 4px;
    justify-content: center;
  }
  .ai-deals__countdown-box {
    min-width: 34px;
    padding: 4px 6px;
  }
  .ai-deals__countdown-num {
    font-size: 14px;
  }
  .ai-deals__countdown-unit {
    font-size: 8.5px;
  }
  .ai-deals__countdown-sep {
    font-size: 14px;
  }
  .ai-deals__glow--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: -60px;
    filter: blur(60px);
  }
  .ai-deals__glow--2 {
    width: 220px;
    height: 220px;
    bottom: -80px;
    left: -60px;
    filter: blur(60px);
  }
  .ai-deals__item-link {
    padding: 14px 10px 12px !important;
    border-radius: 16px !important;
  }
  .ai-deals__item-img {
    width: 84px !important;
    height: 84px !important;
    margin: 6px auto 10px !important;
  }
  .ai-deals__item-img img {
    border-radius: 18px !important;
  }
  .ai-deals__item-body {
    gap: 4px;
  }
  .ai-deals__item-tag {
    font-size: 9px;
    padding: 2px 7px;
  }
  .ai-deals__item-title {
    font-size: 13px;
    line-height: 1.35;
    margin: 2px 0 2px;
  }
  .ai-deals__item-price {
    margin-top: 4px;
    align-items: center;
  }
  .ai-deals__item-price-old {
    font-size: 10.5px;
  }
  .ai-deals__item-price-new {
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ai-deals__item-price-new span {
    font-size: 9.5px;
  }
  .ai-deals__item-discount {
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 8px;
  }
  .ai-deals__item-flame {
    top: 10px;
    left: 10px;
    padding: 3px 7px;
    font-size: 9px;
  }
  .ai-deals__item-flame svg {
    width: 11px;
    height: 11px;
  }
  .ai-deals__item-cta {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 7px 14px !important;
    margin: 8px auto 0 !important;
    font-size: 11px !important;
    gap: 5px;
    border-radius: 10px !important;
  }
  .ai-deals__item-cta svg {
    width: 12px;
    height: 12px;
  }
  .ai-deals__item-cta::before {
    content: "خرید";
    font-weight: 800;
  }
}
@media (max-width: 420px) {
  .ai-deals__title {
    font-size: 14px;
  }
  .ai-deals__countdown {
    padding: 6px 8px;
  }
  .ai-deals__countdown-box {
    min-width: 26px;
  }
  .ai-deals__countdown-num {
    font-size: 12px;
  }
  .ai-deals__item-img {
    width: 72px !important;
    height: 72px !important;
  }
  .ai-deals__item-title {
    font-size: 12px;
  }
  .ai-deals__item-price-new {
    font-size: 13px;
  }
}
@keyframes arp-orb-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.08);
  }
}
@keyframes arp-dot-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
.arzi-promo {
  position: relative;
  padding: 52px 0;
  margin-bottom: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at top right, rgba(34, 211, 238, 0.12) 0%, transparent 55%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.1) 0%, transparent 55%), linear-gradient(135deg, #0d0a35 0%, #140d4a 50%, #0a0730 100%);
  isolation: isolate;
}
.arzi-promo__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: arp-orb-drift 14s ease-in-out infinite;
}
.arzi-promo__orb--1 {
  top: -80px;
  right: 10%;
  width: 300px;
  height: 300px;
  background: rgba(91, 82, 240, 0.45);
}
.arzi-promo__orb--2 {
  bottom: -100px;
  left: 5%;
  width: 340px;
  height: 340px;
  background: rgba(34, 211, 238, 0.28);
  animation-delay: -7s;
}
.arzi-promo__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.arzi-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}
.arzi-promo__title {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.3;
}
.arzi-promo__title span {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  background: linear-gradient(90deg, #22d3ee, #5b52f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arzi-promo__desc {
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 22px;
  max-width: 520px;
}
.arzi-promo__features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arzi-promo__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.arzi-promo__features li div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.arzi-promo__features li strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.arzi-promo__features li span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  line-height: 1.6;
}
.arzi-promo__feature-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.arzi-promo__feature-ico--shield {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.arzi-promo__feature-ico--flash {
  background: rgba(251, 191, 36, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.arzi-promo__feature-ico--support {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.3);
}
.arzi-promo__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.arzi-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.arzi-promo__cta--primary {
  background: linear-gradient(135deg, #5b52f0 0%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.45);
}
.arzi-promo__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(91, 82, 240, 0.6);
}
.arzi-promo__cta--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.arzi-promo__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.arzi-promo__preview {
  display: flex;
  justify-content: center;
}
.arzi-promo__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.arzi-promo__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.arzi-promo__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.arzi-promo__card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 11px;
  font-weight: 700;
}
.arzi-promo__card-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.arzi-promo__card-rates-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.arzi-promo__rate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arzi-promo__rate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.arzi-promo__rate img {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.arzi-promo__rate > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.arzi-promo__rate > div strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.arzi-promo__rate > div small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10.5px;
  direction: ltr;
}
.arzi-promo__rate:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(34, 211, 238, 0.25);
  transform: translateX(3px);
}
.arzi-promo__rate-price {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.arzi-promo__card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.arzi-promo__card-foot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: arp-dot-pulse 1.6s ease-in-out infinite;
}

@media (max-width: 991px) {
  .arzi-promo {
    padding: 36px 0 32px;
  }
  .arzi-promo__orb--1 {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -80px;
  }
  .arzi-promo__orb--2 {
    width: 240px;
    height: 240px;
    bottom: -80px;
    left: -80px;
  }
  .arzi-promo__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .arzi-promo__title {
    font-size: 22px;
  }
  .arzi-promo__title span {
    font-size: 14px;
  }
  .arzi-promo__desc {
    font-size: 12.5px;
    margin-bottom: 18px;
    max-width: 100%;
  }
  .arzi-promo__features {
    gap: 9px;
    margin-bottom: 20px;
  }
  .arzi-promo__feature-ico {
    width: 32px;
    height: 32px;
  }
  .arzi-promo__preview {
    justify-content: stretch;
  }
  .arzi-promo__card {
    max-width: 100%;
    padding: 18px;
  }
}
@media (max-width: 576px) {
  .arzi-promo {
    padding: 28px 0 24px;
  }
  .arzi-promo__orb--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: -60px;
    filter: blur(50px);
  }
  .arzi-promo__orb--2 {
    width: 180px;
    height: 180px;
    bottom: -60px;
    left: -60px;
    filter: blur(50px);
  }
  .arzi-promo__eyebrow {
    padding: 5px 11px;
    font-size: 10.5px;
    margin-bottom: 12px;
  }
  .arzi-promo__title {
    font-size: 19px;
    line-height: 1.35;
    margin-bottom: 10px;
  }
  .arzi-promo__title span {
    font-size: 12.5px;
  }
  .arzi-promo__desc {
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 16px;
  }
  .arzi-promo__features {
    gap: 8px;
    margin-bottom: 16px;
  }
  .arzi-promo__features li {
    gap: 10px;
  }
  .arzi-promo__features strong {
    font-size: 12px;
  }
  .arzi-promo__features span {
    font-size: 10.5px;
    line-height: 1.55;
  }
  .arzi-promo__feature-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .arzi-promo__feature-ico svg {
    width: 14px;
    height: 14px;
  }
  .arzi-promo__actions {
    gap: 8px;
  }
  .arzi-promo__cta {
    padding: 10px 16px;
    font-size: 12px;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .arzi-promo__card {
    padding: 16px;
    border-radius: 18px;
  }
  .arzi-promo__card::before {
    border-radius: 18px;
  }
  .arzi-promo__card-head {
    margin-bottom: 14px;
  }
  .arzi-promo__card-chip {
    padding: 4px 9px;
    font-size: 10px;
  }
  .arzi-promo__card-rates-title {
    font-size: 10.5px;
    margin-bottom: 8px;
  }
  .arzi-promo__rate {
    padding: 8px 10px;
    gap: 10px;
    border-radius: 10px;
  }
  .arzi-promo__rate img {
    width: 24px;
    height: 17px;
  }
  .arzi-promo__rate > div strong {
    font-size: 12px;
  }
  .arzi-promo__rate > div small {
    font-size: 9.5px;
  }
  .arzi-promo__rate-price {
    font-size: 12.5px;
  }
  .arzi-promo__card-foot {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 10px;
    line-height: 1.5;
  }
}
.socials {
  position: relative;
  padding: 16px 0 56px;
  margin-bottom: 20px;
  overflow: hidden;
}
.socials__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.socials__bg-orb--1 {
  width: 380px;
  height: 380px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, #dd2a7b, transparent 70%);
}
.socials__bg-orb--2 {
  width: 360px;
  height: 360px;
  bottom: -180px;
  left: -100px;
  background: radial-gradient(circle, #29b6f6, transparent 70%);
}
.socials .container {
  position: relative;
  z-index: 1;
}
.socials__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 30px;
}
.socials__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(221, 42, 123, 0.12), rgba(41, 182, 246, 0.12));
  border: 1px solid rgba(221, 42, 123, 0.3);
  color: #dd2a7b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.socials__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.socials__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  line-height: 1.7;
}
.socials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 991px) {
  .socials__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 575px) {
  .socials {
    padding: 10px 0 36px;
  }
  .socials__title {
    font-size: 19px;
  }
  .socials__subtitle {
    font-size: 11.5px;
  }
  .socials__header {
    margin-bottom: 18px;
    padding: 0 15px;
  }
  .socials__eyebrow {
    font-size: 9.5px;
    padding: 4px 11px;
    margin-bottom: 8px;
  }
  .socials__grid {
    gap: 12px;
    padding: 0 15px;
  }
}

.social-card {
  --soc-c1: #8b5cf6;
  --soc-c2: #6d28d9;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 18px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 22px -14px rgba(15, 11, 72, 0.18);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.social-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 42px -18px rgba(var(--soc-c1-rgb, 139, 92, 246), 0.4);
  border-color: rgba(var(--soc-c1-rgb, 139, 92, 246), 0.3);
  color: inherit;
}
.social-card:hover .social-card__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
}
.social-card:hover .social-card__icon {
  transform: scale(1.06) rotate(-4deg);
}
.social-card:hover .social-card__cta {
  background: linear-gradient(135deg, var(--soc-c1), var(--soc-c2));
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--soc-c1-rgb, 139, 92, 246), 0.55);
}
.social-card:hover .social-card__cta svg {
  transform: translateX(-3px);
}
.social-card__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 280px;
  height: 140px;
  background: radial-gradient(ellipse at center, var(--soc-c1) 0%, transparent 65%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.55;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.social-card__icon {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--soc-c1) 0%, var(--soc-c2) 100%);
  color: #fff;
  margin: 0 auto 18px;
  box-shadow: 0 16px 28px -10px rgba(var(--soc-c1-rgb, 139, 92, 246), 0.6);
  transition: transform 0.45s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.social-card__icon svg {
  width: 50px;
  height: 50px;
}
.social-card__body {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  margin-bottom: 16px;
  text-align: center;
}
.social-card__platform {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soc-c1);
  margin-bottom: 4px;
}
.social-card__handle {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #0f0b48;
  margin-bottom: 8px;
  direction: ltr;
  letter-spacing: -0.01em;
}
.social-card__desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  line-height: 1.7;
}
.social-card__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.social-card__count {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.social-card__count strong {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
}
.social-card__count span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
  margin-top: 2px;
}
.social-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(var(--soc-c1-rgb, 139, 92, 246), 0.1);
  color: var(--soc-c1);
  font-size: 11.5px;
  font-weight: 800;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.social-card__cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.social-card--ig {
  --soc-c1: #dd2a7b;
  --soc-c2: #8134af;
  --soc-c1-rgb: 221, 42, 123;
}
.social-card--ig .social-card__icon {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}
.social-card--tg {
  --soc-c1: #0088cc;
  --soc-c2: #006699;
  --soc-c1-rgb: 0, 136, 204;
}
.social-card--tg .social-card__icon {
  background: linear-gradient(135deg, #29b6f6 0%, #0088cc 100%);
}
.social-card--yt {
  --soc-c1: #ff5252;
  --soc-c2: #c62828;
  --soc-c1-rgb: 255, 82, 82;
}
.social-card--yt .social-card__icon {
  background: linear-gradient(135deg, #ff5252 0%, #c62828 100%);
}
@media (max-width: 575px) {
  .social-card {
    padding: 18px 16px 14px;
    border-radius: 18px;
  }
  .social-card__icon {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    margin: 0 auto 14px;
  }
  .social-card__icon svg {
    width: 42px !important;
    height: 42px !important;
  }
  .social-card__platform {
    font-size: 9.5px;
  }
  .social-card__handle {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .social-card__desc {
    font-size: 11px;
    line-height: 1.6;
  }
  .social-card__body {
    margin-bottom: 12px;
  }
  .social-card__foot {
    padding-top: 11px;
    gap: 8px;
  }
  .social-card__count strong {
    font-size: 13.5px;
  }
  .social-card__count span {
    font-size: 9.5px;
  }
  .social-card__cta {
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 5px;
  }
  .social-card__cta svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.cat-intro {
  padding: 40px 0 36px;
  margin-bottom: 18px;
}
.cat-intro__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 26px;
}
.cat-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(91, 82, 240, 0.08);
  border: 1px solid rgba(91, 82, 240, 0.2);
  color: #5b52f0;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 10px;
}
.cat-intro__title {
  font-size: 20px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.cat-intro__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.cat-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-intro__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 6px 20px rgba(15, 11, 72, 0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cat-intro__card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c1) 28%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.5s ease, opacity 0.4s ease;
  opacity: 0.75;
}
.cat-intro__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  z-index: 1;
}
.cat-intro__card > * {
  position: relative;
  z-index: 2;
}
.cat-intro__card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c1) 35%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--c1) 20%, transparent), 0 10px 20px rgba(15, 11, 72, 0.08);
}
.cat-intro__card:hover::before {
  transform: scale(1.15);
  opacity: 1;
}
.cat-intro__card:hover .cat-intro__card-ico {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--c1) 45%, transparent);
}
.cat-intro__card:hover .cat-intro__card-arrow {
  transform: translateX(-4px);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  border-color: transparent;
}
.cat-intro__card:hover .cat-intro__card-title {
  color: var(--c1);
}
.cat-intro__card-ico {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 35%, transparent);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.cat-intro__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-intro__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cat-intro__card-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.cat-intro__card-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--c1);
  background: color-mix(in srgb, var(--c1) 10%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.cat-intro__card-desc {
  font-size: 12px;
  line-height: 1.85;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-intro__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.cat-intro__card-tags span {
  padding: 3px 9px;
  background: color-mix(in srgb, var(--c1) 8%, transparent);
  color: var(--c1);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  direction: ltr;
}
.cat-intro__card-arrow {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c1) 20%, transparent);
  color: var(--c1);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 3;
}

[data-theme=dark] .cat-intro__title {
  color: #e4e1ff;
}
[data-theme=dark] .cat-intro__subtitle {
  color: rgba(199, 197, 238, 0.55);
}
[data-theme=dark] .cat-intro__eyebrow {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
}
[data-theme=dark] .cat-intro__card {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .cat-intro__card:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .cat-intro__card-title {
  color: #fff;
}
[data-theme=dark] .cat-intro__card-desc {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .cat-intro__card-arrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 991px) {
  .cat-intro__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-intro__card:last-child {
    grid-column: span 2;
  }
}
@media (max-width: 767px) {
  .cat-intro {
    padding: 24px 0 20px;
    margin-bottom: 14px;
  }
  .cat-intro__header {
    margin-bottom: 18px;
  }
  .cat-intro__title {
    font-size: 16px;
  }
  .cat-intro__subtitle {
    font-size: 11.5px;
  }
  .cat-intro__eyebrow {
    font-size: 10.5px;
    padding: 4px 10px;
  }
  .cat-intro__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cat-intro__card:last-child {
    grid-column: auto;
  }
  .cat-intro__card {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 14px;
    align-items: center;
  }
  .cat-intro__card-ico {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
  }
  .cat-intro__card-ico svg {
    width: 22px;
    height: 22px;
  }
  .cat-intro__card-body {
    gap: 4px;
  }
  .cat-intro__card-head {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .cat-intro__card-title {
    font-size: 13.5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-intro__card-count {
    font-size: 9.5px;
    padding: 2px 7px;
  }
  .cat-intro__card-desc {
    display: none;
  }
  .cat-intro__card-tags {
    display: none;
  }
  .cat-intro__card-arrow {
    position: static;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
    align-self: center;
  }
  .cat-intro__card-arrow svg {
    width: 12px;
    height: 12px;
  }
}
.edu-intro {
  position: relative;
  padding: 48px 0 36px;
  margin-bottom: 18px;
  overflow: hidden;
}
.edu-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.edu-intro__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
}
.edu-intro__shape--1 {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, #5b52f0 0%, transparent 70%);
}
.edu-intro__shape--2 {
  width: 260px;
  height: 260px;
  bottom: -100px;
  left: -60px;
  background: radial-gradient(circle, #00c389 0%, transparent 70%);
  opacity: 0.28;
}
.edu-intro__shape--3 {
  width: 180px;
  height: 180px;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
  opacity: 0.18;
}
.edu-intro .container {
  position: relative;
  z-index: 1;
}
.edu-intro__wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 255, 0.95));
  border: 1px solid rgba(91, 82, 240, 0.12);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px -20px rgba(15, 11, 72, 0.12), 0 8px 20px -10px rgba(15, 11, 72, 0.08);
}
.edu-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.1), rgba(0, 195, 137, 0.1));
  border: 1px solid rgba(91, 82, 240, 0.2);
  color: #5b52f0;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 14px;
}
.edu-intro__title {
  font-size: 26px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 12px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.edu-intro__title-accent {
  background: linear-gradient(135deg, #5b52f0 0%, #00c389 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.edu-intro__subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.65);
  margin: 0 0 20px;
  line-height: 1.85;
}
.edu-intro__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.edu-intro__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.85);
}
.edu-intro__feature-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #00c389, #00a775);
  color: #fff;
  flex-shrink: 0;
}
.edu-intro__cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.edu-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.edu-intro__cta--primary {
  background: linear-gradient(135deg, #5b52f0 0%, #3e34d6 100%);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(91, 82, 240, 0.5);
}
.edu-intro__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -8px rgba(91, 82, 240, 0.55);
  color: #fff;
}
.edu-intro__cta--ghost {
  background: rgba(15, 11, 72, 0.05);
  color: #0f0b48;
  border: 1px solid rgba(15, 11, 72, 0.1);
}
.edu-intro__cta--ghost:hover {
  background: rgba(15, 11, 72, 0.09);
  color: #0f0b48;
}
.edu-intro__right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.edu-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.edu-intro__stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.07);
  border-radius: 14px;
  box-shadow: 0 4px 10px -4px rgba(15, 11, 72, 0.06);
  transition: transform 0.25s ease;
}
.edu-intro__stat:hover {
  transform: translateY(-2px);
}
.edu-intro__stat-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.edu-intro__stat-ico--blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.edu-intro__stat-ico--green {
  background: linear-gradient(135deg, #10b981, #059669);
}
.edu-intro__stat-ico--orange {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.edu-intro__stat-ico--purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.edu-intro__stat-body {
  display: flex;
  flex-direction: column;
}
.edu-intro__stat-num {
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  line-height: 1.2;
  margin-bottom: 2px;
}
.edu-intro__stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.edu-intro__brands {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(15, 11, 72, 0.03);
  border: 1px dashed rgba(15, 11, 72, 0.12);
  border-radius: 12px;
  flex-wrap: wrap;
}
.edu-intro__brands-label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  flex-shrink: 0;
}
.edu-intro__brands-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edu-intro__brand {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #0f0b48;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
}
@media (max-width: 991px) {
  .edu-intro {
    padding: 34px 0 28px;
  }
  .edu-intro__wrap {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 22px;
  }
  .edu-intro__title {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .edu-intro {
    padding: 20px 0 16px;
    margin-bottom: 12px;
  }
  .edu-intro__wrap {
    gap: 16px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .edu-intro__eyebrow {
    font-size: 10px;
    padding: 5px 11px;
    margin-bottom: 10px;
  }
  .edu-intro__title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .edu-intro__subtitle {
    font-size: 11.5px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
  .edu-intro__features {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 16px;
  }
  .edu-intro__feature {
    font-size: 11px;
    gap: 6px;
  }
  .edu-intro__feature-ico {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }
  .edu-intro__feature-ico svg {
    width: 14px !important;
    height: 14px !important;
  }
  .edu-intro__cta-wrap {
    gap: 8px;
  }
  .edu-intro__cta {
    padding: 10px 14px;
    font-size: 11.5px;
    flex: 1;
    justify-content: center;
  }
  .edu-intro__cta svg {
    width: 12px !important;
    height: 12px !important;
  }
  .edu-intro__right {
    gap: 14px;
  }
  .edu-intro__stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .edu-intro__stat {
    padding: 10px 10px;
    gap: 9px;
    border-radius: 12px;
  }
  .edu-intro__stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .edu-intro__stat-ico svg {
    width: 18px !important;
    height: 18px !important;
  }
  .edu-intro__stat-num {
    font-size: 13.5px;
  }
  .edu-intro__stat-label {
    font-size: 10px;
  }
  .edu-intro__brands {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 10px;
  }
  .edu-intro__brands-label {
    font-size: 10px;
  }
  .edu-intro__brand {
    font-size: 10px;
    padding: 3px 8px;
  }
}

.edu-sites {
  padding: 14px 0 44px;
  margin-bottom: 20px;
}
.edu-sites__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.edu-sites__header-titles {
  max-width: 640px;
}
.edu-sites__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.12), rgba(0, 195, 137, 0.12));
  border: 1px solid rgba(91, 82, 240, 0.25);
  color: #5b52f0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.edu-sites__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.edu-sites__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.edu-sites__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.edu-sites__more:hover {
  background: rgba(91, 82, 240, 0.14);
  color: #5b52f0;
  transform: translateX(-2px);
}
.edu-sites__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 991px) {
  .edu-sites__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 575px) {
  .edu-sites {
    padding: 10px 0 32px;
  }
  .edu-sites__title {
    font-size: 19px;
  }
  .edu-sites__subtitle {
    font-size: 11.5px;
  }
  .edu-sites__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .edu-sites__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .edu-sites__more {
    padding: 7px 12px;
    font-size: 11px;
  }
}

.edu-card {
  --edu-c1: #5b52f0;
  --edu-c2: #3e34d6;
  position: relative;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 24px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  isolation: isolate;
}
.edu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -20px rgba(15, 11, 72, 0.3);
  border-color: rgba(var(--edu-c1-rgb, 91, 82, 240), 0.2);
}
.edu-card:hover .edu-card__banner::before {
  opacity: 0.35;
}
.edu-card:hover .edu-card__logo {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
}
.edu-card:hover .edu-card__buy {
  background: var(--edu-c1);
  color: #fff;
}
.edu-card:hover .edu-card__buy svg {
  transform: translateX(-3px);
}
.edu-card__banner {
  position: relative;
  height: 110px;
  background: linear-gradient(135deg, var(--edu-c1), var(--edu-c2));
  overflow: hidden;
}
.edu-card__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.25), transparent 60%);
  opacity: 0.25;
  transition: opacity 0.4s ease;
}
.edu-card__banner-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.edu-card__banner-shape--1 {
  width: 140px;
  height: 140px;
  top: -50px;
  right: -30px;
}
.edu-card__banner-shape--2 {
  width: 70px;
  height: 70px;
  bottom: -25px;
  left: 20%;
  background: rgba(255, 255, 255, 0.08);
}
.edu-card__banner-shape--3 {
  width: 40px;
  height: 40px;
  top: 25%;
  left: 55%;
  background: rgba(255, 255, 255, 0.15);
}
.edu-card__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.03em;
}
.edu-card__flag--best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.edu-card__flag--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.edu-card__flag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.edu-card__logo {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--edu-c1);
  box-shadow: 0 10px 22px -10px rgba(15, 11, 72, 0.25), 0 0 0 4px white;
  margin: 0;
  transition: transform 0.35s ease;
}
.edu-card__body {
  padding: 46px 20px 18px;
  text-align: center;
}
.edu-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 26px;
}
.edu-card__name {
  font-size: 18px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.edu-card__rate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  font-size: 11px;
  font-weight: 800;
}
.edu-card__desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 10px 0 14px;
  line-height: 1.75;
  min-height: 42px;
}
.edu-card__meta {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.edu-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(15, 11, 72, 0.04);
  color: rgba(15, 11, 72, 0.75);
  font-size: 11px;
  font-weight: 700;
}
.edu-card__meta-item svg {
  color: var(--edu-c1);
  flex-shrink: 0;
}
.edu-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 12px;
  margin-bottom: 14px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.edu-card__tags span {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(var(--edu-c1-rgb, 91, 82, 240), 0.08), rgba(var(--edu-c2-rgb, 62, 52, 214), 0.08));
  color: var(--edu-c1);
  border: 1px solid rgba(var(--edu-c1-rgb, 91, 82, 240), 0.1);
}
.edu-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
}
.edu-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.edu-card__price-from {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-bottom: 4px;
}
.edu-card__price-val {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
}
.edu-card__price-val span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 3px;
}
.edu-card__buy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(var(--edu-c1-rgb, 91, 82, 240), 0.1);
  color: var(--edu-c1);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.edu-card__buy svg {
  transition: transform 0.25s ease;
}
.edu-card__buy:hover {
  background: var(--edu-c1);
  color: #fff;
}
@media (max-width: 575px) {
  .edu-card {
    border-radius: 18px;
  }
  .edu-card__banner {
    height: 74px;
  }
  .edu-card__flag {
    font-size: 9.5px;
    padding: 4px 9px;
    top: 12px;
    left: 12px;
  }
  .edu-card__logo {
    width: 72px;
    height: 72px;
    top: 36px;
    border-radius: 20px;
    box-shadow: 0 10px 22px -8px rgba(15, 11, 72, 0.3);
  }
  .edu-card__logo svg {
    width: 32px !important;
    height: 32px !important;
  }
  .edu-card__body {
    padding: 50px 16px 14px;
    text-align: center;
  }
  .edu-card__head {
    padding-left: 0;
    min-height: auto;
    justify-content: center;
  }
  .edu-card__name {
    font-size: 16px;
  }
  .edu-card__desc {
    font-size: 11px;
    line-height: 1.65;
    margin: 8px 0 10px;
    min-height: auto;
  }
  .edu-card__meta {
    gap: 6px;
    margin-bottom: 10px;
  }
  .edu-card__meta-item {
    font-size: 10px;
    padding: 4px 8px;
  }
  .edu-card__meta-item svg {
    width: 11px !important;
    height: 11px !important;
  }
  .edu-card__tags {
    padding-top: 10px;
    margin-bottom: 10px;
    gap: 4px;
  }
  .edu-card__tags span {
    font-size: 10px;
    padding: 3px 8px;
  }
  .edu-card__price-row {
    padding-top: 10px;
    gap: 8px;
  }
  .edu-card__price-from {
    font-size: 9.5px;
  }
  .edu-card__price-val {
    font-size: 13.5px;
  }
  .edu-card__price-val span {
    font-size: 9.5px;
  }
  .edu-card__buy {
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 4px;
  }
  .edu-card__buy svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.adobe-intro {
  position: relative;
  padding: 48px 0 40px;
  margin-bottom: 20px;
  overflow: hidden;
}
.adobe-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.adobe-intro__grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.adobe-intro__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.adobe-intro__glow--1 {
  width: 420px;
  height: 420px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(250, 15, 0, 0.55), transparent 70%);
}
.adobe-intro__glow--2 {
  width: 360px;
  height: 360px;
  bottom: -140px;
  left: -100px;
  background: radial-gradient(circle, rgba(255, 110, 64, 0.4), transparent 70%);
}
.adobe-intro .container {
  position: relative;
  z-index: 1;
}
.adobe-intro__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #0a0a12 0%, #14141f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  padding: 44px 38px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(250, 15, 0, 0.08) inset;
  color: #f6f7fb;
}
.adobe-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250, 15, 0, 0.14);
  border: 1px solid rgba(250, 15, 0, 0.35);
  color: #ff4a3e;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.adobe-intro__title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.adobe-intro__title-accent {
  background: linear-gradient(135deg, #fa0f00 0%, #ff6e40 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.adobe-intro__subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 22px;
  line-height: 1.9;
}
.adobe-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.adobe-intro__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  font-weight: 700;
}
.adobe-intro__chip svg {
  color: #ff4a3e;
  flex-shrink: 0;
}
.adobe-intro__cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.adobe-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.adobe-intro__cta--primary {
  background: linear-gradient(135deg, #fa0f00 0%, #b4140b 100%);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(250, 15, 0, 0.6);
}
.adobe-intro__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(250, 15, 0, 0.7);
  color: #fff;
}
.adobe-intro__cta--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.adobe-intro__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.adobe-intro__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.adobe-intro__logo-cloud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.adobe-intro__logo-item {
  --lc: #fff;
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--lc);
  background: linear-gradient(135deg, rgba(var(--lc-rgb, 255, 255, 255), 0.08), rgba(255, 255, 255, 0.02));
  border: 1.5px solid var(--lc);
  border-radius: 14px;
  box-shadow: 0 0 20px -6px var(--lc), inset 0 0 20px -8px var(--lc);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  letter-spacing: -0.02em;
  direction: ltr;
}
.adobe-intro__logo-item:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 30px -4px var(--lc), inset 0 0 26px -6px var(--lc);
}
.adobe-intro__badge-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(250, 15, 0, 0.15), rgba(255, 110, 64, 0.08));
  border: 1px solid rgba(250, 15, 0, 0.35);
  border-radius: 16px;
}
.adobe-intro__badge-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fa0f00, #b4140b);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 10px 20px -8px rgba(250, 15, 0, 0.5);
}
.adobe-intro__badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}
.adobe-intro__badge-title {
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}
.adobe-intro__badge-desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.adobe-intro__badge-discount {
  padding: 6px 10px;
  background: #fff;
  color: #fa0f00;
  font-size: 11.5px;
  font-weight: 900;
  border-radius: 8px;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .adobe-intro {
    padding: 36px 0 30px;
  }
  .adobe-intro__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 24px;
  }
  .adobe-intro__title {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .adobe-intro {
    padding: 20px 0 16px;
    margin-bottom: 12px;
  }
  .adobe-intro__wrap {
    gap: 16px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .adobe-intro__eyebrow {
    font-size: 10px;
    padding: 5px 11px;
    margin-bottom: 10px;
    gap: 5px;
  }
  .adobe-intro__eyebrow svg {
    width: 12px !important;
    height: 12px !important;
  }
  .adobe-intro__title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .adobe-intro__subtitle {
    font-size: 11.5px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
  .adobe-intro__chips {
    gap: 6px;
    margin-bottom: 16px;
  }
  .adobe-intro__chip {
    font-size: 10.5px;
    padding: 6px 10px;
    gap: 5px;
  }
  .adobe-intro__chip svg {
    width: 11px !important;
    height: 11px !important;
  }
  .adobe-intro__cta-wrap {
    gap: 8px;
  }
  .adobe-intro__cta {
    padding: 10px 14px;
    font-size: 11.5px;
    flex: 1;
    justify-content: center;
  }
  .adobe-intro__cta svg {
    width: 12px !important;
    height: 12px !important;
  }
  .adobe-intro__right {
    gap: 12px;
  }
  .adobe-intro__logo-cloud {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .adobe-intro__logo-item {
    font-size: 15px;
    border-radius: 9px;
    border-width: 1.2px;
  }
  .adobe-intro__badge-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 12px;
  }
  .adobe-intro__badge-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .adobe-intro__badge-ico svg {
    width: 20px !important;
    height: 20px !important;
  }
  .adobe-intro__badge-title {
    font-size: 12px;
  }
  .adobe-intro__badge-desc {
    font-size: 10px;
  }
  .adobe-intro__badge-discount {
    font-size: 10px;
    padding: 5px 8px;
    white-space: nowrap;
  }
}

.adobe-products {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.adobe-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.adobe-products__header-titles {
  max-width: 640px;
}
.adobe-products__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(250, 15, 0, 0.08);
  border: 1px solid rgba(250, 15, 0, 0.22);
  color: #fa0f00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.adobe-products__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.adobe-products__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.adobe-products__filter {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.adobe-products__filter-btn {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.adobe-products__filter-btn:hover {
  color: #0f0b48;
}
.adobe-products__filter-btn--active {
  background: #fff;
  color: #0f0b48;
  box-shadow: 0 2px 6px -2px rgba(15, 11, 72, 0.15);
}
.adobe-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .adobe-products__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .adobe-products__title {
    font-size: 19px;
  }
}
.adobe-products__bottom {
  margin-top: 6px;
}
.adobe-products__bundle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #0f0b48 0%, #1a1455 100%);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.adobe-products__bundle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(250, 15, 0, 0.25), transparent 55%), radial-gradient(circle at 10% 50%, rgba(255, 110, 64, 0.12), transparent 60%);
  pointer-events: none;
}
.adobe-products__bundle > * {
  position: relative;
  z-index: 1;
}
.adobe-products__bundle-ico {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fa0f00, #b4140b);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 10px 20px -8px rgba(250, 15, 0, 0.5);
}
.adobe-products__bundle-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
  min-width: 0;
}
.adobe-products__bundle-body strong {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}
.adobe-products__bundle-body span {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.adobe-products__bundle-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 10px;
  background: #fff;
  color: #0f0b48;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.adobe-products__bundle-cta:hover {
  transform: translateY(-2px);
  color: #0f0b48;
  box-shadow: 0 10px 20px -8px rgba(255, 255, 255, 0.3);
}
@media (max-width: 575px) {
  .adobe-products {
    padding: 10px 0 32px;
  }
  .adobe-products__title {
    font-size: 19px;
  }
  .adobe-products__subtitle {
    font-size: 11.5px;
  }
  .adobe-products__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .adobe-products__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .adobe-products__bundle {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    margin: 0 15px;
  }
  .adobe-products__bundle-ico {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }
  .adobe-products__bundle-ico svg {
    width: 22px !important;
    height: 22px !important;
  }
  .adobe-products__bundle-body strong {
    font-size: 12.5px;
  }
  .adobe-products__bundle-body span {
    font-size: 10.5px;
  }
  .adobe-products__bundle-cta {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 11.5px;
  }
}

.ad-card {
  --ad-c1: #fa0f00;
  --ad-c2: #b4140b;
  --ad-bg: #1a0000;
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 22px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 36px -18px rgba(15, 11, 72, 0.3);
  border-color: rgba(var(--ad-c1-rgb, 250, 15, 0), 0.2);
}
.ad-card:hover .ad-card__tile-logo {
  transform: scale(1.08) rotate(-3deg);
}
.ad-card:hover .ad-card__tile-glow {
  opacity: 1;
  transform: scale(1.15);
}
.ad-card:hover .ad-card__cta {
  background: var(--ad-c1);
  color: #fff;
  border-color: var(--ad-c1);
}
.ad-card__tile {
  position: relative;
  background: var(--ad-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-card__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(var(--ad-c1-rgb, 250, 15, 0), 0.18) 100%);
  pointer-events: none;
}
.ad-card__tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(var(--ad-c1-rgb, 250, 15, 0), 0.25);
  border-radius: 14px;
  pointer-events: none;
}
.ad-card__tile-logo {
  position: relative;
  z-index: 2;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 54px;
  font-weight: 900;
  color: var(--ad-c1);
  letter-spacing: -0.03em;
  text-shadow: 0 0 22px rgba(var(--ad-c1-rgb, 250, 15, 0), 0.35);
  direction: ltr;
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.ad-card__tile-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ad-c1) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.45;
  filter: blur(30px);
  transition: opacity 0.4s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.ad-card__body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ad-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ad-card__cat {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ad-c1);
  background: rgba(var(--ad-c1-rgb, 250, 15, 0), 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.ad-card__tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.ad-card__tag--pop {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ad-card__tag--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.ad-card__tag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.ad-card__name {
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ad-card__desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0 0 10px;
  line-height: 1.7;
}
.ad-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.ad-card__specs li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.65);
}
.ad-card__specs li i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ad-c1);
  display: inline-block;
}
.ad-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.ad-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ad-card__price del {
  font-size: 10.5px;
  color: rgba(15, 11, 72, 0.38);
  font-weight: 600;
  margin-bottom: 2px;
}
.ad-card__price strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #0f0b48;
}
.ad-card__price strong span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 2px;
}
.ad-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(var(--ad-c1-rgb, 250, 15, 0), 0.35);
  color: var(--ad-c1);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ad-card__cta:hover {
  transform: translateY(-1px);
}
@media (max-width: 575px) {
  .ad-card {
    grid-template-columns: 120px 1fr;
    border-radius: 16px;
  }
  .ad-card__tile-logo {
    font-size: 46px;
  }
  .ad-card__body {
    padding: 14px 14px 12px;
  }
  .ad-card__top {
    gap: 6px;
    margin-bottom: 4px;
  }
  .ad-card__cat {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .ad-card__tag {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .ad-card__name {
    font-size: 14.5px;
    margin-bottom: 4px;
  }
  .ad-card__desc {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.6;
  }
  .ad-card__specs {
    margin-bottom: 10px;
    gap: 3px 8px;
  }
  .ad-card__specs li {
    font-size: 10px;
  }
  .ad-card__foot {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 8px;
  }
  .ad-card__price del {
    font-size: 10px;
  }
  .ad-card__price strong {
    font-size: 13px;
  }
  .ad-card__price strong span {
    font-size: 9.5px;
  }
  .ad-card__cta {
    padding: 7px 10px;
    font-size: 10px;
    gap: 3px;
  }
  .ad-card__cta svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.ms-intro {
  position: relative;
  padding: 48px 0 40px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ms-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ms-intro__mesh {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 164, 239, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 164, 239, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.ms-intro__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ms-intro__glow--1 {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(0, 120, 212, 0.5), transparent 70%);
}
.ms-intro__glow--2 {
  width: 360px;
  height: 360px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(127, 186, 0, 0.3), transparent 70%);
}
.ms-intro__glow--3 {
  width: 220px;
  height: 220px;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, rgba(255, 185, 0, 0.2), transparent 70%);
}
.ms-intro .container {
  position: relative;
  z-index: 1;
}
.ms-intro__wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #050817 0%, #0b1330 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  padding: 44px 38px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 120, 212, 0.08) inset;
  color: #f6f7fb;
}
.ms-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 120, 212, 0.15);
  border: 1px solid rgba(0, 120, 212, 0.35);
  color: #5fc6ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.ms-intro__eyebrow-logo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  width: 14px;
  height: 14px;
}
.ms-intro__eyebrow-logo i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
}
.ms-intro__title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.ms-intro__title-accent {
  background: linear-gradient(135deg, #00a4ef 0%, #7fba00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-intro__subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 22px;
  line-height: 1.9;
}
.ms-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.ms-intro__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  font-weight: 700;
}
.ms-intro__chip svg {
  color: #00a4ef;
  flex-shrink: 0;
}
.ms-intro__cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ms-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ms-intro__cta--primary {
  background: linear-gradient(135deg, #0078d4 0%, #00a4ef 100%);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(0, 120, 212, 0.6);
}
.ms-intro__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(0, 120, 212, 0.75);
  color: #fff;
}
.ms-intro__cta--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ms-intro__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ms-intro__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ms-intro__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ms-intro__tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ms-intro__tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
}
.ms-intro__tile-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ms-intro__tile-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ms-intro__tile-body strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}
.ms-intro__tile-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.ms-intro__tile--win .ms-intro__tile-ico {
  background: linear-gradient(135deg, #0078d4, #00a4ef);
}
.ms-intro__tile--office .ms-intro__tile-ico {
  background: linear-gradient(135deg, #d83b01, #a52d00);
}
.ms-intro__tile--xbox .ms-intro__tile-ico {
  background: linear-gradient(135deg, #107c10, #0b5a0b);
}
.ms-intro__tile--azure .ms-intro__tile-ico {
  background: linear-gradient(135deg, #0089d6, #0070b0);
}
.ms-intro__stat {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.18), rgba(0, 164, 239, 0.08));
  border: 1px solid rgba(0, 164, 239, 0.25);
  border-radius: 14px;
}
.ms-intro__stat-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.ms-intro__stat-num strong {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #5fc6ff, #7fba00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-intro__stat-num span {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.ms-intro__stat-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ms-intro__stat-bar i {
  display: block;
  height: 100%;
  width: 85%;
  background: linear-gradient(90deg, #0078d4, #00a4ef, #7fba00);
  border-radius: 99px;
}
@media (max-width: 991px) {
  .ms-intro {
    padding: 36px 0 30px;
  }
  .ms-intro__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 24px;
  }
  .ms-intro__title {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .ms-intro {
    padding: 20px 0 16px;
    margin-bottom: 12px;
  }
  .ms-intro__wrap {
    gap: 16px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .ms-intro__eyebrow {
    font-size: 10px;
    padding: 5px 11px;
    margin-bottom: 10px;
    gap: 6px;
  }
  .ms-intro__eyebrow-logo {
    width: 12px;
    height: 12px;
  }
  .ms-intro__title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .ms-intro__subtitle {
    font-size: 11.5px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
  .ms-intro__chips {
    gap: 6px;
    margin-bottom: 16px;
  }
  .ms-intro__chip {
    font-size: 10.5px;
    padding: 6px 10px;
    gap: 5px;
  }
  .ms-intro__chip svg {
    width: 11px !important;
    height: 11px !important;
  }
  .ms-intro__cta-wrap {
    gap: 8px;
  }
  .ms-intro__cta {
    padding: 10px 14px;
    font-size: 11.5px;
    flex: 1;
    justify-content: center;
  }
  .ms-intro__cta svg {
    width: 12px !important;
    height: 12px !important;
  }
  .ms-intro__right {
    gap: 12px;
  }
  .ms-intro__tiles {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ms-intro__tile {
    padding: 10px 12px;
    gap: 9px;
    border-radius: 12px;
  }
  .ms-intro__tile-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .ms-intro__tile-ico svg {
    width: 18px !important;
    height: 18px !important;
  }
  .ms-intro__tile-body strong {
    font-size: 11.5px;
  }
  .ms-intro__tile-body span {
    font-size: 10px;
  }
  .ms-intro__stat {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .ms-intro__stat-num {
    gap: 6px;
    margin-bottom: 8px;
  }
  .ms-intro__stat-num strong {
    font-size: 18px;
  }
  .ms-intro__stat-num span {
    font-size: 10.5px;
  }
  .ms-intro__stat-bar {
    height: 4px;
  }
}

.ms-products {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.ms-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.ms-products__header-titles {
  max-width: 640px;
}
.ms-products__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 120, 212, 0.08);
  border: 1px solid rgba(0, 120, 212, 0.22);
  color: #0078d4;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ms-products__badge-logo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  width: 12px;
  height: 12px;
}
.ms-products__badge-logo i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
}
.ms-products__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ms-products__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.ms-products__filter {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.ms-products__filter-btn {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ms-products__filter-btn:hover {
  color: #0f0b48;
}
.ms-products__filter-btn--active {
  background: #fff;
  color: #0078d4;
  box-shadow: 0 2px 6px -2px rgba(15, 11, 72, 0.15);
}
.ms-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .ms-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .ms-products {
    padding: 10px 0 32px;
  }
  .ms-products__title {
    font-size: 19px;
  }
  .ms-products__subtitle {
    font-size: 11.5px;
  }
  .ms-products__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .ms-products__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .ms-products__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 18px;
    margin: 0 -15px;
    scroll-padding: 0 16px;
  }
  .ms-products__grid::-webkit-scrollbar {
    display: none;
  }
  .ms-products__grid > .ms-card {
    flex: 0 0 80%;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

.ms-card {
  --ms-c1: #0078d4;
  --ms-c2: #005a9e;
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 22px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.ms-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 38px -18px rgba(15, 11, 72, 0.3);
  border-color: rgba(var(--ms-c1-rgb, 0, 120, 212), 0.25);
}
.ms-card:hover .ms-card__head-pattern {
  transform: translateX(-6px);
}
.ms-card:hover .ms-card__icon {
  transform: rotate(-4deg) scale(1.08);
}
.ms-card:hover .ms-card__cta {
  background: var(--ms-c1);
  color: #fff;
}
.ms-card:hover .ms-card__cta svg {
  transform: translateX(-3px);
}
.ms-card__ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.3);
}
.ms-card__ribbon--best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ms-card__ribbon--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.ms-card__ribbon--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.ms-card__ribbon--ai {
  background: linear-gradient(135deg, #8661c5, #5f4691);
}
.ms-card__head {
  position: relative;
  padding: 22px 20px 22px;
  background: linear-gradient(135deg, var(--ms-c1) 0%, var(--ms-c2) 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ms-card__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 40px;
  background: #fff;
  transform: skewY(-3.5deg);
  transform-origin: left;
}
.ms-card__head-pattern {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.14), transparent 40%), radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.09), transparent 45%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.ms-card__head-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ms-card__icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.ms-card__cat {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ms-card__name {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ms-card__body {
  padding: 16px 20px 10px;
  flex-grow: 1;
}
.ms-card__desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.65);
  margin: 0 0 14px;
  line-height: 1.7;
  min-height: 40px;
}
.ms-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ms-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.78);
}
.ms-card__features li svg {
  width: 18px;
  height: 18px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(var(--ms-c1-rgb, 0, 120, 212), 0.12);
  color: var(--ms-c1);
  flex-shrink: 0;
  box-sizing: border-box;
}
.ms-card__foot {
  padding: 14px 20px 18px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.ms-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ms-card__price del {
  font-size: 10.5px;
  color: rgba(15, 11, 72, 0.38);
  font-weight: 600;
  margin-bottom: 2px;
}
.ms-card__price strong {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
}
.ms-card__price strong span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 3px;
}
.ms-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(var(--ms-c1-rgb, 0, 120, 212), 0.1);
  color: var(--ms-c1);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ms-card__cta svg {
  transition: transform 0.25s ease;
}
@media (max-width: 575px) {
  .ms-card {
    border-radius: 16px;
  }
  .ms-card__ribbon {
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 9.5px;
  }
  .ms-card__head {
    padding: 18px 14px;
    gap: 10px;
  }
  .ms-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
  .ms-card__icon svg {
    width: 26px !important;
    height: 26px !important;
  }
  .ms-card__cat {
    font-size: 9.5px;
  }
  .ms-card__name {
    font-size: 15px;
  }
  .ms-card__body {
    padding: 14px 14px 8px;
  }
  .ms-card__desc {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 10px;
    min-height: auto;
  }
  .ms-card__features {
    gap: 5px;
  }
  .ms-card__features li {
    font-size: 10.5px;
    gap: 7px;
  }
  .ms-card__features li svg {
    width: 16px;
    height: 16px;
    padding: 3px;
  }
  .ms-card__foot {
    padding: 12px 14px 14px;
    gap: 8px;
  }
  .ms-card__price del {
    font-size: 10px;
  }
  .ms-card__price strong {
    font-size: 13px;
  }
  .ms-card__price strong span {
    font-size: 9.5px;
  }
  .ms-card__cta {
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 4px;
  }
  .ms-card__cta svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.av-intro {
  position: relative;
  padding: 48px 0 40px;
  margin-bottom: 20px;
  overflow: hidden;
}
.av-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.av-intro__hex-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(16, 185, 129, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.av-intro__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.av-intro__glow--1 {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45), transparent 70%);
}
.av-intro__glow--2 {
  width: 360px;
  height: 360px;
  bottom: -150px;
  left: -100px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.3), transparent 70%);
}
.av-intro .container {
  position: relative;
  z-index: 1;
}
.av-intro__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #041714 0%, #082823 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  padding: 44px 38px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(16, 185, 129, 0.12) inset;
  color: #f6f7fb;
}
.av-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.av-intro__title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.av-intro__title-accent {
  background: linear-gradient(135deg, #34d399 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.av-intro__subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
  line-height: 1.9;
}
.av-intro__threats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.av-intro__threat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.av-intro__threat:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
}
.av-intro__threat-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981, #0d9488);
  color: #fff;
  flex-shrink: 0;
}
.av-intro__threat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.av-intro__threat-body strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}
.av-intro__threat-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.av-intro__cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.av-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.av-intro__cta--primary {
  background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(16, 185, 129, 0.55);
}
.av-intro__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(16, 185, 129, 0.7);
  color: #fff;
}
.av-intro__cta--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.av-intro__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.av-intro__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.av-intro__shield {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-intro__shield-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 30px rgba(16, 185, 129, 0.4));
}
.av-intro__shield-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.av-intro__shield-ico {
  color: #10b981;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6));
}
.av-intro__shield-num {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  background: linear-gradient(135deg, #34d399, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.av-intro__shield-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.av-intro__shield-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 14px #10b981;
}
.av-intro__shield-dot--1 {
  top: 15%;
  right: 8%;
}
.av-intro__shield-dot--2 {
  bottom: 20%;
  left: 5%;
  background: #0ea5e9;
  box-shadow: 0 0 14px #0ea5e9;
}
.av-intro__shield-dot--3 {
  top: 50%;
  right: -4%;
  width: 5px;
  height: 5px;
}
.av-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.av-intro__stat {
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
}
.av-intro__stat strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
  background: linear-gradient(135deg, #34d399, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.av-intro__stat span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 991px) {
  .av-intro {
    padding: 36px 0 30px;
  }
  .av-intro__wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 24px;
  }
  .av-intro__title {
    font-size: 22px;
  }
  .av-intro__shield {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 575px) {
  .av-intro {
    padding: 14px 0 10px;
    margin-bottom: 8px;
  }
  .av-intro__wrap {
    gap: 12px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  .av-intro__eyebrow {
    font-size: 9.5px;
    padding: 4px 9px;
    margin-bottom: 8px;
    gap: 4px;
  }
  .av-intro__eyebrow svg {
    width: 11px !important;
    height: 11px !important;
  }
  .av-intro__title {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 6px;
  }
  .av-intro__subtitle {
    font-size: 11px;
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .av-intro__threats {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
  }
  .av-intro__threat {
    padding: 8px;
    gap: 7px;
    border-radius: 9px;
  }
  .av-intro__threat-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .av-intro__threat-ico svg {
    width: 14px !important;
    height: 14px !important;
  }
  .av-intro__threat-body strong {
    font-size: 10.5px;
  }
  .av-intro__threat-body span {
    font-size: 9px;
  }
  .av-intro__cta-wrap {
    gap: 6px;
  }
  .av-intro__cta {
    padding: 9px 12px;
    font-size: 11px;
    flex: 1;
    justify-content: center;
    gap: 6px;
  }
  .av-intro__cta svg {
    width: 11px !important;
    height: 11px !important;
  }
  .av-intro__right {
    gap: 10px;
  }
  .av-intro__shield {
    width: 120px;
    height: 120px;
  }
  .av-intro__shield-core {
    gap: 1px;
  }
  .av-intro__shield-ico {
    margin-bottom: 2px;
  }
  .av-intro__shield-ico svg {
    width: 22px !important;
    height: 22px !important;
  }
  .av-intro__shield-num {
    font-size: 18px;
  }
  .av-intro__shield-label {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .av-intro__shield-dot {
    width: 6px;
    height: 6px;
  }
  .av-intro__shield-dot--3 {
    width: 4px;
    height: 4px;
  }
  .av-intro__stats {
    gap: 5px;
  }
  .av-intro__stat {
    padding: 8px 6px;
    border-radius: 9px;
  }
  .av-intro__stat strong {
    font-size: 12px;
    margin-bottom: 1px;
  }
  .av-intro__stat span {
    font-size: 8.5px;
    line-height: 1.3;
  }
}

.av-products {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.av-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.av-products__header-titles {
  max-width: 640px;
}
.av-products__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #0d9488;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.av-products__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.av-products__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.av-products__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 10px;
  color: rgba(15, 11, 72, 0.75);
}
.av-products__sort svg {
  flex-shrink: 0;
  color: rgba(15, 11, 72, 0.55);
}
.av-products__sort select {
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  color: #0f0b48;
  outline: none;
  cursor: pointer;
  padding-right: 4px;
}
.av-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .av-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .av-products {
    padding: 10px 0 32px;
  }
  .av-products__title {
    font-size: 19px;
  }
  .av-products__subtitle {
    font-size: 11.5px;
  }
  .av-products__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .av-products__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .av-products__sort {
    padding: 6px 10px;
  }
  .av-products__sort select {
    font-size: 11px;
  }
  .av-products__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 18px;
    margin: 0 -15px;
    scroll-padding: 0 16px;
  }
  .av-products__grid::-webkit-scrollbar {
    display: none;
  }
  .av-products__grid > .av-card {
    flex: 0 0 80%;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

.av-card {
  --av-c1: #10b981;
  --av-c2: #0d9488;
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px 18px;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 22px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.av-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: radial-gradient(ellipse at top, rgba(var(--av-c1-rgb, 16, 185, 129), 0.12), transparent 70%);
  pointer-events: none;
}
.av-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 38px -18px rgba(var(--av-c1-rgb, 16, 185, 129), 0.3);
  border-color: rgba(var(--av-c1-rgb, 16, 185, 129), 0.25);
}
.av-card:hover .av-card__shield {
  transform: scale(1.05);
}
.av-card:hover .av-card__cta {
  background: var(--av-c1);
  color: #fff;
  border-color: var(--av-c1);
}
.av-card:hover .av-card__cta svg {
  transform: scale(1.1);
}
.av-card__shield {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.2);
  filter: drop-shadow(0 12px 22px rgba(var(--av-c1-rgb, 16, 185, 129), 0.45));
}
.av-card__shield::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.45), transparent 55%), linear-gradient(160deg, var(--av-c1) 0%, var(--av-c2) 100%);
  border-radius: 50%;
  z-index: 0;
}
.av-card__shield::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: linear-gradient(160deg, transparent 40%, rgba(0, 0, 0, 0.18) 100%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.av-card__shield-ring {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(var(--av-c1-rgb, 16, 185, 129), 0.35));
}
.av-card__shield-logo {
  position: relative;
  z-index: 1;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  direction: ltr;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 14px rgba(255, 255, 255, 0.25);
}
.av-card__shield-pct {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 3px 11px;
  background: #fff;
  color: var(--av-c1);
  font-size: 10.5px;
  font-weight: 900;
  border-radius: 99px;
  box-shadow: 0 4px 12px -2px rgba(var(--av-c1-rgb, 16, 185, 129), 0.4);
  white-space: nowrap;
  border: 1.5px solid rgba(var(--av-c1-rgb, 16, 185, 129), 0.15);
}
.av-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 20px;
}
.av-card__tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
}
.av-card__tag--best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.av-card__tag--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.av-card__tag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.av-card__tag--save {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.av-card__stars {
  display: inline-flex;
  gap: 2px;
  margin-right: auto;
  color: #f59e0b;
}
.av-card__name {
  font-size: 15.5px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: -0.01em;
}
.av-card__desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0 0 16px;
  line-height: 1.7;
  text-align: center;
  min-height: 40px;
}
.av-card__protection {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: rgba(15, 11, 72, 0.03);
  border-radius: 12px;
  margin-bottom: 14px;
}
.av-card__p-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.av-card__p-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.65);
  min-width: 54px;
}
.av-card__p-bar {
  flex-grow: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(15, 11, 72, 0.08);
  overflow: hidden;
}
.av-card__p-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--av-c1), var(--av-c2));
  border-radius: 99px;
}
.av-card__meta {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.av-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(var(--av-c1-rgb, 16, 185, 129), 0.08);
  color: var(--av-c1);
  font-size: 10.5px;
  font-weight: 700;
}
.av-card__meta span svg {
  color: var(--av-c1);
  flex-shrink: 0;
}
.av-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.av-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.av-card__price del {
  font-size: 10.5px;
  color: rgba(15, 11, 72, 0.38);
  font-weight: 600;
  margin-bottom: 2px;
}
.av-card__price strong {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
}
.av-card__price strong span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 3px;
}
.av-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(var(--av-c1-rgb, 16, 185, 129), 0.4);
  color: var(--av-c1);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.av-card__cta svg {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .av-card {
    padding: 20px 14px 14px;
    border-radius: 18px;
  }
  .av-card__shield {
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
  }
  .av-card__shield-logo {
    font-size: 34px;
  }
  .av-card__shield-pct {
    font-size: 9.5px;
    padding: 2.5px 9px;
  }
  .av-card__top {
    margin-bottom: 6px;
  }
  .av-card__tag {
    font-size: 9.5px;
    padding: 3px 9px;
  }
  .av-card__stars svg {
    width: 11px !important;
    height: 11px !important;
  }
  .av-card__name {
    font-size: 14.5px;
    margin-bottom: 4px;
  }
  .av-card__desc {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 12px;
    min-height: auto;
  }
  .av-card__protection {
    padding: 10px;
    gap: 6px;
    margin-bottom: 12px;
  }
  .av-card__p-label {
    font-size: 10px;
    min-width: 50px;
  }
  .av-card__p-bar {
    height: 4px;
  }
  .av-card__meta {
    gap: 5px;
    margin-bottom: 12px;
  }
  .av-card__meta span {
    font-size: 9.5px;
    padding: 4px 8px;
    gap: 4px;
  }
  .av-card__meta span svg {
    width: 11px !important;
    height: 11px !important;
  }
  .av-card__foot {
    padding-top: 10px;
    gap: 8px;
  }
  .av-card__price del {
    font-size: 10px;
  }
  .av-card__price strong {
    font-size: 13px;
  }
  .av-card__price strong span {
    font-size: 9.5px;
  }
  .av-card__cta {
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 4px;
  }
  .av-card__cta svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.ai-intro {
  position: relative;
  padding: 48px 0 40px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ai-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ai-intro__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(139, 92, 246, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.ai-intro__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ai-intro__glow--1 {
  width: 440px;
  height: 440px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%);
}
.ai-intro__glow--2 {
  width: 360px;
  height: 360px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent 70%);
}
.ai-intro__glow--3 {
  width: 240px;
  height: 240px;
  top: 40%;
  left: 45%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 70%);
}
.ai-intro .container {
  position: relative;
  z-index: 1;
}
.ai-intro__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #0a061d 0%, #12092f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  padding: 44px 38px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.15) inset;
  color: #f6f7fb;
}
.ai-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.ai-intro__eyebrow-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 10px #c4b5fd;
  animation: ai-pulse 1.8s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}
.ai-intro__title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.ai-intro__title-accent {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ai-intro__subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 22px;
  line-height: 1.9;
}
.ai-intro__uses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.ai-intro__use {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ai-intro__use:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}
.ai-intro__use-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ai-intro__use-ico--1 {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.ai-intro__use-ico--2 {
  background: linear-gradient(135deg, #ec4899, #be185d);
}
.ai-intro__use-ico--3 {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}
.ai-intro__use-ico--4 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ai-intro__use-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ai-intro__use-body strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}
.ai-intro__use-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.ai-intro__cta-wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ai-intro__cta--primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(139, 92, 246, 0.6);
}
.ai-intro__cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -10px rgba(139, 92, 246, 0.75);
  color: #fff;
}
.ai-intro__cta--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ai-intro__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ai-intro__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.ai-intro__orb {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-intro__orb-core {
  position: relative;
  z-index: 4;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #c4b5fd 20%, #8b5cf6 60%, #6d28d9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.7), 0 0 60px rgba(6, 182, 212, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.25);
  animation: ai-orb-breathe 3.5s ease-in-out infinite;
}
@keyframes ai-orb-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.7), 0 0 60px rgba(6, 182, 212, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 45px rgba(139, 92, 246, 0.9), 0 0 80px rgba(6, 182, 212, 0.4), inset 0 0 25px rgba(255, 255, 255, 0.3);
  }
}
.ai-intro__orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(139, 92, 246, 0.35);
  animation: ai-orb-spin 30s linear infinite;
}
.ai-intro__orb-ring--1 {
  width: 150px;
  height: 150px;
  border-color: rgba(6, 182, 212, 0.4);
}
.ai-intro__orb-ring--2 {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: rgba(139, 92, 246, 0.25);
  animation-duration: 50s;
  animation-direction: reverse;
}
.ai-intro__orb-ring--3 {
  width: 250px;
  height: 250px;
  border-color: rgba(236, 72, 153, 0.3);
  animation-duration: 70s;
}
@keyframes ai-orb-spin {
  to {
    transform: rotate(360deg);
  }
}
.ai-intro__orb-node {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--node-c, #fff);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--node-c, #fff);
  box-shadow: 0 0 16px -2px var(--node-c, #fff), inset 0 0 10px -2px var(--node-c, #fff);
  backdrop-filter: blur(4px);
  z-index: 3;
  transition: transform 0.3s ease;
}
.ai-intro__orb-node:hover {
  transform: scale(1.15);
}
.ai-intro__orb-node--1 {
  top: 6%;
  right: 12%;
}
.ai-intro__orb-node--2 {
  top: 28%;
  left: 4%;
}
.ai-intro__orb-node--3 {
  bottom: 14%;
  right: 6%;
}
.ai-intro__orb-node--4 {
  bottom: 8%;
  left: 20%;
}
.ai-intro__orb-node--5 {
  top: 50%;
  right: -2%;
}
.ai-intro__orb-node--6 {
  top: 8%;
  left: 30%;
  width: 30px;
  height: 30px;
}
.ai-intro__stat-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.ai-intro__stat-col {
  text-align: center;
}
.ai-intro__stat-col strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 2px;
  background: linear-gradient(135deg, #c4b5fd, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ai-intro__stat-col span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 991px) {
  .ai-intro {
    padding: 36px 0 30px;
  }
  .ai-intro__wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 24px;
  }
  .ai-intro__title {
    font-size: 22px;
  }
  .ai-intro__orb {
    width: 220px;
    height: 220px;
  }
}
@media (max-width: 575px) {
  .ai-intro {
    padding: 20px 0 16px;
    margin-bottom: 12px;
  }
  .ai-intro__wrap {
    gap: 18px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .ai-intro__eyebrow {
    font-size: 10px;
    padding: 5px 11px;
    margin-bottom: 10px;
  }
  .ai-intro__title {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .ai-intro__subtitle {
    font-size: 11.5px;
    line-height: 1.8;
    margin-bottom: 14px;
  }
  .ai-intro__uses {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .ai-intro__use {
    padding: 9px;
    gap: 8px;
  }
  .ai-intro__use-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .ai-intro__use-ico svg {
    width: 16px;
    height: 16px;
  }
  .ai-intro__use-body strong {
    font-size: 11px;
  }
  .ai-intro__use-body span {
    font-size: 9.5px;
  }
  .ai-intro__cta-wrap {
    gap: 8px;
  }
  .ai-intro__cta {
    padding: 10px 14px;
    font-size: 11.5px;
    flex: 1;
    justify-content: center;
  }
  .ai-intro__cta svg {
    width: 12px;
    height: 12px;
  }
  .ai-intro__orb {
    display: none;
  }
  .ai-intro__stat-card {
    padding: 10px;
    gap: 6px;
  }
  .ai-intro__stat-col strong {
    font-size: 14px;
  }
  .ai-intro__stat-col span {
    font-size: 9.5px;
  }
}

.ai-tools {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.ai-tools__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.ai-tools__header-titles {
  max-width: 640px;
}
.ai-tools__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ai-tools__badge-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 8px #8b5cf6;
  animation: ait-pulse 1.6s ease-in-out infinite;
}
@keyframes ait-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}
.ai-tools__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ai-tools__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.ai-tools__tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.ai-tools__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ai-tools__tab:hover {
  color: #0f0b48;
}
.ai-tools__tab--active {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(139, 92, 246, 0.5);
}
.ai-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .ai-tools__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .ai-tools {
    padding: 10px 0 32px;
  }
  .ai-tools__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 18px;
    margin: 0 -15px;
    scroll-padding: 0 16px;
  }
  .ai-tools__grid::-webkit-scrollbar {
    display: none;
  }
  .ai-tools__grid > .ai-card {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .ai-tools__title {
    font-size: 19px;
  }
  .ai-tools__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
}

.ai-card {
  --ai-c1: #8b5cf6;
  --ai-c2: #6d28d9;
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 20px 20px 16px;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 22px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.ai-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -18px rgba(var(--ai-c1-rgb, 139, 92, 246), 0.35);
  border-color: rgba(var(--ai-c1-rgb, 139, 92, 246), 0.25);
}
.ai-card:hover .ai-card__aurora {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}
.ai-card:hover .ai-card__logo {
  transform: scale(1.06) rotate(-3deg);
}
.ai-card:hover .ai-card__cta {
  background: linear-gradient(135deg, var(--ai-c1), var(--ai-c2));
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(var(--ai-c1-rgb, 139, 92, 246), 0.6);
}
.ai-card:hover .ai-card__cta svg {
  transform: translateX(-3px);
}
.ai-card__aurora {
  position: absolute;
  top: 0;
  left: 50%;
  width: 260px;
  height: 130px;
  background: radial-gradient(ellipse at center, var(--ai-c1) 0%, transparent 65%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.55;
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ai-card__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-card__logo {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: 0 14px 28px -10px rgba(var(--ai-c1-rgb, 139, 92, 246), 0.5);
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.ai-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.ai-card__tier {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--ai-c1-rgb, 139, 92, 246), 0.1);
  border: 1px solid rgba(var(--ai-c1-rgb, 139, 92, 246), 0.25);
  color: var(--ai-c1);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ai-card__tier--hot {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}
.ai-card__tier--new {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}
.ai-card__tier--best {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #d97706;
}
.ai-card__tier-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.ai-card__body {
  position: relative;
  z-index: 1;
  flex-grow: 1;
}
.ai-card__type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.7);
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ai-card__type svg {
  color: var(--ai-c1);
  flex-shrink: 0;
}
.ai-card__name {
  font-size: 16.5px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ai-card__desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0 0 12px;
  line-height: 1.7;
  min-height: 40px;
}
.ai-card__models {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.ai-card__models span {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  font-family: "SF Mono", "Menlo", monospace;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(var(--ai-c1-rgb, 139, 92, 246), 0.08), rgba(var(--ai-c2-rgb, 109, 40, 217), 0.04));
  color: var(--ai-c1);
  border: 1px solid rgba(var(--ai-c1-rgb, 139, 92, 246), 0.18);
  letter-spacing: -0.01em;
  direction: ltr;
}
.ai-card__stats {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ai-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(15, 11, 72, 0.04);
  color: rgba(15, 11, 72, 0.7);
  font-size: 10.5px;
  font-weight: 700;
}
.ai-card__stat svg {
  color: var(--ai-c1);
  flex-shrink: 0;
}
.ai-card__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.ai-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ai-card__price del {
  font-size: 10.5px;
  color: rgba(15, 11, 72, 0.38);
  font-weight: 600;
  margin-bottom: 2px;
}
.ai-card__price strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #0f0b48;
}
.ai-card__price strong span {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 2px;
}
.ai-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(var(--ai-c1-rgb, 139, 92, 246), 0.1);
  color: var(--ai-c1);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.ai-card__cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .ai-card {
    padding: 18px 16px 14px;
  }
  .ai-card__header {
    justify-content: center;
    position: relative;
  }
  .ai-card__logo {
    width: 120px;
    height: 120px;
    border-radius: 28px;
    margin: 0 auto;
    background: transparent;
    border: 0;
  }
  .ai-card__logo img {
    border-radius: inherit;
  }
  .ai-card__tier {
    position: absolute;
    top: 0;
    left: 0;
  }
  .ai-card__name {
    font-size: 15px;
  }
  .ai-card__cta {
    padding: 8px 12px;
    font-size: 11px;
  }
}

.mg-games {
  position: relative;
  padding: 14px 0 48px;
  margin-bottom: 20px;
  overflow: hidden;
}
.mg-games__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mg-games__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.mg-games__bg-glow--1 {
  width: 360px;
  height: 360px;
  top: -140px;
  right: -80px;
  background: radial-gradient(circle, rgba(247, 147, 30, 0.08), transparent 70%);
}
.mg-games__bg-glow--2 {
  width: 320px;
  height: 320px;
  bottom: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(255, 0, 85, 0.06), transparent 70%);
}
.mg-games .container {
  position: relative;
  z-index: 1;
}
.mg-games__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mg-games__header-titles {
  max-width: 640px;
}
.mg-games__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 0, 85, 0.08), rgba(247, 147, 30, 0.06));
  border: 1px solid rgba(255, 0, 85, 0.25);
  color: #ff3377;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.mg-games__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff0055;
  box-shadow: 0 0 8px #ff0055;
  animation: mgg-pulse 1.4s ease-in-out infinite;
}
@keyframes mgg-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}
.mg-games__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.mg-games__title-accent {
  color: #ff0055;
}
.mg-games__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.mg-games__chips {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.mg-games__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mg-games__chip:hover {
  color: #0f0b48;
}
.mg-games__chip--active {
  background: linear-gradient(135deg, #1a1a2e, #0f0b48);
  color: #ffd500;
  box-shadow: 0 4px 10px -3px rgba(15, 11, 72, 0.4);
}
.mg-games__chip--active svg {
  color: #ffd500;
}
.mg-games__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 991px) {
  .mg-games__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 575px) {
  .mg-games {
    padding: 10px 0 32px;
  }
  .mg-games__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 18px;
    margin: 0 -15px;
    scroll-padding: 0 16px;
  }
  .mg-games__grid::-webkit-scrollbar {
    display: none;
  }
  .mg-games__grid > .mg-card {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .mg-games__title {
    font-size: 20px;
  }
  .mg-games__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .mg-games__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mg-games__chips::-webkit-scrollbar {
    display: none;
  }
  .mg-games__chips > button {
    flex-shrink: 0;
  }
}

.mg-card {
  --mg-c1: #ff0055;
  --mg-c2: #cc0044;
  --mg-c3: #ff3377;
  position: relative;
  background: linear-gradient(180deg, #13132a 0%, #0a0a1e 100%);
  border-radius: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.15), box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.mg-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 50px -20px var(--mg-c1), 0 0 0 1px var(--mg-c1);
  border-color: transparent;
}
.mg-card:hover .mg-card__banner {
  transform: scale(1.08);
  filter: saturate(1.3) brightness(1.1);
}
.mg-card:hover .mg-card__icon img {
  transform: scale(1.08) rotate(-3deg);
}
.mg-card:hover .mg-card__cta {
  background: linear-gradient(135deg, var(--mg-c1), var(--mg-c2));
  color: #fff;
  box-shadow: 0 14px 28px -8px var(--mg-c1), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-color: transparent;
}
.mg-card:hover .mg-card__cta svg {
  transform: rotate(12deg) scale(1.15);
}
.mg-card__banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: radial-gradient(ellipse at 30% 40%, var(--mg-c3) 0%, transparent 50%), linear-gradient(135deg, var(--mg-c1) 0%, var(--mg-c2) 100%);
  transition: transform 0.6s ease, filter 0.4s ease;
  z-index: 0;
}
.mg-card__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.35), transparent 55%);
  pointer-events: none;
}
.mg-card__banner-shape {
  position: absolute;
  top: -30px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.mg-card__banner-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  pointer-events: none;
}
.mg-card__head {
  position: relative;
  z-index: 3;
  padding: 14px 16px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mg-card__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}
.mg-card__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: mg-live-blink 1.2s ease-in-out infinite;
}
@keyframes mg-live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.mg-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.mg-card__flag--best {
  background: rgba(245, 158, 11, 0.9);
}
.mg-card__flag--hot {
  background: rgba(239, 68, 68, 0.9);
}
.mg-card__flag--new {
  background: rgba(16, 185, 129, 0.9);
}
.mg-card__flag--sale {
  background: rgba(99, 102, 241, 0.9);
}
.mg-card__discount {
  padding: 6px 12px;
  background: #fff;
  color: var(--mg-c2);
  font-size: 15px;
  font-weight: 900;
  font-family: "Arial Black", Arial, sans-serif;
  border-radius: 8px;
  box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.4);
  direction: ltr;
  letter-spacing: -0.02em;
}
.mg-card__discount em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  margin-right: 1px;
}
.mg-card__icon {
  position: relative;
  z-index: 3;
  width: 110px;
  height: 110px;
  margin: 24px auto 0;
}
.mg-card__icon img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 26px;
  box-shadow: 0 20px 36px -12px rgba(0, 0, 0, 0.7), inset 0 0 0 3px rgba(255, 255, 255, 0.25);
  transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.mg-card__icon-ring {
  display: none;
}
.mg-card__info {
  position: relative;
  z-index: 2;
  padding: 16px 20px 6px;
  text-align: center;
}
.mg-card__name {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 3px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mg-card__tagline {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mg-c3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mg-card__stats {
  position: relative;
  z-index: 2;
  padding: 10px 18px 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mg-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
}
.mg-card__stat svg:first-child {
  color: var(--mg-c3);
  flex-shrink: 0;
}
.mg-card__stat svg {
  color: #fbbf24;
  flex-shrink: 0;
}
.mg-card__packs {
  position: relative;
  z-index: 2;
  padding: 0 18px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.mg-card__pack {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}
.mg-card__pack--active {
  background: var(--mg-c1);
  border-color: var(--mg-c1);
  color: #fff;
  box-shadow: 0 4px 12px -3px var(--mg-c1);
}
.mg-card__foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 14px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.mg-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mg-card__price > span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.mg-card__price > strong {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.mg-card__price > strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 3px;
}
.mg-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}
.mg-card__cta svg {
  color: var(--mg-c3);
  transition: transform 0.4s cubic-bezier(0.25, 0.9, 0.3, 1.2);
  filter: drop-shadow(0 0 6px var(--mg-c1));
}
@media (max-width: 575px) {
  .mg-card {
    border-radius: 16px;
  }
  .mg-card__banner {
    height: 95px;
  }
  .mg-card__head {
    padding: 10px 12px 0;
    gap: 6px;
  }
  .mg-card__live, .mg-card__flag {
    font-size: 9px;
    padding: 3px 7px;
  }
  .mg-card__discount {
    font-size: 12px;
    padding: 3px 9px;
  }
  .mg-card__icon {
    width: 104px;
    height: 104px;
    margin-top: 8px;
  }
  .mg-card__icon img {
    border-radius: 24px;
  }
  .mg-card__info {
    padding: 10px 12px 0;
  }
  .mg-card__info .mg-card__name {
    font-size: 14px;
    margin-bottom: 2px;
  }
  .mg-card__info .mg-card__tagline {
    font-size: 9.5px;
  }
  .mg-card__stats {
    padding: 6px 12px 8px;
    gap: 5px;
  }
  .mg-card__stats .mg-card__stat {
    font-size: 9.5px;
    padding: 3px 7px;
  }
  .mg-card__packs {
    padding: 0 12px 10px;
    gap: 4px;
  }
  .mg-card__packs .mg-card__pack {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .mg-card__foot {
    padding: 10px 12px 12px;
  }
  .mg-card__price > span {
    font-size: 9px;
  }
  .mg-card__price > strong {
    font-size: 13px;
  }
  .mg-card__price > strong em {
    font-size: 9px;
  }
  .mg-card__cta {
    padding: 7px 12px;
    font-size: 10.5px;
  }
  .mg-card__cta svg {
    width: 12px;
    height: 12px;
  }
}

.gc-cards {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.gc-cards__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.gc-cards__header-titles {
  max-width: 640px;
}
.gc-cards__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #d97706;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.gc-cards__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.gc-cards__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.gc-cards__chips {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.gc-cards__chip {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gc-cards__chip:hover {
  color: #0f0b48;
}
.gc-cards__chip--active {
  background: linear-gradient(135deg, #0f0b48, #1a1455);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(15, 11, 72, 0.3);
}
.gc-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 991px) {
  .gc-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 575px) {
  .gc-cards {
    padding: 10px 0 32px;
  }
  .gc-cards__title {
    font-size: 19px;
  }
  .gc-cards__subtitle {
    font-size: 11.5px;
  }
  .gc-cards__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .gc-cards__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
}

.gc-card {
  --gc-c1: #0f9d58;
  --gc-c2: #0b7a45;
  position: relative;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(15, 11, 72, 0.07);
  box-shadow: 0 8px 24px -14px rgba(15, 11, 72, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.gc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 38px -18px rgba(15, 11, 72, 0.3);
  border-color: var(--gc-c1);
}
.gc-card:hover .gc-card__logo img {
  transform: scale(1.06);
}
.gc-card:hover .gc-card__cta {
  background: var(--gc-c1);
  color: #fff;
  border-color: var(--gc-c1);
}
.gc-card:hover .gc-card__cta svg {
  transform: translateX(-3px);
}
.gc-card .gc-card__face {
  position: relative;
  padding: 22px 20px 20px;
  background: linear-gradient(135deg, var(--gc-c1) 0%, var(--gc-c2) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 210px;
}
.gc-card .gc-card__face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 50%), radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.18), transparent 55%);
  pointer-events: none;
}
.gc-card .gc-card__ribbon {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 5px;
  letter-spacing: 0.14em;
}
.gc-card .gc-card__logo {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  margin: 0;
  background: transparent;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.45);
}
.gc-card .gc-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.gc-card .gc-card__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gc-card .gc-card__name-en {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.gc-card .gc-card__name-fa {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
}
.gc-card__foot {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gc-card__denoms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.gc-card__denoms > span {
  padding: 5px 11px;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.72);
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  font-family: "SF Mono", "Menlo", monospace;
  direction: ltr;
  letter-spacing: -0.01em;
}
.gc-card__denom--active {
  background: var(--gc-c1) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px -3px var(--gc-c1);
}
.gc-card__foot-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.gc-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gc-card__price > span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.5);
  margin-bottom: 2px;
}
.gc-card__price > strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #0f0b48;
}
.gc-card__price > strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-right: 3px;
}
.gc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid var(--gc-c1);
  color: var(--gc-c1);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.gc-card__cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .gc-card {
    border-radius: 16px;
  }
  .gc-card .gc-card__face {
    min-height: 180px;
    padding: 16px 14px;
    gap: 10px;
  }
  .gc-card .gc-card__ribbon {
    font-size: 9.5px;
    padding: 4px 10px;
    letter-spacing: 0.12em;
  }
  .gc-card .gc-card__logo {
    width: 108px;
    height: 108px;
    border-radius: 24px;
    padding: 0;
  }
  .gc-card .gc-card__name-en {
    font-size: 14px;
    padding: 4px 10px;
  }
  .gc-card .gc-card__name-fa {
    font-size: 11px;
    padding: 3px 9px;
  }
  .gc-card .gc-card__foot {
    padding: 12px 14px 14px;
    gap: 10px;
  }
  .gc-card .gc-card__denoms {
    gap: 4px;
  }
  .gc-card .gc-card__denoms > span {
    font-size: 10px;
    padding: 4px 9px;
  }
  .gc-card .gc-card__price > span {
    font-size: 9.5px;
  }
  .gc-card .gc-card__price > strong {
    font-size: 13.5px;
  }
  .gc-card .gc-card__price > strong em {
    font-size: 9.5px;
  }
  .gc-card .gc-card__cta {
    padding: 8px 14px;
    font-size: 11px;
    gap: 4px;
  }
  .gc-card .gc-card__cta svg {
    width: 11px;
    height: 11px;
  }
}

.ps-games {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.ps-games__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.ps-games__header-titles {
  max-width: 640px;
}
.ps-games__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 48, 135, 0.1), rgba(0, 112, 209, 0.08));
  border: 1px solid rgba(0, 112, 209, 0.3);
  color: #003087;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.ps-games__badge-shapes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ps-games__shape {
  display: inline-block;
  width: 7px;
  height: 7px;
}
.ps-games__shape--triangle {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #16a34a;
}
.ps-games__shape--circle {
  border: 1.8px solid #ef4444;
  border-radius: 50%;
  background: transparent;
}
.ps-games__shape--cross {
  position: relative;
  color: #3b82f6;
}
.ps-games__shape--cross::before, .ps-games__shape--cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.8px;
  background: #3b82f6;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ps-games__shape--cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ps-games__shape--square {
  border: 1.8px solid #d946ef;
}
.ps-games__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ps-games__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.ps-games__chips {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.ps-games__chip {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ps-games__chip:hover {
  color: #0f0b48;
}
.ps-games__chip--active {
  background: linear-gradient(135deg, #003087, #0070d1);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(0, 48, 135, 0.4);
}
.ps-games__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .ps-games__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .ps-games {
    padding: 10px 0 32px;
  }
  .ps-games__title {
    font-size: 19px;
  }
  .ps-games__subtitle {
    font-size: 11.5px;
  }
  .ps-games__header {
    margin-bottom: 14px;
    gap: 10px;
    padding: 0 15px;
  }
  .ps-games__badge {
    font-size: 9.5px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
}

.ps-card {
  position: relative;
  background: linear-gradient(165deg, #0a1a3e 0%, #061230 55%, #020820 100%);
  border-radius: 20px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 112, 209, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.ps-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 40px -18px rgba(0, 112, 209, 0.4), inset 0 0 0 1px rgba(0, 112, 209, 0.2);
  border-color: rgba(0, 112, 209, 0.35);
}
.ps-card:hover .ps-card__cover img {
  transform: scale(1.08);
}
.ps-card:hover .ps-card__bg-shape--1 {
  transform: translate(-18px, -10px) scale(1.15);
}
.ps-card:hover .ps-card__cta {
  background: linear-gradient(135deg, #003087, #0070d1);
  color: #fff;
  border-color: transparent;
}
.ps-card:hover .ps-card__cta svg {
  transform: translateX(-3px);
}
.ps-card__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ps-card__bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  transition: transform 0.6s ease;
}
.ps-card__bg-shape--1 {
  width: 200px;
  height: 200px;
  top: -70px;
  right: -60px;
  background: radial-gradient(circle, rgba(0, 112, 209, 0.35), transparent 70%);
}
.ps-card__bg-shape--2 {
  width: 160px;
  height: 160px;
  bottom: -70px;
  left: -60px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
}
.ps-card__flag {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.ps-card__flag--best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ps-card__flag--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.ps-card__flag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.ps-card__platform {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
  direction: ltr;
}
.ps-card__cover {
  position: relative;
  z-index: 1;
  width: 130px;
  height: 130px;
  margin: 18px auto 16px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 30px -14px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.ps-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.ps-card__body {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 14px;
}
.ps-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
}
.ps-card__name-en {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ps-card__name-fa {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ps-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ps-card__cat {
  padding: 3px 9px;
  background: rgba(0, 112, 209, 0.15);
  border: 1px solid rgba(0, 112, 209, 0.3);
  color: #93c5fd;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
}
.ps-card__rate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 900;
  border-radius: 6px;
}
.ps-card__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.ps-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ps-card__price > span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.ps-card__price > strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #fff;
}
.ps-card__price > strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 3px;
}
.ps-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(0, 112, 209, 0.5);
  color: #93c5fd;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ps-card__cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .ps-card {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
  .ps-card__flag {
    font-size: 9.5px;
    padding: 3px 9px;
    top: 12px;
    right: 12px;
  }
  .ps-card__platform {
    font-size: 9px;
    padding: 3px 9px;
    top: 12px;
    left: 12px;
  }
  .ps-card__cover {
    width: 150px;
    height: 150px;
    margin: 10px auto 12px;
    border-radius: 28px;
  }
  .ps-card__name-en {
    font-size: 15px;
  }
  .ps-card__name-fa {
    font-size: 11px;
    padding: 3px 9px;
  }
  .ps-card__cat {
    font-size: 10px;
    padding: 3px 9px;
  }
  .ps-card__rate {
    font-size: 10px;
    padding: 3px 8px;
  }
  .ps-card__foot {
    padding-top: 10px;
    gap: 8px;
  }
  .ps-card__price > span {
    font-size: 9.5px;
  }
  .ps-card__price > strong {
    font-size: 13.5px;
  }
  .ps-card__price > strong em {
    font-size: 9.5px;
  }
  .ps-card__cta {
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 4px;
  }
  .ps-card__cta svg {
    width: 11px;
    height: 11px;
  }
}

.pc-games {
  padding: 14px 0 48px;
  margin-bottom: 20px;
}
.pc-games__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.pc-games__header-titles {
  max-width: 640px;
}
.pc-games__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(0, 204, 106, 0.4);
  color: #059669;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.pc-games__badge-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00cc6a;
  box-shadow: 0 0 8px #00cc6a;
  animation: pcg-pulse 1.6s ease-in-out infinite;
}
@keyframes pcg-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
}
.pc-games__title {
  font-size: 22px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.pc-games__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.pc-games__chips {
  display: inline-flex;
  padding: 4px;
  background: rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  gap: 2px;
  flex-wrap: wrap;
}
.pc-games__chip {
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: rgba(15, 11, 72, 0.65);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pc-games__chip:hover {
  color: #0f0b48;
}
.pc-games__chip--active {
  background: linear-gradient(135deg, #1a1a2e, #0f0b48);
  color: #00ff88;
  box-shadow: 0 4px 10px -3px rgba(15, 11, 72, 0.35), inset 0 0 0 1px rgba(0, 255, 136, 0.3);
}
.pc-games__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .pc-games__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .pc-games__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pc-games__title {
    font-size: 19px;
  }
}

.pc-card {
  position: relative;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1f 100%);
  border-radius: 18px;
  padding: 20px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.pc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 25%, #00ff88 50%, #0ea5e9 75%, #a855f7 100%);
  z-index: 4;
  opacity: 0.85;
}
.pc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 40px -18px rgba(0, 255, 136, 0.3);
  border-color: rgba(0, 255, 136, 0.25);
}
.pc-card:hover .pc-card__cover img {
  transform: scale(1.08);
}
.pc-card:hover .pc-card__rgb {
  opacity: 0.8;
}
.pc-card:hover .pc-card__cta {
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #0a0a1a;
  border-color: transparent;
}
.pc-card:hover .pc-card__cta svg {
  transform: translateY(-2px);
}
.pc-card__rgb {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 140px;
  background: radial-gradient(ellipse at center, #00ff88, transparent 65%);
  filter: blur(50px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.pc-card__flag {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.pc-card__flag--best {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.pc-card__flag--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.pc-card__flag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.pc-card__cover {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: 16px auto 14px;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a1a;
  box-shadow: 0 16px 28px -12px rgba(0, 0, 0, 0.65), inset 0 0 0 1.5px rgba(0, 255, 136, 0.35);
}
.pc-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.pc-card__body {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 14px;
}
.pc-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
}
.pc-card__name-en {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pc-card__name-fa {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pc-card__platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pc-card__platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: #00ff88;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-family: "SF Mono", "Menlo", monospace;
  direction: ltr;
}
.pc-card__platform svg {
  flex-shrink: 0;
}
.pc-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pc-card__cat {
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
}
.pc-card__rate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 900;
  border-radius: 6px;
}
.pc-card__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.pc-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pc-card__price > span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.pc-card__price > strong {
  font-size: 14.5px;
  font-weight: 900;
  color: #fff;
}
.pc-card__price > strong em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 3px;
}
.pc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid rgba(0, 255, 136, 0.5);
  color: #00ff88;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pc-card__cta svg {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .pc-card {
    padding: 18px 16px 14px;
  }
  .pc-card__cover {
    width: 140px;
    height: 140px;
    margin: 14px auto;
    border-radius: 24px;
  }
  .pc-card__name-en {
    font-size: 14px;
  }
  .pc-card__cta {
    padding: 8px 12px;
    font-size: 11px;
  }
}

@media (max-width: 575px) {
  .edu-sites__grid,
.adobe-products__grid,
.ms-products__grid,
.av-products__grid,
.gc-cards__grid,
.ps-games__grid,
.pc-games__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px 18px;
    margin: 0 -15px;
    scroll-padding: 0 16px;
  }
  .edu-sites__grid::-webkit-scrollbar,
.adobe-products__grid::-webkit-scrollbar,
.ms-products__grid::-webkit-scrollbar,
.av-products__grid::-webkit-scrollbar,
.gc-cards__grid::-webkit-scrollbar,
.ps-games__grid::-webkit-scrollbar,
.pc-games__grid::-webkit-scrollbar {
    display: none;
  }
  .edu-sites__grid > article,
.adobe-products__grid > article,
.ms-products__grid > article,
.av-products__grid > article,
.gc-cards__grid > article,
.ps-games__grid > article,
.pc-games__grid > article {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .adobe-products__grid > .ad-card {
    flex: 0 0 86%;
    max-width: 320px;
  }
}
@media (max-width: 767px) {
  .edu-sites__header,
.adobe-products__header,
.ms-products__header,
.av-products__header,
.ai-tools__header,
.gc-cards__header,
.ps-games__header,
.pc-games__header,
.mg-games__header {
    gap: 12px;
    align-items: stretch;
  }
  .adobe-products__filter,
.ms-products__filter,
.ai-tools__tabs,
.gc-cards__chips,
.ps-games__chips,
.pc-games__chips,
.mg-games__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    justify-content: flex-start;
  }
  .adobe-products__filter::-webkit-scrollbar,
.ms-products__filter::-webkit-scrollbar,
.ai-tools__tabs::-webkit-scrollbar,
.gc-cards__chips::-webkit-scrollbar,
.ps-games__chips::-webkit-scrollbar,
.pc-games__chips::-webkit-scrollbar,
.mg-games__chips::-webkit-scrollbar {
    display: none;
  }
  .adobe-products__filter > button,
.ms-products__filter > button,
.ai-tools__tabs > button,
.gc-cards__chips > button,
.ps-games__chips > button,
.pc-games__chips > button,
.mg-games__chips > button {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .edu-card__price-val,
.ad-card__price strong,
.ms-card__price strong,
.av-card__price strong,
.ai-card__price strong,
.gc-card__price > strong,
.ps-card__price > strong,
.pc-card__price > strong,
.mg-card__price > strong {
    white-space: nowrap;
  }
}
@media (max-width: 575px) {
  .edu-intro__wrap,
.adobe-intro__wrap,
.ms-intro__wrap,
.av-intro__wrap,
.ai-intro__wrap {
    padding: 24px 18px !important;
    border-radius: 20px;
  }
  .edu-intro__title,
.adobe-intro__title,
.ms-intro__title,
.av-intro__title,
.ai-intro__title {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }
  .edu-intro__subtitle,
.adobe-intro__subtitle,
.ms-intro__subtitle,
.av-intro__subtitle,
.ai-intro__subtitle {
    font-size: 12px !important;
    line-height: 1.8 !important;
    margin-bottom: 16px !important;
  }
  .ad-card {
    grid-template-columns: 100px 1fr;
  }
  .av-card__shield-logo {
    font-size: 34px !important;
  }
  .ai-card__tier {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  .gc-card__name-en {
    font-size: 13px !important;
  }
  .gc-card__denoms {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gc-card__denoms::-webkit-scrollbar {
    display: none;
  }
  .gc-card__denoms > span {
    flex-shrink: 0;
  }
  .ps-card,
.pc-card {
    padding: 18px 14px 14px !important;
  }
  .ps-card__name-en,
.pc-card__name-en {
    font-size: 13.5px !important;
  }
  .adobe-products__filter-btn,
.ms-products__filter-btn,
.ai-tools__tab,
.gc-cards__chip,
.ps-games__chip,
.pc-games__chip,
.mg-games__chip {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }
}
@media (max-width: 380px) {
  .edu-intro__wrap,
.adobe-intro__wrap,
.ms-intro__wrap,
.av-intro__wrap,
.ai-intro__wrap {
    padding: 20px 14px !important;
  }
  .edu-intro__features,
.adobe-intro__chips,
.ms-intro__chips,
.ms-intro__tiles,
.av-intro__threats,
.ai-intro__uses {
    grid-template-columns: 1fr !important;
  }
  .edu-intro__stats,
.av-intro__stats,
.ai-intro__stat-card {
    grid-template-columns: 1fr 1fr !important;
  }
}
.pre-order {
  margin-bottom: 51px;
}
.pre-order__wrapper {
  position: relative;
  transform-style: preserve-3d;
}
.pre-order__wrapper:before {
  content: "";
  border-radius: 0 0 60px 86px;
  height: 22px;
  background-color: #9a9a9a;
  transform: translateZ(-5px);
  opacity: 0.2;
  position: absolute;
  bottom: -8px;
  right: 10px;
  left: 10px;
  z-index: 90;
}
.pre-order__main-img {
  position: relative;
  z-index: 100;
}
.pre-order__main-img img {
  width: 100%;
}
.pre-order__icons {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 110;
  display: none;
}
.pre-order__icons .icon {
  font-size: 20px;
  color: #000000;
  position: relative;
  margin-left: 21px;
}
.pre-order__icons .icon i {
  font-size: 6px;
  color: #ffffff;
  position: absolute;
  background-color: #ff0000;
  border-radius: 60px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -4px;
  left: -3px;
}
.pre-order__icons .text {
  font-size: 17px;
  color: #000000;
}
.pre-order__sticky {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0) translateZ(20px);
  z-index: 110;
  pointer-events: none;
}
.pre-order__btn {
  position: absolute;
  bottom: 51px;
  left: 52px;
  width: 255px;
  height: 52px;
  border: 2px solid #ffffff;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 20px;
  padding: 0 28px 0 27px;
  transform: translateZ(30px);
  z-index: 110;
}
.pre-order__btn i {
  font-size: 20px;
  color: #ffffff;
}
.pre-order__info {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  position: absolute;
  transform: translateZ(30px);
  bottom: 42px;
  right: 45px;
  z-index: 110;
  pointer-events: none;
}
.pre-order__info .pre-order__info-title {
  color: #ffffff;
  font-size: 53px;
  font-weight: 600;
  margin-top: 2px;
}
.pre-order__link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 130;
}

.journal {
  position: relative;
  padding: 40px 0 36px;
  margin-bottom: 18px;
}
.journal__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.journal__header-left {
  flex: 1;
  min-width: 0;
}
.journal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(91, 82, 240, 0.08);
  border: 1px solid rgba(91, 82, 240, 0.18);
  color: #5b52f0;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.journal__title {
  font-size: 20px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.journal__subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.5;
}
.journal__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}
.journal__more:hover {
  background: #5b52f0;
  color: #fff;
  transform: translateX(-3px);
}
.journal__content {
  position: relative;
}
.journal__swiper {
  overflow: visible;
  padding: 6px 2px 10px;
}
.journal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.1);
  color: #5b52f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.25s ease;
  padding: 0;
}
.journal__nav:hover {
  background: #5b52f0;
  color: #fff;
  border-color: #5b52f0;
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.35);
}
.journal__nav--prev {
  right: -18px;
}
.journal__nav--next {
  left: -18px;
}
.journal__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}
.journal__item {
  height: auto;
}
.journal__item-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 11, 72, 0.06);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.journal__item-link:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 82, 240, 0.25);
  box-shadow: 0 18px 40px rgba(15, 11, 72, 0.15);
}
.journal__item-link:hover .journal__item-img img {
  transform: scale(1.05);
}
.journal__item-link:hover .journal__item-title {
  color: #5b52f0;
}
.journal__item-link:hover .journal__item-cta svg {
  transform: translateX(-4px);
}
.journal__item-img {
  position: relative;
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: linear-gradient(135deg, #5b52f0 0%, #ec4899 100%);
}
.journal__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.journal__item-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 40%);
}
.journal__item-body {
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.journal__item-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  line-height: 1.6;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.journal__item-desc {
  font-size: 12px;
  line-height: 1.9;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal__item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
}
.journal__item-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b52f0;
}
.journal__item-cta svg {
  transition: transform 0.3s ease;
}
.journal__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  backdrop-filter: blur(8px);
}
.journal__tag--mobile {
  background: rgba(244, 63, 94, 0.92);
  color: #fff;
}
.journal__tag--ai {
  background: rgba(91, 82, 240, 0.92);
  color: #fff;
}
.journal__tag--ps {
  background: rgba(59, 130, 246, 0.92);
  color: #fff;
}
.journal__tag--gift {
  background: rgba(245, 158, 11, 0.95);
  color: #fff;
}
.journal__tag--pc {
  background: rgba(16, 185, 129, 0.95);
  color: #fff;
}
.journal__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.journal__meta svg {
  opacity: 0.75;
}

[data-theme=dark] .journal__title {
  color: #e4e1ff;
}
[data-theme=dark] .journal__subtitle {
  color: rgba(199, 197, 238, 0.55);
}
[data-theme=dark] .journal__eyebrow {
  background: rgba(139, 92, 246, 0.12);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.3);
}
[data-theme=dark] .journal__more {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}
[data-theme=dark] .journal__more:hover {
  background: #7c3aed;
  color: #fff;
}
[data-theme=dark] .journal__nav {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #c4b5fd;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .journal__nav:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
[data-theme=dark] .journal__item-link {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .journal__item-link:hover {
  border-color: rgba(91, 82, 240, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .journal__item-title {
  color: #fff;
}
[data-theme=dark] .journal__item-link:hover .journal__item-title {
  color: #c4b5fd;
}
[data-theme=dark] .journal__item-desc {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .journal__item-foot {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .journal__item-cta {
  color: #c4b5fd;
}
[data-theme=dark] .journal__meta {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .journal {
    padding: 28px 0 24px;
  }
  .journal__nav {
    display: none;
  }
  .journal__title {
    font-size: 17px;
  }
  .journal__subtitle {
    font-size: 11.5px;
  }
  .journal__more {
    padding: 7px 12px;
    font-size: 11.5px;
  }
  .journal__item-body {
    padding: 14px 14px 14px;
  }
  .journal__item-title {
    font-size: 13px;
  }
  .journal__item-desc {
    font-size: 11.5px;
    -webkit-line-clamp: 3;
  }
}
.category {
  margin-bottom: 66px;
  padding: 0px 0 12px 0;
}
.category__row {
  display: flex;
  align-items: center;
}
.category__row__larg {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 340px) / 2);
  max-width: calc((100% - 340px) / 2);
}
.category__row__larg__item {
  border-radius: 25px;
  position: relative;
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
  margin-bottom: 20px;
}
.category__row__larg__item:last-child {
  margin-bottom: 0;
}
.category__row__larg__item img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}
.category__row__larg__item > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
.category__row__larg__item:after {
  content: "";
  border-radius: 0 0 60px 86px;
  height: 22px;
  transform: translateZ(-5px);
  opacity: 0.2;
  position: absolute;
  bottom: -8px;
  right: 10px;
  left: 10px;
  z-index: 90;
}
.category__row__small {
  flex: 0 0 340px;
  max-width: 340px;
  padding: 0 15px;
  margin-bottom: 18px;
}
.category__row__small__item {
  border-radius: 15px;
  position: relative;
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-bottom: 14px;
  border-radius: 0;
  height: unset;
}
.category__row__small__item img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}
.category__row__small__item > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
.category__row__small__item > span {
  position: absolute;
  bottom: -10px;
}
.category__row__small__item--list-tournament {
  margin-bottom: 4px;
}
.category__row__small__item--list-tournament .timer .div-total .div > span {
  background-color: #110e47;
  background: #110e47;
}
.category__row__small__item .timer {
  display: flex;
  margin-left: 2px;
}
.category__row__small__item .timer .div-total {
  display: flex;
}
.category__row__small__item .timer .div-total > span {
  color: #fff;
  display: flex;
  font-size: 64px;
  margin: -20px 2px 0 2px;
}
.category__row__small__item .timer .div-total .div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category__row__small__item .timer .div-total .div > span {
  display: flex;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  padding: 2px 11px 0px 11px;
  margin-bottom: 5px;
}
.category__row__small__item .timer .div-total .div > span:last-child {
  background: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.category__row__small__item .timer-one {
  display: flex;
  margin-left: 2px;
}
.category__row__small__item .timer-one .div-total {
  display: flex;
}
.category__row__small__item .timer-one .div-total > span {
  color: #fff;
  display: flex;
  font-size: 64px;
  margin: -20px 2px 0 2px;
}
.category__row__small__item .timer-one .div-total .div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category__row__small__item .timer-one .div-total .div > span {
  display: flex;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  padding: 2px 11px 0px 11px;
  margin-bottom: 5px;
}
.category__row__small__item .timer-one .div-total .div > span:last-child {
  background: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.category__row__small__item .text {
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  background-color: #f01919;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  position: relative;
  overflow: hidden;
}
.category__row__small__item .text:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: #fff;
  transition: 0.3s;
  z-index: 90;
}
.category__row__small__item .text span {
  position: relative;
  z-index: 90;
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}
.category__row__small__item .icon {
  font-size: 25px;
  color: #f01919;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  box-shadow: 0 7px 12px -3px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  position: relative;
  z-index: 100;
}
.category__row__small__item .icon:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background-color: #f01919;
  transition: 0.3s;
  z-index: 90;
}
.category__row__small__item .icon i {
  position: relative;
  left: 0;
  z-index: 1000;
  transition: 0.3s;
}
.category__row__small__item .icon span {
  position: absolute;
  opacity: 0;
  font-size: 19px;
  font-weight: 400;
  color: #f01919;
  transition: 0.3s;
  left: -40px;
  z-index: 10000;
}
.category__row__small__item:after {
  content: "";
  border-radius: 0 0 60px 86px;
  height: 22px;
  transform: translateZ(-5px);
  opacity: 0.2;
  position: absolute;
  bottom: -8px;
  right: 10px;
  left: 10px;
  z-index: 90;
}
.category__swiper {
  padding-top: 70px;
  margin-top: -70px;
}

.banner {
  margin-bottom: 57px;
}
.banner .row {
  align-items: flex-end;
  display: flex;
}
.banner__item {
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .banner__item {
    margin-bottom: 15px;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.quick-services {
  background: linear-gradient(135deg, #4a2d8a 0%, #6b44b8 30%, #8b5cf6 60%, #7c3aed 100%);
  padding: 40px 0 45px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.quick-services::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.quick-services::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.quick-services__title {
  position: relative;
  margin-bottom: 28px;
  text-align: right;
  animation: fade-up 0.6s ease-out;
}
.quick-services__title__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.quick-services__title__badge span {
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.quick-services__title__badge span:nth-child(1) {
  width: 8px;
  height: 8px;
  opacity: 0.4;
}
.quick-services__title__badge span:nth-child(2) {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}
.quick-services__title__badge span:nth-child(3) {
  width: 14px;
  height: 14px;
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.quick-services__title h2 {
  font-size: 28px;
  color: #fff;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.quick-services__title__subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-weight: 400;
}
.quick-services__item {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.quick-services__item__list {
  position: relative;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fade-up 0.6s ease-out backwards;
  overflow: hidden;
}
.quick-services__item__list:nth-child(1) {
  animation-delay: 0.1s;
  background: linear-gradient(145deg, #1e3a5f 0%, #1a2744 100%);
  border-color: rgba(59, 130, 246, 0.35);
}
.quick-services__item__list:nth-child(1) .quick-services__item__list__title__icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 18px rgba(29, 78, 216, 0.5);
}
.quick-services__item__list:nth-child(1) .quick-services__item__list__item ul li a {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.3);
}
.quick-services__item__list:nth-child(1) .quick-services__item__list__item ul li a:hover {
  background: #3b82f6;
  color: #fff;
}
.quick-services__item__list:nth-child(1) .quick-services__item__list__footer a {
  color: #93c5fd;
}
.quick-services__item__list:nth-child(1) .quick-services__item__list__footer a:hover {
  color: #fff;
}
.quick-services__item__list:nth-child(1):hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 16px 50px rgba(29, 78, 216, 0.35), 0 0 30px rgba(59, 130, 246, 0.2);
}
.quick-services__item__list:nth-child(2) {
  animation-delay: 0.2s;
  background: linear-gradient(145deg, #4a1942 0%, #2d1230 100%);
  border-color: rgba(236, 72, 153, 0.35);
}
.quick-services__item__list:nth-child(2) .quick-services__item__list__title__icon {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  box-shadow: 0 4px 18px rgba(190, 24, 93, 0.5);
}
.quick-services__item__list:nth-child(2) .quick-services__item__list__item ul li a {
  background: rgba(236, 72, 153, 0.25);
  border-color: rgba(236, 72, 153, 0.3);
}
.quick-services__item__list:nth-child(2) .quick-services__item__list__item ul li a:hover {
  background: #ec4899;
  color: #fff;
}
.quick-services__item__list:nth-child(2) .quick-services__item__list__footer a {
  color: #f9a8d4;
}
.quick-services__item__list:nth-child(2) .quick-services__item__list__footer a:hover {
  color: #fff;
}
.quick-services__item__list:nth-child(2):hover {
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow: 0 16px 50px rgba(190, 24, 93, 0.35), 0 0 30px rgba(236, 72, 153, 0.2);
}
.quick-services__item__list:nth-child(3) {
  animation-delay: 0.3s;
  background: linear-gradient(145deg, #0f3d2e 0%, #0a2620 100%);
  border-color: rgba(16, 185, 129, 0.35);
}
.quick-services__item__list:nth-child(3) .quick-services__item__list__title__icon {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  box-shadow: 0 4px 18px rgba(4, 120, 87, 0.5);
}
.quick-services__item__list:nth-child(3) .quick-services__item__list__item ul li a {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}
.quick-services__item__list:nth-child(3) .quick-services__item__list__item ul li a:hover {
  background: #10b981;
  color: #fff;
}
.quick-services__item__list:nth-child(3) .quick-services__item__list__footer a {
  color: #6ee7b7;
}
.quick-services__item__list:nth-child(3) .quick-services__item__list__footer a:hover {
  color: #fff;
}
.quick-services__item__list:nth-child(3):hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 16px 50px rgba(4, 120, 87, 0.35), 0 0 30px rgba(16, 185, 129, 0.2);
}
.quick-services__item__list:nth-child(4) {
  animation-delay: 0.4s;
  background: linear-gradient(145deg, #4a2c10 0%, #33200a 100%);
  border-color: rgba(245, 158, 11, 0.35);
}
.quick-services__item__list:nth-child(4) .quick-services__item__list__title__icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.5);
}
.quick-services__item__list:nth-child(4) .quick-services__item__list__item ul li a {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.3);
}
.quick-services__item__list:nth-child(4) .quick-services__item__list__item ul li a:hover {
  background: #f59e0b;
  color: #fff;
}
.quick-services__item__list:nth-child(4) .quick-services__item__list__footer a {
  color: #fcd34d;
}
.quick-services__item__list:nth-child(4) .quick-services__item__list__footer a:hover {
  color: #fff;
}
.quick-services__item__list:nth-child(4):hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 16px 50px rgba(217, 119, 6, 0.35), 0 0 30px rgba(245, 158, 11, 0.2);
}
.quick-services__item__list:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 40px rgba(139, 92, 246, 0.15);
}
.quick-services__item__list:hover .quick-services__item__list__glow {
  opacity: 0.6;
}
.quick-services__item__list:hover .quick-services__item__list__title__icon {
  animation: float 3s ease-in-out infinite;
}
.quick-services__item__list__glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 100px;
  background: radial-gradient(ellipse, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.quick-services__item__list__title {
  display: flex;
  align-items: center;
  padding: 14px 16px 10px;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.quick-services__item__list__title__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  transition: all 0.3s ease;
}
.quick-services__item__list__title__icon img {
  width: 22px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.quick-services__item__list__title h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}
.quick-services__item__list__item {
  padding: 0 14px;
  max-height: none;
  overflow: auto;
  position: relative;
  z-index: 1;
}
.quick-services__item__list__item::-webkit-scrollbar {
  width: 4px;
}
.quick-services__item__list__item::-webkit-scrollbar-track {
  background: transparent;
}
.quick-services__item__list__item::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.quick-services__item__list__item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 4px;
  margin: 0;
  list-style: none;
}
.quick-services__item__list__item ul li {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
  transition: all 0.25s ease;
}
.quick-services__item__list__item ul li:hover {
  transform: scale(1.04);
}
.quick-services__item__list__item ul li:hover a {
  background: rgba(255, 255, 255, 0.95);
  color: #6d28d9;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.quick-services__item__list__item ul li a {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}
.quick-services__item__list__footer {
  padding: 10px 16px 14px;
  position: relative;
  z-index: 1;
}
.quick-services__item__list__footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.quick-services__item__list__footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c4b5fd;
  text-decoration: none;
  transition: all 0.25s ease;
  padding: 6px;
  border-radius: 8px;
}
.quick-services__item__list__footer a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.quick-services__item__list__footer a svg {
  transition: transform 0.25s ease;
}
.quick-services__item__list__footer a:hover svg {
  transform: translateX(-4px);
}

@media (max-width: 1200px) {
  .quick-services {
    padding: 35px 0 40px;
  }
  .quick-services__item {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .quick-services {
    padding: 28px 14px 32px !important;
    margin: 0 0 18px;
  }
  .quick-services__title {
    margin-bottom: 16px;
  }
  .quick-services__title h2 {
    font-size: 17px;
    line-height: 1.35;
  }
  .quick-services__title__subtitle {
    font-size: 11.5px;
    margin-top: 3px;
  }
  .quick-services__title__badge {
    display: none !important;
  }
  .quick-services__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-services__item__list {
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .quick-services__item__list__title {
    padding: 12px 14px 10px;
    flex-direction: row;
    align-items: center;
    text-align: right;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .quick-services__item__list__title__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
  }
  .quick-services__item__list__title__icon img {
    width: 20px;
    height: 20px;
  }
  .quick-services__item__list__title h3 {
    font-size: 12.5px;
    line-height: 1.35;
    margin: 0;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .quick-services__item__list__item {
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .quick-services__item__list__item::-webkit-scrollbar {
    display: none;
  }
  .quick-services__item__list__item ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 14px;
    width: max-content;
  }
  .quick-services__item__list__item ul li {
    flex: 0 0 auto;
  }
  .quick-services__item__list__item ul li a {
    display: block;
    font-size: 11px;
    padding: 6px 11px;
    line-height: 1.5;
    white-space: nowrap;
    width: auto;
  }
  .quick-services__item__list__footer {
    width: 100%;
    padding: 8px 14px 12px;
    display: flex;
    justify-content: center;
  }
  .quick-services__item__list__footer::before {
    left: 14px;
    right: 14px;
  }
  .quick-services__item__list__footer a {
    font-size: 11px;
    gap: 4px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .quick-services__item__list__footer a svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 420px) {
  .quick-services__title h2 {
    font-size: 15.5px;
  }
  .quick-services__title__subtitle {
    font-size: 10.5px;
  }
  .quick-services__item__list__title h3 {
    font-size: 11.5px;
  }
}
.all-services {
  background: linear-gradient(135deg, #4a2d8a 0%, #6b44b8 30%, #8b5cf6 60%, #7c3aed 100%);
  padding: 40px 0 45px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.all-services::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.all-services::after {
  content: "";
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.all-services__title {
  position: relative;
  margin-bottom: 28px;
  text-align: right;
}
.all-services__title__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.all-services__title__badge span {
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.all-services__title__badge span:nth-child(1) {
  width: 8px;
  height: 8px;
  opacity: 0.4;
}
.all-services__title__badge span:nth-child(2) {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}
.all-services__title__badge span:nth-child(3) {
  width: 14px;
  height: 14px;
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
.all-services__title h2 {
  font-size: 28px;
  color: #fff;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.all-services__title__subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-weight: 400;
}
.all-services__item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.all-services__item__list {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.all-services__item__list:nth-child(1) {
  background: linear-gradient(145deg, #1e3a5f 0%, #1a2744 100%);
  border-color: rgba(59, 130, 246, 0.35);
}
.all-services__item__list:nth-child(1) .all-services__item__list__icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(29, 78, 216, 0.4);
}
.all-services__item__list:nth-child(1) .all-services__item__list__arrow {
  color: #93c5fd;
}
.all-services__item__list:nth-child(1):hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 12px 40px rgba(29, 78, 216, 0.35), 0 0 25px rgba(59, 130, 246, 0.15);
}
.all-services__item__list:nth-child(2) {
  background: linear-gradient(145deg, #4a1942 0%, #2d1230 100%);
  border-color: rgba(236, 72, 153, 0.35);
}
.all-services__item__list:nth-child(2) .all-services__item__list__icon {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  box-shadow: 0 4px 15px rgba(190, 24, 93, 0.4);
}
.all-services__item__list:nth-child(2) .all-services__item__list__arrow {
  color: #f9a8d4;
}
.all-services__item__list:nth-child(2):hover {
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow: 0 12px 40px rgba(190, 24, 93, 0.35), 0 0 25px rgba(236, 72, 153, 0.15);
}
.all-services__item__list:nth-child(3) {
  background: linear-gradient(145deg, #0f3d2e 0%, #0a2620 100%);
  border-color: rgba(16, 185, 129, 0.35);
}
.all-services__item__list:nth-child(3) .all-services__item__list__icon {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  box-shadow: 0 4px 15px rgba(4, 120, 87, 0.4);
}
.all-services__item__list:nth-child(3) .all-services__item__list__arrow {
  color: #6ee7b7;
}
.all-services__item__list:nth-child(3):hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 12px 40px rgba(4, 120, 87, 0.35), 0 0 25px rgba(16, 185, 129, 0.15);
}
.all-services__item__list:nth-child(4) {
  background: linear-gradient(145deg, #4a2c10 0%, #33200a 100%);
  border-color: rgba(245, 158, 11, 0.35);
}
.all-services__item__list:nth-child(4) .all-services__item__list__icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
}
.all-services__item__list:nth-child(4) .all-services__item__list__arrow {
  color: #fcd34d;
}
.all-services__item__list:nth-child(4):hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 12px 40px rgba(217, 119, 6, 0.35), 0 0 25px rgba(245, 158, 11, 0.15);
}
.all-services__item__list:nth-child(5) {
  background: linear-gradient(145deg, #3b1764 0%, #27104a 100%);
  border-color: rgba(168, 85, 247, 0.35);
}
.all-services__item__list:nth-child(5) .all-services__item__list__icon {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  box-shadow: 0 4px 15px rgba(126, 34, 206, 0.4);
}
.all-services__item__list:nth-child(5) .all-services__item__list__arrow {
  color: #d8b4fe;
}
.all-services__item__list:nth-child(5):hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 12px 40px rgba(126, 34, 206, 0.35), 0 0 25px rgba(168, 85, 247, 0.15);
}
.all-services__item__list:nth-child(6) {
  background: linear-gradient(145deg, #164040 0%, #0c2a2a 100%);
  border-color: rgba(20, 184, 166, 0.35);
}
.all-services__item__list:nth-child(6) .all-services__item__list__icon {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.4);
}
.all-services__item__list:nth-child(6) .all-services__item__list__arrow {
  color: #5eead4;
}
.all-services__item__list:nth-child(6):hover {
  border-color: rgba(20, 184, 166, 0.6);
  box-shadow: 0 12px 40px rgba(13, 148, 136, 0.35), 0 0 25px rgba(20, 184, 166, 0.15);
}
.all-services__item__list:hover {
  transform: translateY(-4px);
}
.all-services__item__list:hover .all-services__item__list__arrow {
  transform: translateX(-4px);
  color: #fff;
}
.all-services__item__list__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.all-services__item__list__icon img {
  width: 24px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.all-services__item__list h3 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  flex: 1;
  line-height: 1.5;
}
.all-services__item__list__arrow {
  transition: all 0.3s ease;
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .all-services {
    padding: 35px 0 40px;
  }
  .all-services__item {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .all-services__title {
    margin-bottom: 16px;
  }
  .all-services__title__badge {
    display: none !important;
  }
  .all-services__title h2 {
    font-size: 17px;
    line-height: 1.35;
  }
  .all-services__title__subtitle {
    font-size: 11.5px;
    margin-top: 3px;
  }
  .all-services__item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .all-services__item__list {
    padding: 12px;
    gap: 8px;
    border-radius: 14px;
  }
  .all-services__item__list__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
  }
  .all-services__item__list__icon img {
    width: 18px;
    height: 18px;
  }
  .all-services__item__list h3 {
    font-size: 11.5px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .all-services__item__list__arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
}
@media (max-width: 420px) {
  .all-services__title h2 {
    font-size: 15.5px;
  }
  .all-services__title__subtitle {
    font-size: 10.5px;
  }
  .all-services__item__list {
    padding: 10px 11px;
  }
  .all-services__item__list h3 {
    font-size: 11px;
  }
}
/* single */
.sp {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.05);
  margin-bottom: 28px;
}
.sp__header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #f0ecf9;
}
.sp__header-icon {
  position: relative;
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.35);
}
.sp__header-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  padding: 0;
  display: block;
}
.sp__header-info {
  flex: 1;
  min-width: 0;
}
.sp__title {
  font-size: 26px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.sp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.sp__tag-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.sp__tag--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.sp__tag--green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.sp__tag--purple {
  background: #f3f0ff;
  color: #7c3aed;
  border: 1px solid #ddd4f3;
}
.sp__tag--orange {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.sp__categories {
  margin-bottom: 22px;
}
.sp__categories-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px dashed #c4b5fd;
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.sp__categories-hint svg {
  flex-shrink: 0;
}
.sp__categories-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #f5f3fb;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
}
.sp__categories-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid transparent;
  background: #fff;
  border-radius: 10px;
  color: #4a4664;
  cursor: pointer;
  text-align: right;
  transition: all 0.2s ease;
  position: relative;
}
.sp__categories-btn:hover {
  border-color: #d7cff0;
  color: #6d28d9;
  transform: translateY(-1px);
}
.sp__categories-btn.is-active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.45);
}
.sp__categories-btn.is-active .sp__categories-ico {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.sp__categories-btn.is-active .sp__categories-label small {
  color: rgba(255, 255, 255, 0.8);
}
.sp__categories-ico {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: #f3f0ff;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.sp__categories-label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.sp__categories-label strong {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sp__categories-label small {
  font-size: 10.5px;
  font-weight: 600;
  color: #8a87a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp__variants {
  margin-bottom: 20px;
}
.sp__variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sp__variants-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp__variants-header h3 svg {
  color: #7c3aed;
}
.sp__variants-search {
  position: relative;
  width: 180px;
}
.sp__variants-search input {
  width: 100%;
  height: 36px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 0 32px 0 12px;
  font-size: 12px;
  color: #1a1a2e;
  transition: all 0.25s ease;
}
.sp__variants-search input::placeholder {
  color: #bbb;
}
.sp__variants-search input:focus {
  outline: none;
  border-color: #8b5cf6;
}
.sp__variants-search svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4b5fd;
}
.sp__variants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sp__vcard {
  position: relative;
  cursor: pointer;
}
.sp__vcard input {
  display: none;
}
.sp__vcard-inner {
  position: relative;
  display: grid;
  grid-template-areas: "img info price" "bottom bottom bottom";
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f4fb 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sp__vcard:hover .sp__vcard-inner {
  border-color: #d7cff0;
  background: linear-gradient(135deg, #ffffff 0%, #f1edfa 100%);
}
.sp__vcard input:checked + .sp__vcard-inner {
  background: linear-gradient(135deg, #ffffff 0%, #ede8f9 100%);
  border-color: #7c3aed;
  box-shadow: 0 4px 16px -6px rgba(124, 58, 237, 0.25);
}
.sp__vcard input:checked + .sp__vcard-inner .sp__vcard-img {
  border-color: #c4b5fd;
  background: #fff;
}
.sp__vcard-img {
  grid-area: img;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.sp__vcard-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.sp__vcard-check {
  display: none !important;
}
.sp__vcard-info {
  grid-area: info;
  display: flex;
  align-items: center;
  min-width: 0;
}
.sp__vcard-info h4 {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sp__vcard-info h4 small {
  font-size: 11px;
  font-weight: 600;
  color: #6b6880;
  margin-right: 3px;
}
.sp__vcard-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  margin-left: auto;
}
.sp__vcard-meta-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  direction: ltr;
}
.sp__vcard-meta-tag--red {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.sp__vcard-meta-tag--blue {
  background: rgba(29, 78, 216, 0.1);
  color: #1d4ed8;
}
.sp__vcard-meta-tag--green {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.sp__vcard-meta-tag--orange {
  background: rgba(194, 65, 12, 0.1);
  color: #c2410c;
}
.sp__vcard-meta-tag--purple {
  background: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}
.sp__vcard-bottom {
  grid-area: bottom;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed #ebe6f5;
  margin-top: 2px;
}
.sp__vcard-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid #ebe6f5;
  border-radius: 7px;
  flex: 0 0 auto;
}
.sp__vcard-toggle-btn {
  padding: 4px 9px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #6b6880;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-align: center;
}
.sp__vcard-toggle-btn.is-active {
  background: #10b981;
  color: #fff;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
}
.sp__vcard-actions {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.sp__vcard-action {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  background: #fff;
  border: 1px solid #d7cff0;
  color: #6d28d9;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.sp__vcard-action svg {
  flex-shrink: 0;
  opacity: 0.9;
  width: 12px;
  height: 12px;
}
.sp__vcard-action::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%) translateY(2px);
  background: #1a1a2e;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.sp__vcard-action::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  right: 50%;
  transform: translateX(50%);
  border: 4px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 5;
}
.sp__vcard-action:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
.sp__vcard-action:hover::after {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}
.sp__vcard-action:hover::before {
  opacity: 1;
}
.sp__vcard-price {
  grid-area: price;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  direction: ltr;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  text-align: left;
}
.sp__vcard-price strong {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sp__vcard-price small {
  font-size: 10.5px;
  font-weight: 600;
  color: #8a87a3;
  margin-top: 2px;
}
.sp__vcard-warranty-tag {
  display: none !important;
}
[data-theme=dark] .sp .sp__vcard-inner {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 100%);
  border-color: #2a2560;
}
[data-theme=dark] .sp .sp__vcard:hover .sp__vcard-inner {
  background: linear-gradient(135deg, #1e1a55 0%, #16124a 100%);
  border-color: #3d3485;
}
[data-theme=dark] .sp .sp__vcard input:checked + .sp__vcard-inner {
  background: linear-gradient(135deg, #221d5f 0%, #18145a 100%);
  border-color: #a78bfa;
  box-shadow: 0 6px 20px -8px rgba(167, 139, 250, 0.35);
}
[data-theme=dark] .sp .sp__vcard-img {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .sp .sp__vcard input:checked + .sp__vcard-inner .sp__vcard-img {
  background: #fff;
  border-color: #a78bfa;
}
[data-theme=dark] .sp .sp__vcard-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .sp .sp__vcard-info h4 {
  color: #f1efff;
}
[data-theme=dark] .sp .sp__vcard-info h4 small {
  color: #b6b3d9;
}
[data-theme=dark] .sp .sp__vcard-price strong {
  color: #f1efff;
}
[data-theme=dark] .sp .sp__vcard-price strong::after {
  color: #b6b3d9;
}
[data-theme=dark] .sp .sp__vcard-toggle {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .sp .sp__vcard-toggle-btn {
  color: #e0dcff;
}
[data-theme=dark] .sp .sp__vcard-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .sp .sp__vcard-toggle-btn.is-active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45);
}
[data-theme=dark] .sp .sp__vcard-action {
  background: rgba(255, 255, 255, 0.04);
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .sp .sp__vcard-action:hover {
  background: #a78bfa;
  color: #fff;
  border-color: #a78bfa;
}
[data-theme=dark] .sp .sp__vcard-meta-tag--red {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
[data-theme=dark] .sp .sp__vcard-meta-tag--blue {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}
[data-theme=dark] .sp .sp__vcard-meta-tag--green {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}
[data-theme=dark] .sp .sp__vcard-meta-tag--orange {
  background: rgba(251, 146, 60, 0.18);
  color: #fdba74;
}
[data-theme=dark] .sp .sp__vcard-meta-tag--purple {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}
.sp__checkout {
  margin-bottom: 16px;
  padding: 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp__checkout-account {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.sp__checkout-account-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f3f0ff;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp__checkout-account-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1a2e;
}
.sp__checkout-account-chev {
  color: #7c3aed;
  margin-right: auto;
  transition: transform 0.2s ease;
}
.sp__checkout-account:hover {
  border-color: #c4b5fd;
  background: #f7f4fd;
}
.sp__checkout-account:hover .sp__checkout-account-chev {
  transform: translateX(2px);
}
.sp__checkout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
}
.sp__checkout-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp__checkout-price-label {
  font-size: 10.5px;
  color: #8a87a3;
  font-weight: 600;
}
.sp__checkout-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.sp__checkout-price-current {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}
.sp__checkout-price-unit {
  font-size: 10.5px;
  color: #8a87a3;
  font-weight: 600;
}
.sp__checkout-price-old {
  font-size: 11.5px;
  color: #bbb;
  text-decoration: line-through;
}
.sp__checkout-price-discount {
  font-size: 10px;
  font-weight: 800;
  color: #ef4444;
  background: #fef2f2;
  padding: 1.5px 6px;
  border-radius: 5px;
  direction: ltr;
}
.sp__checkout-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px -4px rgba(5, 150, 105, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp__checkout-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(5, 150, 105, 0.5);
  color: #fff;
}
.sp__checkout-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.4);
  border-radius: 9px;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}
.sp__checkout-note svg {
  flex-shrink: 0;
  color: #d97706;
}
.sp__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.sp__alert-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  background: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp__alert-icon svg {
  color: #fff;
}
.sp__alert p {
  font-size: 12px;
  color: #92400e;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .single-top {
    margin-top: 6px;
    margin-bottom: 16px;
  }
  .sp {
    padding: 16px 14px;
    border-radius: 16px;
    margin-bottom: 0;
  }
  .sp__header {
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
  }
  .sp__header-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 18px;
  }
  .sp__header-icon img {
    padding: 0;
    border-radius: inherit;
  }
  .sp__header-info {
    min-width: 0;
  }
  .sp__title {
    font-size: 17px;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .sp__tags {
    gap: 4px;
  }
  .sp__tag {
    font-size: 11px;
    padding: 4px 9px;
    gap: 4px;
    border-radius: 6px;
  }
  .sp__tag svg {
    width: 11px !important;
    height: 11px !important;
  }
  .sp__categories {
    margin-bottom: 16px;
  }
  .sp__categories-hint {
    font-size: 11.5px;
    padding: 4px 9px;
    margin-bottom: 8px;
  }
  .sp__categories-tabs {
    flex-direction: column;
    padding: 4px;
    gap: 4px;
  }
  .sp__categories-btn {
    width: 100%;
    padding: 9px 12px;
    gap: 8px;
  }
  .sp__categories-ico {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;
  }
  .sp__categories-ico svg {
    width: 14px !important;
    height: 14px !important;
  }
  .sp__categories-label strong {
    font-size: 14px;
  }
  .sp__categories-label small {
    font-size: 11px;
  }
  .sp__vcard-inner {
    grid-template-columns: 44px 1fr auto;
    gap: 8px 10px;
    padding: 10px 11px;
    border-radius: 11px;
  }
  .sp__vcard-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  .sp__vcard-img img {
    padding: 3px;
  }
  .sp__vcard-info h4 {
    font-size: 14px;
  }
  .sp__vcard-info h4 small {
    font-size: 11px;
  }
  .sp__vcard-price {
    align-items: flex-end;
    text-align: left;
  }
  .sp__vcard-price strong {
    font-size: 15px;
  }
  .sp__vcard-price small {
    font-size: 11px;
  }
  .sp__vcard-bottom {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 8px;
  }
  .sp__vcard-toggle {
    flex: 1 1 100%;
    width: 100%;
    order: 1;
  }
  .sp__vcard-toggle-btn {
    flex: 1 1 50%;
    padding: 6px 8px;
    font-size: 10.5px;
  }
  .sp__vcard-meta {
    order: 2;
    gap: 3px;
  }
  .sp__vcard-meta-tag {
    font-size: 9px;
    padding: 2px 6px;
  }
  .sp__vcard-actions {
    order: 3;
    margin-right: auto;
    gap: 4px;
  }
  .sp__vcard-action {
    width: 28px;
    height: 28px;
  }
  .sp__vcard-action svg {
    width: 12px !important;
    height: 12px !important;
  }
  .sp__variants-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sp__variants-search {
    width: 100%;
    margin-top: 8px;
  }
  .sp__variants-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .sp__variants-header h3 {
    font-size: 14px;
  }
  .sp__checkout-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: right;
  }
  .sp__checkout-buy {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .sp {
    padding: 14px 12px;
  }
  .sp__header {
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .sp__header-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 16px;
  }
  .sp__header-icon img {
    border-radius: inherit;
  }
  .sp__title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .sp__tag {
    font-size: 11px;
    padding: 3px 8px;
  }
  .sp__vcard-inner {
    grid-template-columns: 38px 1fr auto;
    gap: 6px 8px;
    padding: 8px 10px;
  }
  .sp__vcard-img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }
  .sp__vcard-info h4 {
    font-size: 14px;
  }
  .sp__vcard-info h4 small {
    font-size: 11px;
  }
  .sp__vcard-price strong {
    font-size: 14px;
  }
  .sp__vcard-price small {
    font-size: 11px;
  }
  .sp__vcard-toggle-btn {
    padding: 5px 6px;
    font-size: 11px;
  }
  .sp__vcard-action {
    width: 26px;
    height: 26px;
  }
  .sp__vcard-meta-tag {
    font-size: 10px;
    padding: 2px 6px;
  }
}
[data-theme=dark] .sp {
  background: #13111e;
  border-color: #252035;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .sp__header {
  border-color: #252035;
}
[data-theme=dark] .sp__header-icon {
  background: linear-gradient(135deg, #1e1a30, #181428);
  border-color: #2e2848;
}
[data-theme=dark] .sp__title {
  color: #f0ecff;
}
[data-theme=dark] .sp__tag--blue {
  background: #0d1a30;
  color: #93c5fd;
  border-color: #1a3558;
}
[data-theme=dark] .sp__tag--green {
  background: #0a1f18;
  color: #6ee7b7;
  border-color: #143d28;
}
[data-theme=dark] .sp__tag--purple {
  background: #1a1438;
  color: #c4b5fd;
  border-color: #2e2460;
}
[data-theme=dark] .sp__tag--orange {
  background: #231508;
  color: #fdba74;
  border-color: #3d2410;
}
[data-theme=dark] .sp__categories-hint {
  background: #1c1838;
  border-color: #3d3478;
  color: #c4b5fd;
}
[data-theme=dark] .sp__categories-tabs {
  background: #0e0c1e;
  border-color: #252035;
}
[data-theme=dark] .sp__categories-btn {
  background: #181530;
  border-color: #252035;
  color: #c8c3e8;
}
[data-theme=dark] .sp__categories-btn:hover {
  background: #201c3c;
  border-color: #4a3f80;
  color: #f0ecff;
}
[data-theme=dark] .sp__categories-btn.is-active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border-color: transparent;
}
[data-theme=dark] .sp__categories-ico {
  background: #201c3c;
  color: #c4b5fd;
}
[data-theme=dark] .sp__categories-label strong {
  color: #f0ecff;
}
[data-theme=dark] .sp__categories-label small {
  color: #8a86b8;
}
[data-theme=dark] .sp__variants-header h3 {
  color: #f0ecff;
}
[data-theme=dark] .sp__variants-search {
  background: #0e0c1e;
  border-color: #252035;
  color: #9590c0;
}
[data-theme=dark] .sp__variants-search input {
  background: transparent;
  color: #f0ecff;
}
[data-theme=dark] .sp__variants-search input::placeholder {
  color: #5a5678;
}
[data-theme=dark] .sp__checkout {
  background: #0e0c1e;
  border-color: #252035;
}
[data-theme=dark] .sp__checkout-account {
  background: #181530;
  border-color: #2e2848;
}
[data-theme=dark] .sp__checkout-account-ico {
  background: #201c3c;
  color: #c4b5fd;
}
[data-theme=dark] .sp__checkout-account-label {
  color: #f0ecff;
}
[data-theme=dark] .sp__checkout-account-chev {
  color: #a78bfa;
}
[data-theme=dark] .sp__checkout-account:hover {
  background: #201c3c;
  border-color: #4a3f80;
}
[data-theme=dark] .sp__checkout-bar {
  background: #181530;
  border-color: #2e2848;
}
[data-theme=dark] .sp__checkout-price-label {
  color: #8a86b8;
}
[data-theme=dark] .sp__checkout-price-current {
  color: #f0ecff;
}
[data-theme=dark] .sp__checkout-price-unit {
  color: #8a86b8;
}
[data-theme=dark] .sp__checkout-price-old {
  color: #4e4a6e;
}
[data-theme=dark] .sp__checkout-price-discount {
  background: #2a0e12;
  color: #fca5a5;
  border-color: #4a1a20;
}
[data-theme=dark] .sp__checkout-buy {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
}
[data-theme=dark] .sp__checkout-buy:hover {
  background: linear-gradient(135deg, #6d28d9, #4c1d95);
}
[data-theme=dark] .sp__checkout-note {
  background: rgba(251, 191, 36, 0.07);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fcd34d;
}
[data-theme=dark] .sp__checkout-note svg {
  color: #fcd34d;
}
[data-theme=dark] .sp__popover-panel {
  background: #181530;
  border-color: #2e2848;
}
[data-theme=dark] .sp__popover-head {
  border-color: #2e2848;
}
[data-theme=dark] .sp__popover-head h3 {
  color: #f0ecff;
}
[data-theme=dark] .sp__popover-body {
  color: #c8c3e8;
}
[data-theme=dark] .sp__popover-body p {
  color: #c8c3e8;
}
[data-theme=dark] .sp__popover-body li {
  color: #c8c3e8;
}
[data-theme=dark] .sp__popover-body strong {
  color: #f0ecff;
}
[data-theme=dark] .sp__popover-close {
  color: #8a86b8;
}
[data-theme=dark] .sp__popover-close:hover {
  background: #252035;
  color: #f0ecff;
}
[data-theme=dark] .sp__popover-ico {
  color: #c4b5fd;
}

.single-top {
  position: relative;
  margin-bottom: 28px;
}
.single-top .dropdown {
  width: 100% !important;
  height: 58px !important;
}
.single-top .filter-option-inner-inner {
  text-align: right !important;
  line-height: 58px !important;
}
.single-top .info {
  display: flex;
  justify-content: center;
}
.single-top .info .single-top__info {
  width: 282px;
}
.single-top__item {
  position: relative;
}
.single-top__item__title-image {
  position: absolute;
  height: 94px;
  left: 0;
  right: 0;
  transform: translateX(-5%);
  bottom: 0;
  background-color: #2f2f2f;
  border-radius: 0px 25px 25px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.single-top__item__title-image img {
  transform: translateX(5%);
}
.single-top__item__image {
  max-width: 348px;
  margin: 0 auto;
  position: sticky;
  top: 20px;
}
.single-top__item__image__offer {
  position: absolute;
}
.single-top__item__image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 22px;
  border: 1.5px solid #f0ecf9;
  transition: transform 0.5s ease;
}
.single-top__item__image img:hover {
  transform: scale(1.02);
}
.single-top__item__video {
  max-width: 341px;
  margin: 20px auto;
  position: relative;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44));
  border-radius: 18px;
  background-color: #000;
}
.single-top__item__video img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  opacity: 0.8;
}
.single-top__item__video__logo {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  right: 50%;
}
.single-top__item__video__logo img {
  opacity: 1;
}
.single-top__item__product {
  background: #fff;
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.05);
  border: 1.5px solid #f0ecf9;
  border-radius: 22px;
  padding: 28px 32px;
  position: relative;
}
.single-top__item__product ul > li:first-child {
  margin-bottom: 15px;
}
.single-top__item__product__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 35px;
}
.single-top__item__product__title__approved {
  margin-right: 15px;
}
.single-top__item__product__title h1 {
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
}
.single-top__item__product__sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 34px;
}
.single-top__item__product__sub-title ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.single-top__item__product__sub-title ul li {
  display: flex;
  align-items: center;
  margin-left: 13px;
  font-weight: 300;
}
.single-top__item__product__sub-title ul li:last-child {
  margin-left: 0;
}
.single-top__item__product__sub-title ul li i {
  margin-left: 9px;
  color: #428D27;
}
.single-top__item__product__sub-title ul li span {
  margin-left: 9px;
  font-weight: 300;
}
.single-top__item__product__sub-title__rate ul {
  flex-wrap: nowrap;
}
.single-top__item__product__sub-title__rate ul li {
  margin-left: 4px;
}
.single-top__item__product__sub-title__rate ul li :last-child {
  margin-left: 0;
}
.single-top__item__product__sub-title__image {
  display: none;
}
.single-top__item__product__region__title {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.single-top__item__product__region__title p {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.single-top__item__product__region__title div {
  margin-right: 5px;
  height: 1px;
  flex-grow: 1;
  background-color: #F5F5F5;
}
.single-top__item__product__region__list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.single-top__item__product__region__list ul li {
  margin-left: 15px;
  margin-bottom: 20px;
}
.single-top__item__product__region__list ul li:last-child {
  margin-left: 0;
}
.single-top__item__product__region__list ul li a {
  padding: 11px 21.6666px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 45px;
  color: #4F4F4F;
  border: 1px solid #9D9D9D;
  border-radius: 15px;
  transition: 0.2s;
}
.single-top__item__product__region__list ul li:hover a {
  border-color: #436EDC;
  background-color: #436EDC;
  color: #fff;
}
.single-top__item__product__region__list ul li.active a {
  border-color: #436EDC;
  background-color: #436EDC;
  color: #fff;
}
.single-top__item__product__sub--title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.single-top__item__product__sub--title p {
  font-size: 14px;
  font-weight: 700;
  line-height: 21.7px;
  margin-bottom: 0px;
}
.single-top__item__product__sub--title__search {
  display: flex;
  align-items: center;
}
.single-top__item__product__sub--title__search__form {
  display: flex;
  align-items: center;
  margin-left: 20px;
  border-bottom: 1px solid #CBCBCB;
}
.single-top__item__product__sub--title__search__form input {
  background-color: transparent;
  font-size: 14px;
}
.single-top__item__product__sub--title__search__form .icon-search {
  font-size: 14px;
}
.single-top__item__product__sub--title__search i {
  font-size: 24px;
  cursor: pointer;
}
.single-top__item__product__type .scrollbar-track-y {
  left: 10px;
  top: 50%;
  right: unset;
  transform: translateY(-50%);
}
.single-top__item__product__type .scrollbar-track {
  background-color: #E7E7E7 !important;
}
.single-top__item__product__type .scrollbar-thumb {
  background-color: #B7B7B7 !important;
}
.single-top__item__product__type__item {
  display: flex;
  line-height: 43px;
  margin-bottom: 13px;
  align-items: center;
  border-radius: 15px;
  transition: 0.2s;
  cursor: pointer;
  padding-right: 10px;
  background-color: rgba(217, 217, 217, 0.4);
}
.single-top__item__product__type__item__wrapper > div:nth-child(odd) {
  padding-left: 7.5px;
}
.single-top__item__product__type__item__wrapper > div:nth-child(even) {
  padding-right: 7.5px;
}
.single-top__item__product__type__item__title {
  flex-grow: 1;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.single-top__item__product__type__item__off {
  font-weight: 700;
  font-size: 13px;
  color: #ff1a1a;
  white-space: nowrap;
}
.single-top__item__product__type__item h2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0em;
  text-align: right;
}
.single-top__item__product__type__item:hover {
  background-color: #D9D9D9;
}
.single-top__item__product__type__item.active {
  background-color: #D9D9D9;
}
.single-top__item__product__type__item__price {
  height: 100%;
  display: flex;
  align-items: center;
  justify-self: center;
  background-color: #f7dc00;
  border-radius: 15px 0px 0px 15px;
  padding-right: 15px;
  padding-left: 3px;
  line-height: 43px;
  font-size: 15px;
  font-weight: 800;
  margin-right: 3px;
  color: #1F1F1F;
}
.single-top__item__product__type__item__price span:last-of-type {
  transform: rotate(270deg);
  font-size: 10px;
  font-weight: 400;
  margin-right: 3px;
}
.single-top__item__product__alert__title {
  position: relative;
  display: flex;
  overflow: hidden;
}
.single-top__item__product__alert__title span {
  position: absolute;
  align-items: center;
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  right: 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.single-top__item__product__alert__title span i {
  margin-left: 10px;
}
.single-top__item__product__alert__content {
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 18px 16px;
  border-radius: 0 0 14px 14px;
}
.single-top__item__product__alert__content p {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  text-align: justify;
  margin: 0;
}
.single-top__item__product__detail__account {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid #c4b5fd !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
  border-radius: 14px;
  padding: 0 18px;
  transition: all 0.25s ease;
}
.single-top__item__product__detail__account__wrapper {
  margin-bottom: 25px;
}
.single-top__item__product__detail__account__wrapper > .row > div:first-child {
  padding-left: 20px;
}
.single-top__item__product__detail__account__wrapper__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding-right: 11px;
}
.single-top__item__product__detail__account__wrapper__label i {
  color: red;
  font-size: 8px;
}
.single-top__item__product__detail__account.--red-border {
  box-shadow: 0 0 0 0.25rem rgba(244, 124, 124, 0.53);
  border: 2px solid #F26262 !important;
}
.single-top__item__product__detail__account:hover {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.single-top__item__product__detail__account span {
  font-size: 16px;
  font-weight: 600;
  line-height: 58px;
}
.single-top__item__product__detail__account i {
  font-size: 10px;
  font-weight: 600;
  line-height: 58px;
  color: #2D264B;
}
.single-top__item__product__detail__price {
  display: flex;
  align-items: center;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  padding: 12px 16px;
  border-radius: 14px;
}
.single-top__item__product__detail__price__wrapper {
  margin-bottom: 30px;
}
.single-top__item__product__detail__price__wrapper > .row > div:first-child {
  padding-left: 20px;
}
.single-top__item__product__detail__price__title span {
  font-weight: 700;
  line-height: 34px;
  color: #767575;
  margin-left: 12px;
}
.single-top__item__product__detail__price__content {
  display: flex;
  align-items: center;
}
.single-top__item__product__detail__price__content span {
  font-weight: 700;
  line-height: 26px;
  color: #D93838;
  background: #FFCECE;
  border-radius: 18px;
  padding: 0 11px;
  margin-left: 32px;
}
.single-top__item__product__detail__price__content del {
  font-weight: 500;
  line-height: 31px;
  color: #8E8E8E;
  margin-left: 38px;
}
.single-top__item__product__detail__price__content p {
  font-weight: 700;
  line-height: 42px;
  color: #1F1F1F;
  margin: 0;
}
.single-top__item__product__detail__price__content p small {
  font-weight: 500;
  line-height: 31px;
}
.single-top__item__product__detail__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  border-radius: 14px;
  padding: 12px 0;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
  cursor: pointer;
}
.single-top__item__product__detail__cart.--red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.single-top__item__product__detail__cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}
.single-top__item__product__detail__cart a {
  color: #fff;
  text-decoration: none;
}
.single-top__inline-types {
  margin-top: 20px;
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
  padding: 18px;
}
.single-top__inline-types__search {
  position: relative;
  margin-bottom: 14px;
}
.single-top__inline-types__search input {
  width: 100%;
  height: 44px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 0 40px 0 16px;
  font-size: 13px;
  color: #1a1a2e;
  transition: all 0.25s ease;
}
.single-top__inline-types__search input::placeholder {
  color: #bbb;
}
.single-top__inline-types__search input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.single-top__inline-types__search svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4b5fd;
}
.single-top__inline-types__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.single-top__inline-types__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.single-top__inline-types__item h4 {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
  flex: 1;
}
.single-top__inline-types__item:hover {
  border-color: #c4b5fd;
  background: #f3f0ff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.06);
}
.single-top__inline-types__item.active {
  border-color: #8b5cf6;
  background: #f3f0ff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.single-top__inline-types__off {
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 6px;
  margin: 0 8px;
}
.single-top__inline-types__price {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}
.single-top__inline-types__price strong {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}
.single-top__inline-types__price small {
  font-size: 10px;
  color: #bbb;
  margin-right: 2px;
}
.single-top__header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 49px;
}
.single-top__header .single-top__header-right {
  display: flex;
}
.single-top__header .single-top__header-right .single-top__header-share {
  margin-left: 9px;
  width: 62px;
  height: 57px;
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.single-top__header .single-top__header-right .single-top__header-share > i {
  font-size: 23px;
  color: #000000;
}
.single-top__header .single-top__header-right .single-top__header-share ul {
  position: absolute;
  right: 0;
  left: 0;
  top: 100%;
  padding-top: 9px;
  z-index: 999;
}
.single-top__header .single-top__header-right .single-top__header-share ul li {
  margin-bottom: 9px;
}
.single-top__header .single-top__header-right .single-top__header-share ul li a {
  height: 0px;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  background-color: #fff;
  transition: 0.2s;
  overflow: hidden;
  position: relative;
}
.single-top__header .single-top__header-right .single-top__header-share ul li a i {
  font-size: 23px;
  color: #000000;
  transition: 0.1s;
}
.single-top__header .single-top__header-right .single-top__header-share ul li a:hover i {
  transform: scale(1.1);
}
.single-top__header .single-top__header-right .single-top__header-share:hover ul li a {
  height: 57px;
  opacity: 1;
  visibility: visible;
}
.single-top__header .single-top__header-right .single-top__header-heart {
  height: 57px;
  border: 1px solid #000000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  padding: 0 20px;
}
.single-top__header .single-top__header-right .single-top__header-heart i {
  font-size: 21px;
  color: #000000;
  margin-left: 19px;
}
.single-top__header .single-top__header-right .single-top__header-heart.active {
  color: #f31212;
}
.single-top__header .single-top__header-right .single-top__header-heart.active i {
  color: #f31212;
}
.single-top__header .single-top__header-center {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.single-top__header .single-top__header-center h1 {
  color: #000000;
  font-size: 31px;
  font-weight: 600;
  margin-bottom: 5px;
}
.single-top__header .single-top__header-center .title-en {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
}
.single-top__header .single-top__header-left .single-top__header-agree {
  height: 57px;
  background-color: #000000;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.single-top__header .single-top__header-left .single-top__header-agree .vote {
  margin-right: 13px;
  margin-left: 12px;
}
.single-top__header .single-top__header-left .single-top__header-agree i {
  font-size: 23px;
  color: #ffffff;
}
.single-top__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 125px;
  height: 113px;
  background-color: #fff;
  z-index: 90;
  border-radius: 50%;
}
.single-top__desc {
  height: 100%;
  display: flex;
  align-items: center;
}
.single-top__desc p {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  line-height: 41px;
  text-align: justify;
}
.single-top__desc p a {
  margin-right: 3px;
}
.single-top__desc p a i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  border-radius: 60px;
  font-size: 7px;
  color: #ffffff;
}
.single-top__info {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.single-top__info .single-top__info-head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  left: 0;
  top: 35px;
  opacity: 0.6;
  transition: 0.3s;
}
.single-top__info .single-top__info-head .single-top__info-head-fa {
  text-shadow: 0 2px 2px rgba(0, 1, 1, 0.35);
  color: #ffffff;
  font-size: 24px;
  position: relative;
  top: -7px;
}
.single-top__info .single-top__info-head i {
  font-size: 30px;
  text-shadow: 0 2px 2px rgba(0, 1, 1, 0.35);
  color: #ffffff;
  margin-right: 17px;
  margin-left: 19px;
}
.single-top__info .single-top__info-head .single-top__info-head-en {
  text-shadow: 0 2px 2px rgba(0, 1, 1, 0.35);
  color: #ffffff;
  font-size: 23px;
}
.single-top__info .single-top__info-img {
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: 0.3s;
}
.single-top__info .single-top__info-img:before {
  content: "";
  height: 32px;
  width: 153px;
  border-radius: 100%;
  background-color: #000;
  filter: blur(5px);
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 79px;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
}
.single-top__info .single-top__info-img img {
  position: relative;
  z-index: 100;
  animation: open-animate 1.5s;
  width: 100%;
  height: 100%;
}
.single-top__info .single-top__info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 23px;
  left: 24px;
  bottom: 5px;
  transition: 0.3s;
}
.single-top__info .single-top__info-footer .single-top__info-footer-price {
  display: flex;
  align-items: center;
  height: 16px;
  border-radius: 60px;
  background-color: #ef473a;
  padding-right: 7px;
  padding-left: 5px;
}
.single-top__info .single-top__info-footer .single-top__info-footer-price ins {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  margin-left: 2px;
  position: relative;
  top: 1px;
}
.single-top__info .single-top__info-footer .single-top__info-footer-price i {
  font-size: 23px;
  color: #ffffff;
}
.single-top__info .single-top__info-footer .single-top__info-footer-count {
  display: flex;
  align-items: baseline;
}
.single-top__info .single-top__info-footer .single-top__info-footer-count .count {
  text-shadow: 0 2px 2px rgba(0, 1, 1, 0.35);
  color: #ffffff;
  font-size: 44px;
  font-weight: bold;
}
.single-top__info .single-top__info-footer .single-top__info-footer-count .title {
  text-shadow: 0 2px 2px rgba(0, 1, 1, 0.35);
  color: #ffffff;
  font-size: 24px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.single-top__info .single-top__info-footer .single-top__info-footer-count .title span:nth-of-type(2) {
  position: relative;
  top: -6px;
}
.single-top__info .single-top__info-radio {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  cursor: pointer;
  z-index: 1000;
}
.single-top__info .single-top__info-radio .check {
  position: absolute;
  width: 50px;
  height: 50px;
  right: -15px;
  bottom: -15px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(23, 164, 4);
  transition: 0.3s;
}
.single-top__info .single-top__info-radio .check i {
  font-size: 16px;
  color: #ffffff;
}
.single-top__info > input {
  display: none;
}
.single-top__meta {
  height: 100%;
  display: flex;
  align-items: center;
}
.single-top__meta ul li {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}
.single-top__meta ul li .single-top__meta-title {
  min-width: 134px;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  margin-left: 120px;
}
.single-top__meta ul li .single-top__meta-value {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}
.single-top__meta ul li:before {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translate(-65%, 0);
  content: "............";
  opacity: 0.6;
  color: #806e6e;
  font-size: 14px;
  letter-spacing: 1.12px;
}
.single-top__meta ul li:nth-last-child(1) {
  margin-bottom: 0;
}
.single-top .single-top__price-type {
  width: 290px;
  margin: 0 auto;
  position: relative;
  z-index: 200;
  margin-top: 44px;
  margin-bottom: 15px;
}
.single-top .single-top__price-type .select-box .selectize-input {
  border-radius: 60px;
}
.single-top__price {
  margin-bottom: 31px;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  position: relative;
}
.single-top__price .single-top__price-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
  z-index: 100;
  padding-right: 12px;
  padding-left: 13px;
}
.single-top__price .single-top__price-item .discount-numb {
  display: flex;
  align-items: center;
  height: 26px;
  background-color: #ef473a;
  border-radius: 60px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 0 11px 0 12px;
  margin-left: 10px;
}
.single-top__price .single-top__price-item .discount-numb i {
  font-size: 11px;
  color: #ffffff;
  margin-right: 3px;
}
.single-top__price .single-top__price-item .price {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 35px;
  font-weight: 600;
  text-decoration: none;
}
.single-top__price .single-top__price-item .price__unit {
  color: #000000;
  font-size: 16px;
  margin-right: 5px;
}
.single-top__price .single-top__price-item .price .old {
  font-size: 20px;
  color: #777;
  margin-left: 10px;
  position: relative;
}
.single-top__price .single-top__price-item .price .old:before {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  transform: rotate(-15deg);
  content: "";
  height: 1px;
  background-color: #555;
}
.single-top__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  position: relative;
}
.single-top__footer .single-top__footer-right {
  display: flex;
  align-items: center;
  flex: 0 0 calc(50% - 150px);
  max-width: calc(50% - 150px);
}
.single-top__footer .single-top__footer-right .single-top__footer-feature {
  display: flex;
  align-items: center;
  margin-left: 55px;
}
.single-top__footer .single-top__footer-right .single-top__footer-feature i {
  font-size: 37px;
  color: #000000;
  margin-left: 24px;
}
.single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info {
  display: flex;
  flex-direction: column;
}
.single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .title {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .value {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
}
.single-top__footer .single-top__footer-right .single-top__footer-feature:nth-last-of-type(1) {
  margin-left: 0;
}
.single-top__footer .single-top__footer-right .single-top__footer-accounts span {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
}
.single-top__footer .single-top__footer-right .single-top__footer-accounts ul {
  display: flex;
  align-items: center;
}
.single-top__footer .single-top__footer-right .single-top__footer-accounts ul li {
  background-color: #000;
  padding: 0 5px;
  line-height: 30px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 4px;
}
.single-top__footer .single-top__footer-right .single-top__footer-accounts ul li:last-child {
  margin-left: 0;
}
.single-top__footer .single-top__footer-center {
  background-color: #17a404;
  border-radius: 60px;
  height: 71px;
  display: flex;
  align-items: center;
  padding: 0 26px 0 25px;
  box-shadow: 0 10px 30px -9px rgba(23, 164, 4, 0.4);
  transition: 0.3s;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  max-width: 300px;
}
.single-top__footer .single-top__footer-center .single-top__footer-add-cart {
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  padding-left: 15px;
  margin-left: 23px;
  position: relative;
  line-height: 71px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.single-top__footer .single-top__footer-center .single-top__footer-add-cart:after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 20px;
  box-shadow: -6px 0px 13px -8px rgba(0, 0, 0, 0.5);
}
.single-top__footer .single-top__footer-center .single-top__footer-cart-basket {
  display: flex;
  align-items: center;
}
.single-top__footer .single-top__footer-center .single-top__footer-cart-basket i {
  color: #ffffff;
  cursor: pointer;
}
.single-top__footer .single-top__footer-center .single-top__footer-cart-basket i.icon-pluse {
  font-size: 13px;
}
.single-top__footer .single-top__footer-center .single-top__footer-cart-basket i.icon-minus {
  font-size: 3px;
}
.single-top__footer .single-top__footer-center .single-top__footer-cart-basket .count {
  color: #ffffff;
  font-size: 29px;
  font-weight: 400;
  margin-right: 21px;
  margin-left: 21px;
}
.single-top__footer .single-top__footer-center:hover {
  box-shadow: none;
}
.single-top__footer .single-top__footer-left {
  flex: 0 0 calc(50% - 150px);
  max-width: calc(50% - 150px);
  padding-right: 15px;
}
.single-top__footer .single-top__footer-left .single-top__footer-notice {
  display: flex;
  align-items: center;
}
.single-top__footer .single-top__footer-left .single-top__footer-notice i {
  font-size: 21px;
  color: #ff3600;
  margin-left: 20px;
}
.single-top__footer .single-top__footer-left .single-top__footer-notice .single-top__footer-notice-desc .title {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}
.single-top__footer .single-top__footer-left .single-top__footer-notice .single-top__footer-notice-desc p {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}

.single-top__swiper {
  overflow: visible;
}
.single-top__swiper .swiper-slide {
  opacity: 0.3;
  transition: 0.3s;
}
.single-top__swiper .slide-active {
  opacity: 1;
}

.select-sec {
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 0;
}
.select-sec__item {
  max-width: 700px;
  margin: 0 auto;
}
.select-sec__item ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  padding: 6px;
  list-style: none;
  margin: 0;
}
.select-sec__item ul li {
  flex: 1;
  padding: 0;
  transition: all 0.25s ease;
}
.select-sec__item ul li a {
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.select-sec__item ul li a span {
  font-size: 14px;
  font-weight: 600;
  color: #888;
}
.select-sec__item ul li a:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.select-sec__item ul li a:hover span {
  color: #7c3aed;
}
.select-sec__item ul li.active a, .select-sec__item ul li:active a {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}
.select-sec__item ul li.active a span, .select-sec__item ul li:active a span {
  color: #fff;
}

#single-cart .cart__list-item {
  padding: 0;
  margin-bottom: 25px;
}
#single-cart .cart__list-item .cart__allow-accounts {
  padding: 0;
  background-color: transparent;
  margin: 0;
}
#single-cart .cart__list-item .cart__allow-accounts .cart__allow-accounts {
  padding: 0;
  margin: 0;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  backdrop-filter: blur(4px);
}
.loading .ring {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: transparent;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  text-align: center;
  line-height: 150px;
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #3c3c3c;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.loading .ring:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #fff000;
  border-right: 3px solid #fff000;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}
.loading span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animate 2s linear infinite;
}
.loading span:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff000;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px #fff000;
}
@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

.price-mobile {
  display: none;
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0 12px;
  pointer-events: none;
}
.price-mobile__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  border-radius: 18px;
  box-shadow: 0 14px 40px -10px rgba(15, 11, 72, 0.25), 0 0 0 1px rgba(15, 11, 72, 0.04);
}
.price-mobile__price {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.price-mobile__price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.price-mobile__price-current {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
  direction: ltr;
}
.price-mobile__price-unit {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
}
.price-mobile__price-discount {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  direction: ltr;
  box-shadow: 0 4px 8px -3px rgba(220, 38, 38, 0.5);
}
.price-mobile__price-old {
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.4);
  text-decoration: line-through;
  direction: ltr;
}
.price-mobile__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 12px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.price-mobile__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}
.price-mobile__cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(124, 58, 237, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.price-mobile__cta:active {
  transform: translateY(0);
}
.price-mobile__cta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.price-mobile__cta-label {
  position: relative;
  z-index: 1;
}
.price-mobile__cta-chev {
  position: relative;
  z-index: 1;
  opacity: 0.85;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.price-mobile__cta:hover .price-mobile__cta-chev {
  transform: translateX(-2px);
}

[data-theme=dark] .price-mobile__bar {
  background: rgba(19, 16, 63, 0.92);
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .price-mobile__price-current {
  color: #f0ecff;
}
[data-theme=dark] .price-mobile__price-unit {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .price-mobile__price-old {
  color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 380px) {
  .price-mobile {
    padding: 0 8px;
  }
  .price-mobile__bar {
    padding: 7px 7px 7px 12px;
    gap: 8px;
  }
  .price-mobile__price-current {
    font-size: 16px;
  }
  .price-mobile__cta {
    height: 44px;
    padding: 0 13px 0 10px;
    gap: 6px;
    font-size: 13px;
  }
  .price-mobile__cta-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .price-mobile__cta-ico svg {
    width: 14px;
    height: 14px;
  }
}
/* keyframe */
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-share {
  border: 1px solid #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-share > i {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-share ul li a {
  border: 1px solid #c7c5ee;
  background-color: #070525;
}
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-share ul li a i {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-heart {
  border: 1px solid #c7c5ee;
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-right .single-top__header-heart i {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-center h2,
[data-theme=dark] .single-top__header .single-top__header-center h1,
[data-theme=dark] .single-top__header .single-top__header-center h3,
[data-theme=dark] .single-top__header .single-top__header-center h4 {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-center .title-en {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__header .single-top__header-left .single-top__header-agree {
  background-color: #c7c5ee;
  color: #070525;
}
[data-theme=dark] .single-top__header .single-top__header-left .single-top__header-agree i {
  color: #070525;
}
[data-theme=dark] .single-top__item__product {
  background: #0C093E;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
}
[data-theme=dark] .single-top__item__product__title h1 {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__title ul li i {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__title ul li span {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__title ul li small {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__title__rezayat span {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__title__rezayat small {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__sub-title ul li span {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__sub-title ul li small {
  color: #C6C6C6;
}
[data-theme=dark] .single-top__item__product__region__title p {
  color: #F5F5F5;
}
[data-theme=dark] .single-top__item__product__region__list ul li a {
  color: #F5F5F5;
  border-color: #3D3D3D;
}
[data-theme=dark] .single-top__item__product__sub--title p {
  color: #F0F0F0;
}
[data-theme=dark] .single-top__item__product__sub--title__search__form input {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__item__product__sub--title__search__form input::placeholder {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__item__product__sub--title__search__form i {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__item__product__type .scrollbar-track {
  background-color: #0B0662 !important;
}
[data-theme=dark] .single-top__item__product__type .scrollbar-thumb {
  background-color: #150D84 !important;
}
[data-theme=dark] .single-top__item__product__type__item {
  background-color: rgba(11, 6, 98, 0.4);
}
[data-theme=dark] .single-top__item__product__type__item h2 {
  color: #F5F5F5;
}
[data-theme=dark] .single-top__item__product__type__item:hover {
  background-color: #0B0662;
}
[data-theme=dark] .single-top__item__product__type__item.active {
  background-color: #0B0662;
}
[data-theme=dark] .single-top__item__product__type__item__price {
  color: white;
  background-color: #12120f;
}
[data-theme=dark] .single-top__item__product__alert__content {
  background-color: #050321;
}
[data-theme=dark] .single-top__item__product__alert__content p {
  color: #B5B5B5;
}
[data-theme=dark] .single-top__item__product__detail__price {
  background-color: #050321;
}
[data-theme=dark] .single-top__item__product__detail__price__title span {
  color: #DFDFDF;
}
[data-theme=dark] .single-top__item__product__detail__price__content del {
  color: #BABABA;
}
[data-theme=dark] .single-top__item__product__detail__price__content p {
  color: #F1F1F1;
}
[data-theme=dark] .single-top__item__product__detail__cart__count {
  color: #DFDFDF;
}
[data-theme=dark] .single-top__item__product__detail__cart__count form span {
  background-color: #050321;
  color: #F4F4F4;
}
[data-theme=dark] .single-top__item__product__detail__cart__count form span input {
  color: #777777;
}
[data-theme=dark] .single-top__item__product__detail__account {
  background: #050321;
  border: 1px solid #436EDC;
  border-radius: 18px;
}
[data-theme=dark] .single-top__item__product__detail__account__wrapper__label span {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__item__product__detail__account span {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__item__product__detail__account i {
  color: #DBDBDB;
}
[data-theme=dark] .single-top__desc p {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__desc p a i {
  background-color: #c7c5ee;
  color: #0f0d2d;
}
[data-theme=dark] .single-top__meta ul li::before {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__meta ul li .single-top__meta-title {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__meta ul li .single-top__meta-value {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__footer .single-top__footer-right .single-top__footer-feature i {
  color: #908dd3;
}
[data-theme=dark] .single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .title {
  color: #908dd3;
}
[data-theme=dark] .single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .value {
  color: #908dd3;
}
[data-theme=dark] .single-top__footer .single-top__footer-right .single-top__footer-accounts span {
  color: #908dd3;
}
[data-theme=dark] .single-top__footer .single-top__footer-right .single-top__footer-accounts ul li {
  color: #070525;
  background-color: #c7c5ee;
}
[data-theme=dark] .single-top__footer .single-top__footer-left .single-top__footer-notice .single-top__footer-notice-desc .title {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__footer .single-top__footer-left .single-top__footer-notice .single-top__footer-notice-desc p {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__price .single-top__price-item {
  background-color: #070525;
}
[data-theme=dark] .single-top__price .single-top__price-item .price {
  color: #908dd3;
}
[data-theme=dark] .single-top__price .single-top__price-item .old {
  color: #c7c5ee;
}
[data-theme=dark] .single-top__price .single-top__price-item .old::before {
  background-color: #c7c5ee;
}
[data-theme=dark] .single-top__price .single-top__price-item .price__unit {
  color: #908dd3;
}
[data-theme=dark] .single-top__logo {
  background-color: #070525;
}
[data-theme=dark] .select-sec__item ul {
  background: #06053A;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
}
[data-theme=dark] .select-sec__item ul li {
  border-color: #436EDC;
}
[data-theme=dark] .select-sec__item ul li a span {
  color: #FAFAFA;
}
[data-theme=dark] #single-cart .cart__list-item {
  padding: 0;
  margin-bottom: 25px;
}
[data-theme=dark] #single-cart .cart__list-item .cart__allow-accounts {
  padding: 0;
  background-color: transparent;
  margin: 0;
}
[data-theme=dark] #single-cart .cart__list-item .cart__allow-accounts .cart__allow-accounts {
  padding: 0;
  margin: 0;
}
[data-theme=dark] #single-cart .cart__list-item .cart__allow-accounts .cart__allow-accounts span {
  color: #DBDBDB;
}
[data-theme=dark] .price-mobile__item__price__number del {
  color: #F1F1F1;
}
[data-theme=dark] .price-mobile__item__price__number p {
  color: #F1F1F1;
}
@media (max-width: 992px) {
  [data-theme=dark] .single-top__item__image {
    margin-bottom: 30px;
  }
  [data-theme=dark] .single-top__item__product__detail__cart {
    padding: 16px 0px;
  }
  [data-theme=dark] .single-top__item__product__detail__account__wrapper > .row > div:first-child {
    padding-left: 0px;
    margin-bottom: 20px;
  }
  [data-theme=dark] .single-top__item__product__type__item {
    min-height: 43px;
  }
  [data-theme=dark] .single-top__item__product__type__item__wrapper > div:nth-child(odd) {
    padding-left: 0px;
  }
  [data-theme=dark] .single-top__item__product__type__item__wrapper > div:nth-child(even) {
    padding-right: 0px;
  }
  [data-theme=dark] .single-top__item__product__title__approved {
    margin-right: 0px;
  }
  [data-theme=dark] .single-top__item__product__title.--mobile {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  [data-theme=dark] .single-top__item__product__title.--mobile ul {
    width: 100%;
  }
  [data-theme=dark] .single-top__item__product__title.--mobile ul li {
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0C093E;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  }
  [data-theme=dark] .single-top__item__product__title.--mobile ul li:first-child {
    margin-bottom: 5px;
    display: block;
  }
  [data-theme=dark] .single-top__item__product__title.--mobile ul li:first-child > div {
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    color: #fff;
  }
}

@media (max-width: 992px) {
  .single-top__item__image {
    margin-bottom: 30px;
  }
  .single-top__item__product__detail__cart {
    padding: 16px 0px;
  }
  .single-top__item__product__detail__account__wrapper > .row > div:first-child {
    padding-left: 0px;
    margin-bottom: 20px;
  }
  .single-top__item__product__type__item {
    min-height: 43px;
  }
  .single-top__item__product__type__item__wrapper > div:nth-child(odd) {
    padding-left: 0px;
  }
  .single-top__item__product__type__item__wrapper > div:nth-child(even) {
    padding-right: 0px;
  }
  .single-top__item__product__title__approved {
    margin-right: 0px;
  }
  .single-top__item__product__title.--mobile {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  .single-top__item__product__title.--mobile ul {
    width: 100%;
  }
  .single-top__item__product__title.--mobile ul li {
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  }
  .single-top__item__product__title.--mobile ul li:first-child {
    margin-bottom: 5px;
    display: block;
  }
  .single-top__item__product__title.--mobile ul li:first-child > div {
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
  }
}
@media (min-width: 993px) {
  .single-top__item__product__title.--mobile {
    display: none;
  }
}
@keyframes sp-popover-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes sp-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sp__legend {
  margin-top: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02));
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
}
.sp__legend-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.2);
}
.sp__legend-head > svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.sp__legend-head > span {
  font-size: 12px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}
.sp__legend-head > small {
  flex: 1;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.sp__legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sp__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 9px;
  min-width: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.sp__legend-item:hover {
  border-color: rgba(var(--lg-rgb, 124, 58, 237), 0.4);
  transform: translateY(-1px);
}
.sp__legend-item[data-legend-type=info] {
  --lg-c: #6366f1;
  --lg-rgb: 99, 102, 241;
}
.sp__legend-item[data-legend-type=terms] {
  --lg-c: #0891b2;
  --lg-rgb: 8, 145, 178;
}
.sp__legend-item[data-legend-type=warranty] {
  --lg-c: #10b981;
  --lg-rgb: 16, 185, 129;
}
.sp__legend-item[data-legend-type=faq] {
  --lg-c: #f59e0b;
  --lg-rgb: 245, 158, 11;
}
.sp__legend-ico {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--lg-rgb, 124, 58, 237), 0.12);
  color: var(--lg-c, #7c3aed);
  flex-shrink: 0;
}
.sp__legend-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.sp__legend-text strong {
  font-size: 12px;
  font-weight: 800;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp__legend-text small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .sp__legend {
    padding: 10px 12px;
    margin-top: 10px;
    border-radius: 11px;
  }
  .sp__legend-head {
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 7px;
  }
  .sp__legend-head > span {
    font-size: 11.5px;
  }
  .sp__legend-head > small {
    font-size: 9.5px;
  }
  .sp__legend-list {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .sp__legend-item {
    padding: 6px 9px;
    gap: 8px;
    border-radius: 8px;
  }
  .sp__legend-item:hover {
    transform: translateX(-2px);
  }
  .sp__legend-ico {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 7px;
  }
  .sp__legend-ico svg {
    width: 13px !important;
    height: 13px !important;
  }
  .sp__legend-text strong {
    font-size: 11.5px;
    white-space: normal;
  }
  .sp__legend-text small {
    font-size: 9.5px;
    white-space: normal;
  }
}
[data-theme=dark] .sp__legend {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.04));
  border-color: rgba(167, 139, 250, 0.25);
}
[data-theme=dark] .sp__legend-head {
  border-bottom-color: rgba(167, 139, 250, 0.25);
}
[data-theme=dark] .sp__legend-head > svg {
  color: #c4b5fd;
}
[data-theme=dark] .sp__legend-head > span {
  color: #f0ecff;
}
[data-theme=dark] .sp__legend-head > small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .sp__legend-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .sp__legend-item[data-legend-type=info] {
  --lg-c: #a5b4fc;
  --lg-rgb: 165, 180, 252;
}
[data-theme=dark] .sp__legend-item[data-legend-type=terms] {
  --lg-c: #67e8f9;
  --lg-rgb: 103, 232, 249;
}
[data-theme=dark] .sp__legend-item[data-legend-type=warranty] {
  --lg-c: #6ee7b7;
  --lg-rgb: 110, 231, 183;
}
[data-theme=dark] .sp__legend-item[data-legend-type=faq] {
  --lg-c: #fcd34d;
  --lg-rgb: 252, 211, 77;
}
[data-theme=dark] .sp__legend-text strong {
  color: #f0ecff;
}
[data-theme=dark] .sp__legend-text small {
  color: rgba(255, 255, 255, 0.55);
}

.sp__popover {
  --pp-c1: #7c3aed;
  --pp-c2: #5b21b6;
  --pp-c1-rgb: 124, 58, 237;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sp__popover[hidden] {
  display: none;
}
.sp__popover[data-type=info] {
  --pp-c1: #6366f1;
  --pp-c2: #4338ca;
  --pp-c1-rgb: 99, 102, 241;
}
.sp__popover[data-type=warranty] {
  --pp-c1: #10b981;
  --pp-c2: #047857;
  --pp-c1-rgb: 16, 185, 129;
}
.sp__popover[data-type=faq] {
  --pp-c1: #f59e0b;
  --pp-c2: #b45309;
  --pp-c1-rgb: 245, 158, 11;
}
.sp__popover[data-type=terms] {
  --pp-c1: #0891b2;
  --pp-c2: #155e75;
  --pp-c1-rgb: 8, 145, 178;
}
.sp__popover-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 40, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  animation: sp-backdrop-in 0.25s ease;
  cursor: pointer;
}
.sp__popover-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 22px;
  box-shadow: 0 32px 80px -16px rgba(var(--pp-c1-rgb), 0.4), 0 8px 30px -10px rgba(15, 11, 72, 0.25), 0 0 0 1px rgba(15, 11, 72, 0.03);
  animation: sp-popover-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  isolation: isolate;
}
.sp__popover-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, var(--pp-c1) 0%, var(--pp-c2) 100%);
}
.sp__popover-banner-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
  filter: blur(20px);
}
.sp__popover-banner-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 80%);
}
.sp__popover-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.sp__popover-close:hover {
  background: #fff;
  color: var(--pp-c2);
  transform: rotate(90deg);
}
.sp__popover-head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 24px 20px;
}
.sp__popover-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp__popover-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.sp__popover-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-c2);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sp__popover-ico svg {
  width: 22px;
  height: 22px;
}
.sp__popover-title {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.sp__popover-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px 18px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(15, 11, 72, 0.78);
}
.sp__popover-body::-webkit-scrollbar {
  width: 4px;
}
.sp__popover-body::-webkit-scrollbar-track {
  background: transparent;
}
.sp__popover-body::-webkit-scrollbar-thumb {
  background: rgba(15, 11, 72, 0.15);
  border-radius: 4px;
}
.sp__popover-body p {
  margin: 0 0 10px;
}
.sp__popover-body p:last-child {
  margin-bottom: 0;
}
.sp__popover-body strong {
  color: #0f0b48;
  font-weight: 800;
}
.sp__popover-body ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp__popover-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(var(--pp-c1-rgb), 0.06), rgba(var(--pp-c1-rgb), 0.02));
  border: 1px solid rgba(var(--pp-c1-rgb), 0.15);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.78);
  line-height: 1.7;
}
.sp__popover-body ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp-c1), var(--pp-c2));
  flex-shrink: 0;
  margin-top: 3px;
  box-shadow: 0 2px 6px rgba(var(--pp-c1-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--pp-c1), var(--pp-c2));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px, cover;
}
.sp__popover-faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp__popover-faq-item {
  background: #fafafe;
  border: 1px solid #ece7f7;
  border-radius: 11px;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.sp__popover-faq-item[open] {
  border-color: rgba(var(--pp-c1-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--pp-c1-rgb), 0.06), rgba(var(--pp-c1-rgb), 0.02));
}
.sp__popover-faq-item[open] .sp__popover-faq-q-chev {
  transform: rotate(180deg);
}
.sp__popover-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  line-height: 1.5;
}
.sp__popover-faq-q::-webkit-details-marker {
  display: none;
}
.sp__popover-faq-q::marker {
  display: none;
}
.sp__popover-faq-q-text {
  flex: 1;
  min-width: 0;
}
.sp__popover-faq-q-chev {
  flex-shrink: 0;
  color: rgba(var(--pp-c1-rgb), 0.6);
  transition: transform 0.25s ease;
}
.sp__popover-faq-a {
  padding: 0 14px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.7);
  line-height: 1.85;
}
.sp__popover-foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
  margin-top: auto;
}
.sp__popover-foot-btn {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--pp-c1), var(--pp-c2));
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(var(--pp-c1-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sp__popover-foot-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(var(--pp-c1-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@media (max-width: 768px) {
  .sp__popover {
    padding: 16px;
  }
  .sp__popover-panel {
    width: 100%;
    max-width: 460px;
    max-height: min(82vh, 82dvh);
    border-radius: 18px;
  }
  .sp__popover-banner {
    height: 96px;
    border-radius: 18px 18px 0 0;
  }
  .sp__popover-close {
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
  }
  .sp__popover-head {
    padding: 24px 18px 16px;
    gap: 11px;
  }
  .sp__popover-ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .sp__popover-ico svg {
    width: 20px;
    height: 20px;
  }
  .sp__popover-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .sp__popover-title {
    font-size: 15px;
    line-height: 1.35;
  }
  .sp__popover-body {
    padding: 14px 18px 18px;
    font-size: 13px;
    line-height: 1.85;
    -webkit-overflow-scrolling: touch;
  }
  .sp__popover-body ul {
    gap: 6px;
    margin-top: 10px;
  }
  .sp__popover-body ul li {
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.65;
    gap: 9px;
  }
  .sp__popover-body ul li::before {
    width: 15px;
    height: 15px;
    margin-top: 2px;
  }
  .sp__popover-faq {
    gap: 5px;
  }
  .sp__popover-faq-item {
    border-radius: 10px;
  }
  .sp__popover-faq-q {
    padding: 10px 12px;
    font-size: 12.5px;
    gap: 8px;
  }
  .sp__popover-faq-q-text {
    line-height: 1.45;
  }
  .sp__popover-faq-a {
    padding: 0 12px 10px;
    font-size: 12.5px;
    line-height: 1.8;
  }
  .sp__popover-foot {
    padding: 12px 18px 16px;
  }
  .sp__popover-foot-btn {
    height: 44px;
    font-size: 13.5px;
    border-radius: 12px;
  }
}
@media (max-width: 380px) {
  .sp__popover {
    padding: 12px;
  }
  .sp__popover-banner {
    height: 88px;
  }
  .sp__popover-head {
    padding: 22px 14px 14px;
    gap: 9px;
  }
  .sp__popover-ico {
    width: 42px;
    height: 42px;
  }
  .sp__popover-ico svg {
    width: 18px;
    height: 18px;
  }
  .sp__popover-title {
    font-size: 14px;
  }
  .sp__popover-body {
    padding: 12px 14px 16px;
    font-size: 12.5px;
  }
  .sp__popover-body ul li {
    padding: 8px 10px;
    font-size: 12px;
  }
  .sp__popover-faq-q {
    font-size: 12px;
    padding: 9px 11px;
  }
  .sp__popover-faq-a {
    font-size: 12px;
    padding: 0 11px 9px;
  }
  .sp__popover-foot {
    padding: 10px 14px 14px;
  }
  .sp__popover-foot-btn {
    height: 42px;
    font-size: 13px;
  }
}

[data-theme=dark] .sp__popover-panel {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .sp__popover-body {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .sp__popover-body strong {
  color: #fff;
}
[data-theme=dark] .sp__popover-body ul li {
  background: linear-gradient(135deg, rgba(var(--pp-c1-rgb), 0.16), rgba(var(--pp-c1-rgb), 0.05));
  border-color: rgba(var(--pp-c1-rgb), 0.3);
  color: rgba(255, 255, 255, 0.85);
}
[data-theme=dark] .sp__popover-faq-item {
  background: #1a1740;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .sp__popover-faq-item[open] {
  background: linear-gradient(135deg, rgba(var(--pp-c1-rgb), 0.18), rgba(var(--pp-c1-rgb), 0.06));
  border-color: rgba(var(--pp-c1-rgb), 0.45);
}
[data-theme=dark] .sp__popover-faq-q {
  color: #f0ecff;
}
[data-theme=dark] .sp__popover-faq-q-chev {
  color: rgba(var(--pp-c1-rgb), 0.7);
}
[data-theme=dark] .sp__popover-faq-a {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .sp__popover-foot {
  border-top-color: rgba(255, 255, 255, 0.07);
}

.spvn__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.spvn__row {
  display: block;
  cursor: pointer;
  border-radius: 12px;
  border: 1.5px solid #ede8f8;
  background: #faf9fe;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  position: relative;
}
.spvn__row input[type=radio] {
  display: none;
}
.spvn__row:hover {
  border-color: #c4b5f4;
  background: #f5f2ff;
}
.spvn__row:has(input:checked) {
  border-color: #7c3aed;
  background: #f3f0ff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.spvn__row:has(input:checked) .spvn__radio {
  border-color: #7c3aed;
  background: #7c3aed;
}
.spvn__row:has(input:checked) .spvn__radio::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.spvn__row:has(input:checked) .spvn__price-val {
  color: #7c3aed;
}
.spvn__row--popular {
  border-color: #f59e0b;
  background: #fffbeb;
}
.spvn__row--popular:hover {
  border-color: #d97706;
  background: #fef3c7;
}
.spvn__row--popular:has(input:checked) {
  border-color: #d97706;
  background: #fef3c7;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.spvn__row--popular:has(input:checked) .spvn__price-val {
  color: #b45309;
}

.spvn__popular-ribbon {
  position: absolute;
  top: -1px;
  right: 12px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 9px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 0 0 7px 7px;
  letter-spacing: 0.02em;
  z-index: 1;
}

.spvn__row-inner {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
}

.spvn__top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.spvn__radio {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #c4b5f4;
  background: #fff;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.spvn__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.spvn__img {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f0ff, #eef0ff);
  border: 1px solid #ede8f8;
}
.spvn__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.spvn__info {
  flex: 1;
  min-width: 0;
}
.spvn__info strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.spvn__period {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.spvn__period--monthly {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.spvn__period--yearly {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #6ee7b7;
}

[data-theme=dark] .spvn__period--monthly {
  background: #0e1d3a;
  color: #93c5fd;
  border-color: #1e3a6a;
}
[data-theme=dark] .spvn__period--yearly {
  background: #0a2218;
  color: #6ee7b7;
  border-color: #1a4a30;
}

.spvn__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

.spvn__tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.spvn__tag--red {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}
.spvn__tag--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.spvn__tag--green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.spvn__tag--purple {
  background: #f3f0ff;
  color: #7c3aed;
  border: 1px solid #ddd4f3;
}
.spvn__tag--orange {
  background: #fff7ed;
  color: #ea580c;
  border: 1px solid #fed7aa;
}

.spvn__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: #f0edfb;
  border-radius: 8px;
  border: 1px solid #ddd6f5;
}

.spvn__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.spvn__meta-label {
  font-size: 10px;
  color: #6b5fa0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.spvn__meta-label svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.spvn__meta-val {
  font-size: 10px;
  font-weight: 800;
  color: #1a1a2e;
  text-align: left;
}

.spvn__warranty-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.spvn__toggle {
  display: flex;
  gap: 2px;
  background: #ede8f8;
  border-radius: 7px;
  padding: 2px;
}

.spvn__toggle-btn {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #6b6b8a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  text-align: center;
}
.spvn__toggle-btn.is-active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.28);
}
.spvn__toggle-btn:not(.is-active):hover {
  background: #d8d0f0;
  color: #4b0082;
}

.spvn__warranty-info {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: #7c3aed;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1;
}
.spvn__warranty-info svg {
  opacity: 0.9;
  flex-shrink: 0;
}
.spvn__warranty-info.is-no-warranty {
  background: #f59e0b;
  color: #fff;
}

.spvn__bottom {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid #ede8f8;
}

.spvn__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.spvn__price-val {
  font-size: 19px;
  font-weight: 900;
  color: #1a1a2e;
  direction: ltr;
  letter-spacing: -0.02em;
  transition: opacity 0.14s, transform 0.14s, color 0.14s;
}

.spvn__price small {
  font-size: 10px;
  color: #8b8bab;
  font-weight: 600;
}

.spvn__actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.spvn__action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #ede8f8;
  background: #fff;
  color: #8b7baa;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.spvn__action:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
.spvn__action svg {
  pointer-events: none;
  display: block;
}

[data-theme=dark] .spvn__row {
  background: #16131f;
  border-color: #2c2645;
}
[data-theme=dark] .spvn__row:hover {
  background: #1c1830;
  border-color: #4a3f78;
}
[data-theme=dark] .spvn__row:has(input:checked) {
  background: #1e1940;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}
[data-theme=dark] .spvn__row:has(input:checked) .spvn__radio {
  border-color: #7c3aed;
  background: #7c3aed;
}
[data-theme=dark] .spvn__row:has(input:checked) .spvn__price-val {
  color: #c4b5f4;
}
[data-theme=dark] .spvn__row--popular {
  background: #1a1508;
  border-color: #6b4a0a;
}
[data-theme=dark] .spvn__row--popular:hover {
  background: #211c09;
  border-color: #92620d;
}
[data-theme=dark] .spvn__row--popular:has(input:checked) {
  background: #221900;
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
[data-theme=dark] .spvn__row--popular:has(input:checked) .spvn__price-val {
  color: #fbbf24;
}
[data-theme=dark] .spvn__radio {
  border-color: #4a3f78;
  background: #16131f;
}
[data-theme=dark] .spvn__img {
  background: linear-gradient(135deg, #1e1940, #161330);
  border-color: #2c2645;
}
[data-theme=dark] .spvn__info strong {
  color: #f0ecff;
}
[data-theme=dark] .spvn__period--monthly {
  background: #0d1a2e;
  color: #7dd3fc;
  border-color: #1e3a5a;
}
[data-theme=dark] .spvn__period--yearly {
  background: #0b1f15;
  color: #6ee7b7;
  border-color: #1a4530;
}
[data-theme=dark] .spvn__meta {
  background: #252040;
  border-color: #3a3465;
}
[data-theme=dark] .spvn__meta-label {
  color: #c4bde8;
}
[data-theme=dark] .spvn__meta-label svg {
  opacity: 0.9;
}
[data-theme=dark] .spvn__meta-val {
  color: #ffffff;
}
[data-theme=dark] .spvn__toggle {
  background: #2a2448;
}
[data-theme=dark] .spvn__toggle-btn {
  color: #a094cc;
}
[data-theme=dark] .spvn__toggle-btn.is-active {
  background: #7c3aed;
  color: #fff;
}
[data-theme=dark] .spvn__toggle-btn:not(.is-active):hover {
  background: #362f60;
  color: #c4b5f4;
}
[data-theme=dark] .spvn__warranty-info {
  background: #5b21b6;
  color: #ede9fe;
}
[data-theme=dark] .spvn__warranty-info.is-no-warranty {
  background: #b45309;
  color: #fef3c7;
}
[data-theme=dark] .spvn__bottom {
  border-top-color: #2c2645;
}
[data-theme=dark] .spvn__price-val {
  color: #f0ecff;
}
[data-theme=dark] .spvn__price small {
  color: #6b6090;
}
[data-theme=dark] .spvn__action {
  background: #1c1830;
  border-color: #2c2645;
  color: #8070b0;
}
[data-theme=dark] .spvn__action:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

@media (max-width: 760px) {
  .spvn__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .spvn__row-inner {
    padding: 9px 10px;
    gap: 6px;
  }
  .spvn__price-val {
    font-size: 17px;
  }
}
.ldrop {
  margin: 24px 0 28px;
}
.ldrop__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px 24px 22px;
  color: #fff;
  background: radial-gradient(ellipse 120% 80% at 0% 0%, rgba(255, 45, 85, 0.4), transparent 60%), radial-gradient(ellipse 90% 60% at 100% 100%, rgba(245, 158, 11, 0.3), transparent 65%), linear-gradient(135deg, #0a0118 0%, #1a0633 100%);
  box-shadow: 0 30px 70px -20px rgba(255, 45, 85, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.3s ease;
}
.ldrop__card:hover {
  transform: translateY(-2px);
}
.ldrop__card.is-urgent {
  animation: ldrop-pulse-card 1.6s ease-in-out infinite;
}
.ldrop__card.is-urgent .ldrop__timer {
  background: rgba(255, 45, 85, 0.18);
  border-color: rgba(255, 45, 85, 0.5);
}
.ldrop__card.is-expired {
  filter: grayscale(0.6) brightness(0.85);
}
.ldrop__card.is-expired .ldrop__cta {
  pointer-events: none;
  opacity: 0.55;
}
@keyframes ldrop-pulse-card {
  0%, 100% {
    box-shadow: 0 30px 70px -20px rgba(255, 45, 85, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  }
  50% {
    box-shadow: 0 30px 90px -18px rgba(255, 45, 85, 0.7), 0 0 0 1px rgba(255, 45, 85, 0.25) inset;
  }
}
.ldrop__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ldrop__bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.ldrop__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
}
.ldrop__bg-orb--1 {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, #ff2d55, transparent 70%);
  animation: ldrop-orb-1 8s ease-in-out infinite;
}
.ldrop__bg-orb--2 {
  width: 280px;
  height: 280px;
  bottom: -100px;
  left: -60px;
  background: radial-gradient(circle, #f59e0b, transparent 70%);
  animation: ldrop-orb-2 10s ease-in-out infinite;
}
@keyframes ldrop-orb-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 20px) scale(1.1);
  }
}
@keyframes ldrop-orb-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -25px) scale(1.08);
  }
}
.ldrop__bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ldrop__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.ldrop__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
}
.ldrop__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: ldrop-blink 1.2s ease-in-out infinite;
}
@keyframes ldrop-blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
.ldrop__eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #ff2d55, #c1185b);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(255, 45, 85, 0.6);
}
.ldrop__eyebrow-tag svg {
  flex-shrink: 0;
}
.ldrop__eyebrow-tag--alt {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px -4px rgba(245, 158, 11, 0.6);
}
.ldrop__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
}
.ldrop__visual {
  position: relative;
}
.ldrop__visual-frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  padding: 22px;
  overflow: visible;
  isolation: isolate;
}
.ldrop__visual-img {
  position: relative;
  z-index: 2;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #2a1248 0%, #14082a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 0 30px rgba(255, 45, 85, 0.28), 0 18px 36px -8px rgba(255, 45, 85, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.ldrop__visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ldrop__visual-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.55), transparent 65%);
  filter: blur(28px);
  z-index: 1;
  animation: ldrop-glow-pulse 3s ease-in-out infinite;
}
.ldrop__visual-badge {
  position: absolute;
  bottom: -6px;
  left: -10px;
  z-index: 5;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d55, #c1185b);
  border: 4px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #fff;
  box-shadow: 0 14px 30px -6px rgba(255, 45, 85, 0.85), 0 0 0 1px rgba(193, 24, 91, 0.6);
  transform: rotate(-10deg);
  animation: ldrop-badge-wiggle 2.4s ease-in-out infinite;
}
.ldrop__visual-badge strong {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.ldrop__visual-badge small {
  font-size: 10.5px;
  font-weight: 800;
  margin-top: 3px;
  letter-spacing: 0.04em;
}
@keyframes ldrop-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes ldrop-glow-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes ldrop-badge-wiggle {
  0%, 100% {
    transform: rotate(-12deg) scale(1);
  }
  50% {
    transform: rotate(-8deg) scale(1.06);
  }
}
.ldrop__rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 6deg, transparent 6deg 24deg);
  mix-blend-mode: overlay;
  animation: ldrop-rays-spin 22s linear infinite;
  pointer-events: none;
  border-radius: 50%;
}
@keyframes ldrop-rays-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ldrop__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ldrop__title {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff 0%, #ffd5dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ldrop__sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.7;
}
.ldrop__features {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ldrop__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.ldrop__features li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  box-sizing: border-box;
}
.ldrop__timer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.ldrop__timer-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ldrop__timer-units {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  direction: ltr;
  margin-right: auto;
}
.ldrop__timer-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 4px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  line-height: 1;
}
.ldrop__timer-unit small {
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.ldrop__timer-unit--seconds .ldrop__timer-num {
  color: #fbbf24;
  animation: ldrop-tick 1s ease-in-out infinite;
}
.ldrop__timer-num {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  font-family: "SF Mono", "Menlo", monospace, "Yekan Bakh";
  letter-spacing: 0.5px;
}
.ldrop__timer-sep {
  font-size: 18px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.45);
  animation: ldrop-tick 1s ease-in-out infinite;
}
@keyframes ldrop-tick {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0.4;
  }
}
.ldrop__stock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ldrop__stock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
}
.ldrop__stock-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.7);
}
.ldrop__stock-label svg {
  color: #f59e0b;
  flex-shrink: 0;
}
.ldrop__stock-value {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}
.ldrop__stock-value strong {
  color: #f59e0b;
  font-weight: 900;
  font-size: 13px;
  margin-left: 2px;
}
.ldrop__stock-bar {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ldrop__stock-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ff2d55);
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
  position: relative;
}
.ldrop__stock-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: ldrop-stock-shimmer 1.8s linear infinite;
}
@keyframes ldrop-stock-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.ldrop__stock-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #f59e0b;
}
.ldrop__stock-warn svg {
  flex-shrink: 0;
}
.ldrop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
.ldrop__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ldrop__price-old {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  direction: ltr;
}
.ldrop__price-now {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  direction: ltr;
}
.ldrop__price-now strong {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ldrop__price-now span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.ldrop__price-save {
  font-size: 10.5px;
  font-weight: 800;
  color: #6ee7b7;
  letter-spacing: 0.02em;
}
.ldrop__cta {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff2d55, #c1185b);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 30px -8px rgba(255, 45, 85, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: ldrop-cta-pulse 2.4s ease-in-out infinite;
}
.ldrop__cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -6px rgba(255, 45, 85, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.ldrop__cta:active {
  transform: translateY(0);
}
.ldrop__cta svg {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.ldrop__cta span {
  position: relative;
  z-index: 2;
}
.ldrop__cta-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  left: -80%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  animation: ldrop-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ldrop-cta-pulse {
  0%, 100% {
    box-shadow: 0 14px 30px -8px rgba(255, 45, 85, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 14px 36px -6px rgba(255, 45, 85, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}
@keyframes ldrop-shine {
  0% {
    left: -80%;
  }
  60%, 100% {
    left: 130%;
  }
}
.ldrop__activity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  align-self: flex-start;
}
.ldrop__activity strong {
  color: #fff;
  font-weight: 800;
}
.ldrop__activity-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  animation: ldrop-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .ldrop {
    margin: 16px 0 22px;
  }
  .ldrop__card {
    padding: 18px 16px;
    border-radius: 20px;
  }
  .ldrop__eyebrow {
    gap: 6px;
    margin-bottom: 14px;
  }
  .ldrop__eyebrow-tag {
    font-size: 10px;
    padding: 4px 9px;
  }
  .ldrop__live {
    font-size: 10px;
    padding: 4px 9px 4px 7px;
  }
  .ldrop__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ldrop__visual {
    max-width: 220px;
    margin: 0 auto;
    width: 100%;
  }
  .ldrop__visual-frame {
    padding: 16px;
    border-radius: 50%;
  }
  .ldrop__visual-badge {
    width: 70px;
    height: 70px;
    bottom: -4px;
    left: -8px;
    right: auto;
    top: auto;
    border-width: 3px;
  }
  .ldrop__visual-badge strong {
    font-size: 21px;
  }
  .ldrop__visual-badge small {
    font-size: 9.5px;
  }
  .ldrop__details {
    gap: 12px;
  }
  .ldrop__title {
    font-size: 18px;
  }
  .ldrop__sub {
    font-size: 12px;
    line-height: 1.6;
  }
  .ldrop__features li {
    font-size: 11.5px;
  }
  .ldrop__timer {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ldrop__timer-label {
    font-size: 10px;
  }
  .ldrop__timer-units {
    gap: 3px;
  }
  .ldrop__timer-unit {
    min-width: 34px;
    padding: 3px 5px;
  }
  .ldrop__timer-unit small {
    font-size: 8px;
  }
  .ldrop__timer-num {
    font-size: 16px;
  }
  .ldrop__timer-sep {
    font-size: 16px;
  }
  .ldrop__stock-warn {
    font-size: 10px;
  }
  .ldrop__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
  }
  .ldrop__price {
    align-items: center;
    text-align: center;
  }
  .ldrop__price-now strong {
    font-size: 22px;
  }
  .ldrop__cta {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 13.5px;
  }
  .ldrop__activity {
    font-size: 10.5px;
    padding: 7px 10px;
  }
}
@media (max-width: 480px) {
  .ldrop__visual {
    max-width: 180px;
  }
  .ldrop__visual-badge {
    width: 60px;
    height: 60px;
  }
  .ldrop__visual-badge strong {
    font-size: 18px;
  }
  .ldrop__visual-badge small {
    font-size: 9px;
  }
  .ldrop__title {
    font-size: 16px;
  }
  .ldrop__price-now strong {
    font-size: 20px;
  }
}

.single-gallery {
  background: #f8f7fc;
  overflow: hidden;
  padding: 57px 0;
  margin-bottom: 64px;
}
.single-gallery__title {
  margin-bottom: 30px;
}
.single-gallery__title span {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.single-gallery__title i {
  margin-left: 20px;
}
.single-gallery__swiper {
  overflow: visible;
}
.single-gallery__item {
  position: relative;
  cursor: pointer;
}
.single-gallery__item figure {
  position: relative;
}
.single-gallery__item figure img {
  position: relative;
  z-index: 100;
  border-radius: 15px;
}
.single-gallery__item figure .shadow {
  position: absolute;
  top: 18px;
  right: 15px;
  left: 15px;
  bottom: -18px;
  -webkit-filter: blur(14px);
  filter: blur(10px);
  overflow: hidden;
  border-radius: 15px;
  z-index: 90;
}
.single-gallery__item:after {
  content: "\e925";
  font-family: "icomoon";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotateX(90deg);
  width: 50px;
  height: 50px;
  font-size: 21px;
  color: #ffffff;
  background-color: #f01919;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.single-gallery__item:hover:after {
  transform: translate(-50%, -50%) scale(1) rotateX(0);
  visibility: visible;
  opacity: 1;
}
.single-gallery__item--video .single-gallery__item-time {
  position: absolute;
  z-index: 120;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  bottom: 9px;
  left: 16px;
}
.single-gallery__item--video:after {
  content: "\e926";
  background-color: transparent;
  font-size: 49px;
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotateX(0);
}
.single-gallery__item--video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  opacity: 0.5;
  border-radius: 15px;
  z-index: 110;
  pointer-events: none;
}
.single-gallery__item--video:hover:after {
  animation: video-animate 0.5s;
}

@keyframes video-animate {
  0% {
    transform: translate(-50%, -50%) scale(1) rotateX(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotateX(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotateX(0);
  }
}
.plyr__control--overlaid {
  background-color: #f31212;
}

.plyr--full-ui input[type=range] {
  color: #f31212;
}

.plyr--video .plyr__control:hover {
  background-color: #f31212;
  opacity: 0.8;
}

.plyr--video .plyr__control.plyr__tab-focus {
  background-color: #f31212;
}

[data-theme=dark] .single-gallery {
  background-color: #03021a;
}
[data-theme=dark] .single-gallery__title i:before {
  color: #E9E9E9;
}
[data-theme=dark] .single-gallery__title span {
  color: #E9E9E9;
}

.app-info {
  margin-bottom: 35px;
}
.app-info__info {
  box-shadow: 0 5px 32px rgba(0, 0, 0, 0.09);
  border-radius: 15px;
  margin-bottom: 31px;
}
.app-info__info .app-info__info-img {
  margin-bottom: 30px;
  position: relative;
}
.app-info__info .app-info__info-img .app-info__info-logo {
  position: absolute;
  bottom: -25px;
  right: 2px;
  background-image: url("../img/curve-aside-img.svg");
  background-repeat: no-repeat;
  padding-left: 48px;
  width: 226px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-info__info .app-info__info-titles {
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin: 0 27px;
  margin-bottom: 31px;
  position: relative;
}
.app-info__info .app-info__info-titles:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
}
.app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name-en {
  color: #9F9F9F;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 11px;
  line-height: 21.6px;
  display: block;
}
.app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name-fa {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 11px;
  line-height: 27.9px;
  display: block;
}
.app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-type {
  color: #000000;
  font-size: 12px;
  font-weight: 700;
}
.app-info__info .app-info__info-titles .app-info__info-titles-item--en small {
  font-size: 13px;
  font-weight: 400;
  color: #9F9F9F;
  margin-left: 5px;
}
.app-info__info .app-info__info-wiki {
  margin: 0 20px;
  margin-bottom: 35px;
  padding-bottom: 37px;
  position: relative;
}
.app-info__info .app-info__info-wiki:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
}
.app-info__info .app-info__info-wiki p {
  font-size: 14px;
  font-weight: 700;
  line-height: 18.6px;
  margin-bottom: 16px;
}
.app-info__info .app-info__info-wiki .app-info__info-wiki-item {
  margin-bottom: 8px;
}
.app-info__info .app-info__info-wiki .app-info__info-wiki-item .title {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}
.app-info__info .app-info__info-wiki .app-info__info-wiki-item .value {
  color: #000000;
  font-size: 13px;
  font-weight: 400;
}
.app-info__info .app-info__info-rates {
  display: flex;
  align-items: center;
  padding-bottom: 21px;
}
.app-info__info .app-info__info-rates .app-info__info-rate {
  flex: 1 0 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 12px;
}
.app-info__info .app-info__info-rates .app-info__info-rate .logo {
  margin-bottom: 17px;
}
.app-info__info .app-info__info-rates .app-info__info-rate .logo img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}
.app-info__info .app-info__info-rates .app-info__info-rate .rates {
  color: #1E1E1E;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.9px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.app-info__info .app-info__info-rates .app-info__info-rate .title {
  color: #1E1E1E;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.2px;
}
.app-info__info .app-info__info-rates .app-info__info-rate:nth-last-of-type(1) {
  border-left: none;
}
.app-info__rates {
  background: #FEFEFE;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding-top: 29px;
  padding-bottom: 24px;
  margin-bottom: 31px;
}
.app-info__rates .app-info__rates-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 23px;
}
.app-info__rates .app-info__rates-rate .rate {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 11px;
}
.app-info__rates .app-info__rates-rate .vote {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 21.7px;
}
.app-info__rates .app-info__rates-rate .vote__numb {
  color: #000000;
  margin-right: 4px;
  margin-left: 4px;
}
.app-info__rates .app-info__rates-rating {
  margin: 0 43px;
}
.app-info__rates .app-info__rates-rating .app-info__rates-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 16.4px;
}
.app-info__rates .app-info__rates-rating .app-info__rates-header .rate-title {
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  line-height: 21.7px;
  z-index: 100;
  position: relative;
  text-align: center;
}
.app-info__rates .app-info__rates-rating .app-info__rates-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-info__rates .app-info__rates-rating .app-info__rates-main .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  max-width: 40px;
  line-height: 40px;
  border-radius: 50%;
  border: 1px dashed transparent;
}
.app-info__rates .app-info__rates-rating .app-info__rates-main .item i {
  font-size: 33px;
  color: #A8A8A8;
  transition: 0.3s;
  opacity: 0.6;
}
.app-info__rates .app-info__rates-rating .app-info__rates-main .item:hover i {
  fill: #F7DC00;
  color: #F7DC00;
  opacity: 1;
}
.app-info__rates .app-info__rates-rating .app-info__rates-main .item.active {
  border-color: rgb(255, 255, 255);
}
.app-info__rates .app-info__rates-rating .app-info__rates-main .item.active i {
  opacity: 1;
}
.app-info__rates .app-info__rates-rating .app-info__rates-button {
  display: flex;
  text-align: center;
  justify-content: center;
  text-align: center;
  margin-top: 28.7px;
}
.app-info__rates .app-info__rates-rating .app-info__rates-button a {
  background: #436EDC;
  border-radius: 18px;
  padding: 0 34.4444px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
}
.app-info__related {
  box-shadow: 0 5px 32px rgba(0, 0, 0, 0.09);
  border-radius: 15px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.app-info__related .app-info__related-header {
  display: flex;
  align-items: center;
  margin: 0 21px 0 29px;
  padding-bottom: 22px;
  position: relative;
}
.app-info__related .app-info__related-header:after {
  content: "";
  position: absolute;
  right: 30px;
  left: 30px;
  bottom: -30px;
  height: 30px;
  pointer-events: none;
  box-shadow: 0 -16px 24px -14px rgba(0, 0, 0, 0.3);
}
.app-info__related .app-info__related-header .pre-title {
  color: #444444;
  font-size: 13px;
  font-weight: 600;
  margin-left: 9px;
}
.app-info__related .app-info__related-header .title {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
}
.app-info__related .app-info__related-header .logo {
  margin-right: auto;
}
.app-info__related .app-info__related-products {
  margin-bottom: 22px;
}
.app-info__related .app-info__related-products .item {
  display: flex;
  align-items: center;
  margin: 0 20px;
  padding-top: 30px;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 19px;
}
.app-info__related .app-info__related-products .item__img {
  margin-left: 25px;
}
.app-info__related .app-info__related-products .item__info {
  flex-grow: 1;
}
.app-info__related .app-info__related-products .item__info-title {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 25px;
}
.app-info__related .app-info__related-products .item__info-buying {
  display: flex;
  align-items: center;
  position: relative;
}
.app-info__related .app-info__related-products .item__info-buying-title {
  color: #000000;
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.app-info__related .app-info__related-products .item__info-buying-title i {
  font-size: 22px;
  color: #000000;
  margin-left: 10px;
}
.app-info__related .app-info__related-products .item__info-buying-price {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.app-info__related .app-info__related-products .item__info-buying-price .price {
  text-decoration: none;
  color: #000000;
  font-size: 17px;
  font-weight: 600;
  margin-left: 3px;
}
.app-info__related .app-info__related-products .item__info-buying-price .unit {
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}
.app-info__related .app-info__related-products .item .discount-numb {
  background-color: #ef473a;
  border-radius: 60px;
  height: 17px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 0 7px;
}
.app-info__related .app-info__related-products .item .discount-numb i {
  font-size: 9px;
  color: #ffffff;
  margin-right: 2px;
  position: relative;
  z-index: 100;
}
.app-info__related .app-info__related-products .item .discount-numb span {
  position: relative;
  z-index: 100;
}
.app-info__related .app-info__related-products .item .discount-numb:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 13px;
  background-color: #ef473a;
  border-radius: 2px;
  transform: rotate(42deg) scale(1.05);
  top: -3px;
  left: 3px;
  z-index: 90;
}
.app-info__related .app-info__related-products .item--discount .item__info-buying-price {
  padding-left: 10px;
}
.app-info__related .app-info__related-footer {
  display: flex;
  align-items: center;
  margin: 0 20px;
}
.app-info__related .app-info__related-footer .more-ajax {
  font-size: 15px;
  color: #f01919;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.app-info__related .app-info__related-footer .more-ajax i {
  font-size: 15px;
  color: #f01919;
  margin-left: 12px;
}
.app-info__related .app-info__related-footer .more-all {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-right: auto;
}
.app-info__related .app-info__related-footer .more-all i {
  font-size: 13px;
  color: #000000;
  margin-right: 10px;
}

.table_of_content {
  margin: 20px 0;
}
.table_of_content__title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;
}
.table_of_content__title__icon {
  display: flex;
  align-items: center;
}
.table_of_content__title__icon h4 {
  margin-bottom: 0 !important;
}
.table_of_content__title__icon svg {
  margin-left: 5px;
}
.aside-info-single.sticky-top-100 {
  position: sticky;
  top: -100%;
}

[data-theme=dark] .aside-blog__title h2 {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__info-grid:nth-of-type(1) {
  border-color: #1b1939;
}
[data-theme=dark] .aside-blog .aside-blog__info-grid .aside-blog__info-item .name {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__info-grid .aside-blog__info-item i {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related-title .aside-blog__related-title-fa .title {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related-title .aside-blog__related-title-fa .title-cat {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-title {
  border-color: #1b1939;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-title .aside-blog__related-title-en .title {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-title .aside-blog__related-title-en .title-cat {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-info .item__title {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-info .item__value {
  color: #c7c5ee;
}
[data-theme=dark] .aside-blog .aside-blog__related .aside-blog__related-wiki {
  background-color: #f01919;
}
[data-theme=dark] .app-info__info {
  background-color: #0C093E;
}
[data-theme=dark] .app-info__info .app-info__info-titles {
  border-bottom: 1px solid #110f3f;
}
[data-theme=dark] .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name-fa {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name-en {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-cat {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-type {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-wiki {
  border-bottom: 1px solid #110f3f;
}
[data-theme=dark] .app-info__info .app-info__info-wiki p {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-wiki .app-info__info-wiki-item .title {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-wiki .app-info__info-wiki-item .value {
  color: #D4D4D4;
}
[data-theme=dark] .app-info__info .app-info__info-rates .app-info__info-rate {
  border-left: 1px solid #110f3f;
}
[data-theme=dark] .app-info__info .app-info__info-rates .app-info__info-rate:last-child {
  border-left: none;
}
[data-theme=dark] .app-info__info .app-info__info-rates .app-info__info-rate .rates {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__info .app-info__info-rates .app-info__info-rate .title {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__info .app-info__info-img .app-info__info-logo {
  background-image: url(../img/curve-aside-img-dark.svg);
}
[data-theme=dark] .app-info__related {
  background-color: #0d0b32;
}
[data-theme=dark] .app-info__related .app-info__related-header .pre-title {
  color: #908dd3;
}
[data-theme=dark] .app-info__related .app-info__related-header .title {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-products .item {
  border-bottom: 1px solid #18164d;
}
[data-theme=dark] .app-info__related .app-info__related-products .item__info-title {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-products .item__info-buying-title {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-products .item__info-buying-title i {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-products .item__info-buying-price .price {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-products .item__info-buying-price .unit {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-footer .more-all {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__related .app-info__related-footer .more-all i {
  color: #c7c5ee;
}
[data-theme=dark] .app-info__rates {
  background: #0C093E;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
}
[data-theme=dark] .app-info__rates-rate .rate {
  color: #F6F6F6;
}
[data-theme=dark] .app-info__rates-rate .vote {
  color: #B0B0B0;
}
[data-theme=dark] .app-info__rates-rate .vote span {
  color: #B0B0B0;
}
[data-theme=dark] .app-info__rates-header .rate-title {
  color: #DCDCDC !important;
}

.single-sidebar {
  margin-bottom: 35px;
}
.single-sidebar__info .single-sidebar__info-img {
  position: relative;
  margin-bottom: 29px;
}
.single-sidebar__info .single-sidebar__info-img img {
  border-radius: 26px 26px 0px 0px;
  width: 100%;
}
.single-sidebar__info .single-sidebar__info-img .single-sidebar__info-logo {
  position: absolute;
  bottom: -25px;
  right: 2px;
  background-image: url("../img/curve-aside-img.svg");
  background-repeat: no-repeat;
  padding-left: 48px;
  width: 226px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-sidebar__info .single-sidebar__info-titles {
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.05);
  border: 1.5px solid #f0ecf9;
  margin-bottom: 12px;
  border-radius: 18px;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item {
  padding: 0px 31px 24px 31px;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-name-en {
  color: #9c9c9c;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 21px;
  line-height: 21.6px;
  display: block;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-item--category {
  background-color: #e0e0e0;
  display: inline-block;
  border-radius: 14.5px;
  padding: 4px 10px 4px 34px;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-item--category small {
  font-size: 13px;
  font-weight: 400;
  color: #9f9f9f;
  margin-left: 5px;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-name-fa {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 21px;
  line-height: 27.9px;
  display: block;
}
.single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-type {
  color: #000000;
  font-size: 12px;
  font-weight: 700;
}
.single-sidebar__info .single-sidebar__info-wiki {
  position: relative;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.05);
  border: 1.5px solid #f0ecf9;
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 16px 31px 24px 31px;
}
.single-sidebar__info .single-sidebar__info-wiki p {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 30px;
}
.single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item:last-child {
  padding-bottom: 0;
}
.single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  height: 100%;
  width: 2px;
  background-color: #d5d5d5;
  content: "";
}
.single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .title {
  color: #9c9c9c;
  font-size: 13pt;
  font-weight: 600;
}
.single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .value {
  color: #000000;
  font-size: 13pt;
  font-weight: 400;
}
.single-sidebar__info .single-sidebar__info-rates {
  display: flex;
  align-items: center;
  box-shadow: 0 5px 32px rgba(0, 0, 0, 0.09);
  margin-bottom: 9px;
  border-radius: 26px;
  padding: 16px 31px 24px 31px;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate {
  flex: 1 0 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 12px;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .logo {
  margin-bottom: 17px;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .logo img {
  object-fit: contain;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .rates {
  color: #1e1e1e;
  font-size: 17.12px;
  font-weight: 500;
  line-height: 18.9px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .title {
  color: #1e1e1e;
  font-size: 17.12px;
  font-weight: 400;
  line-height: 16.2px;
}
.single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate:nth-last-of-type(1) {
  border-left: none;
}
.single-sidebar__info .single-sidebar__info-image {
  border-radius: 26px;
}
.single-sidebar__info .single-sidebar__info-image img {
  width: 100%;
  margin-bottom: 9px;
  border-radius: 26px;
}
.single-sidebar__rates {
  background: #fefefe;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding-top: 29px;
  padding-bottom: 24px;
  margin-bottom: 31px;
}
.single-sidebar__rates .single-sidebar__rates-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 23px;
}
.single-sidebar__rates .single-sidebar__rates-rate .rate {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 11px;
}
.single-sidebar__rates .single-sidebar__rates-rate .vote {
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 21.7px;
}
.single-sidebar__rates .single-sidebar__rates-rate .vote__numb {
  color: #000000;
  margin-right: 4px;
  margin-left: 4px;
}
.single-sidebar__rates .single-sidebar__rates-rating {
  margin: 0 43px;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 16.4px;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-header .rate-title {
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  line-height: 21.7px;
  z-index: 100;
  position: relative;
  text-align: center;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main .item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  max-width: 40px;
  line-height: 40px;
  border-radius: 50%;
  border: 1px dashed transparent;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main .item i {
  font-size: 33px;
  color: #a8a8a8;
  transition: 0.3s;
  opacity: 0.6;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main .item:hover i {
  fill: #f7dc00;
  color: #f7dc00;
  opacity: 1;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main .item.active {
  border-color: rgb(255, 255, 255);
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-main .item.active i {
  opacity: 1;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-button {
  display: flex;
  text-align: center;
  justify-content: center;
  text-align: center;
  margin-top: 28.7px;
}
.single-sidebar__rates .single-sidebar__rates-rating .single-sidebar__rates-button a {
  background: #436edc;
  border-radius: 18px;
  padding: 0 34.4444px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
}
.single-sidebar__related {
  box-shadow: 0 5px 32px rgba(0, 0, 0, 0.09);
  border-radius: 15px;
  padding-top: 25px;
  padding-bottom: 25px;
}
.single-sidebar__related .single-sidebar__related-header {
  display: flex;
  align-items: center;
  margin: 0 21px 0 29px;
  padding-bottom: 22px;
  position: relative;
}
.single-sidebar__related .single-sidebar__related-header:after {
  content: "";
  position: absolute;
  right: 30px;
  left: 30px;
  bottom: -30px;
  height: 30px;
  pointer-events: none;
  box-shadow: 0 -16px 24px -14px rgba(0, 0, 0, 0.3);
}
.single-sidebar__related .single-sidebar__related-header .pre-title {
  color: #444444;
  font-size: 13px;
  font-weight: 600;
  margin-left: 9px;
}
.single-sidebar__related .single-sidebar__related-header .title {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
}
.single-sidebar__related .single-sidebar__related-header .logo {
  margin-right: auto;
}
.single-sidebar__related .single-sidebar__related-products {
  margin-bottom: 22px;
}
.single-sidebar__related .single-sidebar__related-products .item {
  display: flex;
  align-items: center;
  margin: 0 20px;
  padding-top: 30px;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 19px;
}
.single-sidebar__related .single-sidebar__related-products .item__img {
  margin-left: 25px;
}
.single-sidebar__related .single-sidebar__related-products .item__info {
  flex-grow: 1;
}
.single-sidebar__related .single-sidebar__related-products .item__info-title {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 25px;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying {
  display: flex;
  align-items: center;
  position: relative;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying-title {
  color: #000000;
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying-title i {
  font-size: 22px;
  color: #000000;
  margin-left: 10px;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying-price {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying-price .price {
  text-decoration: none;
  color: #000000;
  font-size: 17px;
  font-weight: 600;
  margin-left: 3px;
}
.single-sidebar__related .single-sidebar__related-products .item__info-buying-price .unit {
  color: #000000;
  font-size: 12px;
  font-weight: 600;
}
.single-sidebar__related .single-sidebar__related-products .item .discount-numb {
  background-color: #ef473a;
  border-radius: 60px;
  height: 17px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: -16px;
  left: 0;
  padding: 0 7px;
}
.single-sidebar__related .single-sidebar__related-products .item .discount-numb i {
  font-size: 9px;
  color: #ffffff;
  margin-right: 2px;
  position: relative;
  z-index: 100;
}
.single-sidebar__related .single-sidebar__related-products .item .discount-numb span {
  position: relative;
  z-index: 100;
}
.single-sidebar__related .single-sidebar__related-products .item .discount-numb:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 13px;
  background-color: #ef473a;
  border-radius: 2px;
  transform: rotate(42deg) scale(1.05);
  top: -3px;
  left: 3px;
  z-index: 90;
}
.single-sidebar__related .single-sidebar__related-products .item--discount .item__info-buying-price {
  padding-left: 10px;
}
.single-sidebar__related .single-sidebar__related-footer {
  display: flex;
  align-items: center;
  margin: 0 20px;
}
.single-sidebar__related .single-sidebar__related-footer .more-ajax {
  font-size: 15px;
  color: #f01919;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.single-sidebar__related .single-sidebar__related-footer .more-ajax i {
  font-size: 15px;
  color: #f01919;
  margin-left: 12px;
}
.single-sidebar__related .single-sidebar__related-footer .more-all {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-right: auto;
}
.single-sidebar__related .single-sidebar__related-footer .more-all i {
  font-size: 13px;
  color: #000000;
  margin-right: 10px;
}

[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles {
  background-color: #0c093e;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-name-fa {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-item--category {
  background-color: #070525;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-name-en {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-cat {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item .single-sidebar__info-titles-type {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-wiki {
  background-color: #0c093e;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-wiki p {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item:before {
  background-color: #070525;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .title {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .value {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-rates {
  background-color: #0c093e;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate {
  border-left: 1px solid #110f3f;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate:last-child {
  border-left: none;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .rates {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-rates .single-sidebar__info-rate .title {
  color: #c7c5ee;
}
[data-theme=dark] .single-sidebar__info .single-sidebar__info-img .single-sidebar__info-logo {
  background-image: url(../img/curve-aside-img-dark.svg);
}
[data-theme=dark] .single-sidebar__rates {
  background: #0C093E;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
}
[data-theme=dark] .single-sidebar__rates-rate .rate {
  color: #F6F6F6;
}
[data-theme=dark] .single-sidebar__rates-rate .vote {
  color: #B0B0B0;
}
[data-theme=dark] .single-sidebar__rates-rate .vote span {
  color: #B0B0B0;
}
[data-theme=dark] .single-sidebar__rates-header .rate-title {
  color: #DCDCDC !important;
}

@media (max-width: 991px) {
  .single-sidebar__info .single-sidebar__info-titles {
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 5px 32px rgba(0, 0, 0, 0.09);
    margin-bottom: 9px;
    border-radius: 26px;
  }
  .single-sidebar__info .single-sidebar__info-titles .single-sidebar__info-titles-item {
    padding: 0px 21px 24px 21px;
  }
  .single-sidebar__info .single-sidebar__info-wiki {
    padding: 16px 21px 24px 21px;
  }
  .single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .title {
    font-size: 12pt;
  }
  .single-sidebar__info .single-sidebar__info-wiki .single-sidebar__info-wiki-item .value {
    font-size: 12pt;
  }
}
.content {
  margin-bottom: 39px;
}
.content__title {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}
.content__title:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
}
.content__title .content__title-name {
  color: #000000;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 13px;
  line-height: 37.2px;
}
.content__title .content__title-en {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.9px;
}
.content__content p {
  color: #000000;
  font-size: 16px;
  line-height: 35px;
  text-align: justify;
  font-weight: 500;
}
.content__content p[dir=rtl] {
  margin: 5px 0 !important;
  border-radius: 10px !important;
}
.content__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.content__content table th {
  background-color: #f9f9f9;
  font-weight: bold;
  padding: 10px;
  padding-left: 10px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid transparent;
  text-align: center;
}
.content__content table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.content__content img {
  height: auto !important;
  border-radius: 20px !important;
}
.content__content a {
  color: #436edc !important;
}
.content__content a span {
  color: #436edc !important;
}
.content__content figure {
  margin-top: 38px;
  margin-bottom: 39px;
}
.content__content figure img {
  height: auto !important;
}
.content__content figure figcaption {
  color: #858585;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.content__content figure figcaption:before {
  content: "\e93b";
  font-family: "icomoon";
  font-size: 23px;
  color: #bcbcbc;
  margin-left: 15px;
}
.content__content hr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
  border: none;
}
.content__content hr:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: 42px;
  width: 6px;
  height: 6px;
  border-radius: 60px;
  background-color: #fcc43f;
  box-shadow: -18px 0 0 0 #fe6e49, -36px 0 0 0 #d02154, -54px 0 0 0 #612b8d, -72px 0 0 0 #14a3bd, -90px 0 0 0 #89c736;
}
.content__content .separator-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 35px;
}
.content__content .separator-circle span {
  width: 6px;
  height: 6px;
  border-radius: 60px;
  margin-left: 12px;
}
.content__content .separator-circle span:nth-of-type(1) {
  background-color: #fcc43f;
}
.content__content .separator-circle span:nth-of-type(2) {
  background-color: #fe6e49;
}
.content__content .separator-circle span:nth-of-type(3) {
  background-color: #d02154;
}
.content__content .separator-circle span:nth-of-type(4) {
  background-color: #612b8d;
}
.content__content .separator-circle span:nth-of-type(5) {
  background-color: #14a3bd;
}
.content__content .separator-circle span:nth-of-type(6) {
  background-color: #89c736;
}
.content__content .separator-circle span:nth-last-of-type(1) {
  margin-left: 0;
}
.content__content h1 {
  color: #000000;
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 20px;
}
.content__content h2 {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 23px;
  line-height: 27.9px;
}
.content__content h2:after {
  content: "";
  display: block;
  height: 1px;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
  margin-top: 26px;
}
.content__content h3 {
  color: #000000;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}
.content__content h4 {
  font-size: 19px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.content__content h5 {
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.content__content h6 {
  font-size: 17px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.content__content ul {
  margin-bottom: 20px;
}
.content__content ul li {
  color: #000000;
  font-size: 16px;
  line-height: 35px;
  display: flex;
  /* &:before {
     content: "\e90a";
     font-family: "icomoon";
     font-size: 10px;
     color: #000000;
     margin-left: 25px;
   }*/
}
.content__content ul li span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.content__content ul li:nth-last-of-type(1) {
  margin-bottom: 0;
}
.content__content ol {
  counter-reset: section;
  position: relative;
  margin-bottom: 20px;
}
.content__content ol li {
  color: #000000;
  font-size: 16px;
  position: relative;
  z-index: 100;
  margin-bottom: 10px;
  line-height: 35px;
  display: flex;
}
.content__content ol li:before {
  counter-increment: section;
  content: counter(section);
  display: inline-flex;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  min-width: 25px;
  margin-left: 15px;
}
.content__content ol li:nth-last-of-type(1) {
  margin-bottom: 0;
}
.content__content ol li span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.content__content ol:before {
  content: "";
  background-color: #f01919;
  position: absolute;
  top: -12px;
  bottom: -12px;
  right: 0;
  border-radius: 60px;
  width: 25px;
  z-index: 90;
}
.content__content .big-img figcaption {
  margin-right: 50vh;
}
.content__content .big-img img {
  width: 100%;
  border-radius: 20px;
}
.content__content blockquote {
  color: #646464;
  font-size: 14px;
  font-weight: 600;
  line-height: 41px;
  text-align: justify;
  padding-right: 47px;
  margin-bottom: 44px;
  position: relative;
}
.content__content blockquote cite {
  display: flex;
  align-items: center;
  font-style: normal;
  position: relative;
  margin-top: 22px;
}
.content__content blockquote cite img {
  margin-left: 18px;
}
.content__content blockquote cite:before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #dfdfdf;
  right: 180px;
  left: 0;
  top: 19px;
}
.content__content blockquote:before {
  content: "\e92d";
  font-family: "icomoon";
  font-size: 17px;
  color: #f01919;
  position: absolute;
  right: 0;
  top: 2px;
}
.content__content blockquote:after {
  content: "\e92d";
  font-family: "icomoon";
  font-size: 17px;
  color: #e3e3e3;
  position: absolute;
  right: 0;
  bottom: 64px;
  transform: rotate(180deg);
}
.content__content span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.content--blog {
  margin-bottom: 67px;
}
.content--blog .content__content .big-img {
  margin-left: -80vh;
  margin-right: -90vh;
}

[data-theme=dark] .content__content h1, [data-theme=dark] .content__content h2, [data-theme=dark] .content__content h3, [data-theme=dark] .content__content h4, [data-theme=dark] .content__content h5, [data-theme=dark] .content__content h6 {
  color: #f0ecff !important;
}
[data-theme=dark] .content__content p {
  color: #d8d4f0 !important;
}
[data-theme=dark] .content__content p span {
  color: #d8d4f0 !important;
}
[data-theme=dark] .content__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
[data-theme=dark] .content__content table th {
  background-color: #1e1b38;
  border-color: #2e2a50;
  color: #f0ecff;
}
[data-theme=dark] .content__content table td {
  color: #d8d4f0;
  border-color: #2e2a50;
}
[data-theme=dark] .content__content span {
  color: #d8d4f0 !important;
}
[data-theme=dark] .content__content a {
  color: #818cf8 !important;
}
[data-theme=dark] .content__content a span {
  color: #818cf8 !important;
}
[data-theme=dark] .content__content ul li {
  color: #d8d4f0 !important;
}
[data-theme=dark] .content__content ul li::before {
  color: #a78bfa !important;
}
[data-theme=dark] .content__content ol li {
  color: #d8d4f0 !important;
}
[data-theme=dark] .content__title {
  border-bottom: 1px solid #252040;
}
[data-theme=dark] .content__title .content__title-name {
  color: #f0ecff;
}
[data-theme=dark] .content__title .content__title-en {
  color: #d8d4f0;
}
[data-theme=dark] .content figure figcaption {
  color: #d8d4f0;
}
[data-theme=dark] .content figure figcaption::before {
  color: #d8d4f0;
}
[data-theme=dark] .content blockquote {
  color: #a09ac8;
}
[data-theme=dark] .content blockquote cite {
  color: #d8d4f0;
}
[data-theme=dark] .content blockquote cite::before {
  border-bottom: 1px solid #252040;
}
[data-theme=dark] #mycontent h1, [data-theme=dark] #mycontent h2, [data-theme=dark] #mycontent h3, [data-theme=dark] #mycontent h4, [data-theme=dark] #mycontent h5, [data-theme=dark] #mycontent h6 {
  color: #f0ecff !important;
}
[data-theme=dark] #mycontent p {
  color: #d8d4f0 !important;
}
[data-theme=dark] #mycontent .custom-box {
  background-color: #1a1730 !important;
}

[data-theme=dark] .single-blog__content p {
  color: #c7c5ee !important;
}
[data-theme=dark] .single-blog__content p span {
  color: #c7c5ee !important;
}
[data-theme=dark] .single-blog__content span {
  color: #c7c5ee !important;
}

.single__content {
  margin-bottom: 39px;
}
.single__content__title {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}
.single__content__title:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
}
.single__content__title .single__content__title-name {
  color: #000000;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 13px;
  line-height: 37.2px;
}
.single__content__title .single__content__title-en {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.9px;
}
.single__content__content p {
  color: #000000;
  font-size: 16px;
  line-height: 35px;
  text-align: justify;
  font-weight: 500;
}
.single__content__content p[dir=rtl] {
  margin: 5px 0 !important;
  border-radius: 10px !important;
}
.single__content__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.single__content__content table th {
  background-color: #f9f9f9;
  font-weight: bold;
  padding: 10px;
  padding-left: 10px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid transparent;
  text-align: center;
}
.single__content__content table td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.single__content__content img {
  height: auto !important;
  border-radius: 20px !important;
}
.single__content__content a {
  color: #436edc !important;
}
.single__content__content a span {
  color: #436edc !important;
}
.single__content__content figure {
  margin-top: 38px;
  margin-bottom: 39px;
}
.single__content__content figure img {
  height: auto !important;
}
.single__content__content figure figcaption {
  color: #858585;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.single__content__content figure figcaption:before {
  content: "\e93b";
  font-family: "icomoon";
  font-size: 23px;
  color: #bcbcbc;
  margin-left: 15px;
}
.single__content__content hr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
  border: none;
}
.single__content__content hr:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: 42px;
  width: 6px;
  height: 6px;
  border-radius: 60px;
  background-color: #fcc43f;
  box-shadow: -18px 0 0 0 #fe6e49, -36px 0 0 0 #d02154, -54px 0 0 0 #612b8d, -72px 0 0 0 #14a3bd, -90px 0 0 0 #89c736;
}
.single__content__content .separator-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 45px;
  margin-bottom: 35px;
}
.single__content__content .separator-circle span {
  width: 6px;
  height: 6px;
  border-radius: 60px;
  margin-left: 12px;
}
.single__content__content .separator-circle span:nth-of-type(1) {
  background-color: #fcc43f;
}
.single__content__content .separator-circle span:nth-of-type(2) {
  background-color: #fe6e49;
}
.single__content__content .separator-circle span:nth-of-type(3) {
  background-color: #d02154;
}
.single__content__content .separator-circle span:nth-of-type(4) {
  background-color: #612b8d;
}
.single__content__content .separator-circle span:nth-of-type(5) {
  background-color: #14a3bd;
}
.single__content__content .separator-circle span:nth-of-type(6) {
  background-color: #89c736;
}
.single__content__content .separator-circle span:nth-last-of-type(1) {
  margin-left: 0;
}
.single__content__content h1 {
  color: #000000;
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 20px;
}
.single__content__content h2 {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 23px;
  line-height: 27.9px;
}
.single__content__content h2:after {
  content: "";
  display: block;
  height: 1px;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
  margin-top: 26px;
}
.single__content__content h3 {
  color: #000000;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}
.single__content__content h4 {
  font-size: 19px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.single__content__content h5 {
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.single__content__content h6 {
  font-size: 17px;
  line-height: 30px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
}
.single__content__content ul {
  margin-bottom: 20px;
}
.single__content__content ul li {
  color: #000000;
  font-size: 16px;
  line-height: 35px;
  display: flex;
}
.single__content__content ul li:before {
  content: "\e90a";
  font-family: "icomoon";
  font-size: 10px;
  color: #000000;
  margin-left: 25px;
}
.single__content__content ul li span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.single__content__content ul li:nth-last-of-type(1) {
  margin-bottom: 0;
}
.single__content__content ol {
  counter-reset: section;
  position: relative;
  margin-bottom: 20px;
}
.single__content__content ol li {
  color: #000000;
  font-size: 16px;
  position: relative;
  z-index: 100;
  margin-bottom: 10px;
  line-height: 35px;
  display: flex;
}
.single__content__content ol li:before {
  counter-increment: section;
  content: counter(section);
  display: inline-flex;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  min-width: 25px;
  margin-left: 15px;
}
.single__content__content ol li:nth-last-of-type(1) {
  margin-bottom: 0;
}
.single__content__content ol li span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.single__content__content ol:before {
  content: "";
  background-color: #f01919;
  position: absolute;
  top: -12px;
  bottom: -12px;
  right: 0;
  border-radius: 60px;
  width: 25px;
  z-index: 90;
}
.single__content__content .big-img figcaption {
  margin-right: 50vh;
}
.single__content__content .big-img img {
  width: 100%;
  border-radius: 20px;
}
.single__content__content blockquote {
  color: #646464;
  font-size: 14px;
  font-weight: 600;
  line-height: 41px;
  text-align: justify;
  padding-right: 47px;
  margin-bottom: 44px;
  position: relative;
}
.single__content__content blockquote cite {
  display: flex;
  align-items: center;
  font-style: normal;
  position: relative;
  margin-top: 22px;
}
.single__content__content blockquote cite img {
  margin-left: 18px;
}
.single__content__content blockquote cite:before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #dfdfdf;
  right: 180px;
  left: 0;
  top: 19px;
}
.single__content__content blockquote:before {
  content: "\e92d";
  font-family: "icomoon";
  font-size: 17px;
  color: #f01919;
  position: absolute;
  right: 0;
  top: 2px;
}
.single__content__content blockquote:after {
  content: "\e92d";
  font-family: "icomoon";
  font-size: 17px;
  color: #e3e3e3;
  position: absolute;
  right: 0;
  bottom: 64px;
  transform: rotate(180deg);
}
.single__content__content span {
  text-align: right;
  width: auto;
  height: auto;
  justify-content: center;
  display: contents;
}
.single__content--blog {
  margin-bottom: 67px;
}
.single__content--blog .single__content__content .big-img {
  margin-left: -80vh;
  margin-right: -90vh;
}

[data-theme=dark] .single__content__content h1, [data-theme=dark] .single__content__content h2, [data-theme=dark] .single__content__content h3, [data-theme=dark] .single__content__content h4, [data-theme=dark] .single__content__content h5, [data-theme=dark] .single__content__content h6 {
  color: #f0ecff !important;
}
[data-theme=dark] .single__content__content p {
  color: #d8d4f0 !important;
}
[data-theme=dark] .single__content__content p span {
  color: #d8d4f0 !important;
}
[data-theme=dark] .single__content__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
[data-theme=dark] .single__content__content table th {
  background-color: #1e1b38;
  border-color: #2e2a50;
  color: #f0ecff;
}
[data-theme=dark] .single__content__content table td {
  color: #d8d4f0;
  border-color: #2e2a50;
}
[data-theme=dark] .single__content__content span {
  color: #d8d4f0 !important;
}
[data-theme=dark] .single__content__content a {
  color: #818cf8 !important;
}
[data-theme=dark] .single__content__content a span {
  color: #818cf8 !important;
}
[data-theme=dark] .single__content__content ul li {
  color: #d8d4f0 !important;
}
[data-theme=dark] .single__content__content ul li::before {
  color: #a78bfa !important;
}
[data-theme=dark] .single__content__content ol li {
  color: #d8d4f0 !important;
}
[data-theme=dark] .single__content__title {
  border-bottom: 1px solid #252040;
}
[data-theme=dark] .single__content__title .single__content__title-name {
  color: #f0ecff;
}
[data-theme=dark] .single__content__title .single__content__title-en {
  color: #d8d4f0;
}
[data-theme=dark] .single__content figure figcaption {
  color: #d8d4f0;
}
[data-theme=dark] .single__content figure figcaption::before {
  color: #d8d4f0;
}
[data-theme=dark] .single__content blockquote {
  color: #a09ac8;
}
[data-theme=dark] .single__content blockquote cite {
  color: #d8d4f0;
}
[data-theme=dark] .single__content blockquote cite::before {
  border-bottom: 1px solid #252040;
}

.faq_content {
  padding: 23px 21px 42px 27px;
  background-color: #fff;
  box-shadow: 0px 0px 24px 13px rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  margin-bottom: 21px;
  margin-top: 19px;
}
.faq_content__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.faq_content__header .faq_content__header-title_fa {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 18px;
  font-weight: 800;
  line-height: 53px;
  background-color: #fff;
  z-index: 1;
  padding-left: 8px;
}
.faq_content__header .faq_content__header-title_fa i {
  background-color: #ffce00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  color: #000000;
  border: 1px solid #000;
  padding: 3px;
  margin-left: 12px;
  transform: scaleX(-1);
  font-size: 20px;
}
.faq_content__header .faq_content__header-title_en {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 18px;
  font-weight: 800;
  line-height: 53px;
  background-color: #fff;
  padding-right: 12px;
  z-index: 1;
}
.faq_content__header .faq_content__header-title_en i {
  background-color: #ffce00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 30px;
  height: 30px;
  color: #000000;
  border: 1px solid #000;
  padding: 3px;
  margin-left: 12px;
  transform: scaleX(-1);
  font-size: 20px;
}
.faq_content__header:before {
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-color: #f1f1f1;
  z-index: 0;
  content: "";
}
.faq_content__header .faq_content__header-search {
  height: 50px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  position: relative;
  max-width: 330px;
  width: 100%;
}
.faq_content__header .faq_content__header-search form {
  height: 100%;
  border-radius: 8px;
  width: 100%;
}
.faq_content__header .faq_content__header-search input {
  width: 100%;
  color: #000000;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 0 23px;
  height: 100%;
}
.faq_content__header .faq_content__header-search input::placeholder {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}
.faq_content__header .faq_content__header-search button {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  padding: 0;
  background-color: #fff;
  left: 22px;
}
.faq_content__header .faq_content__header-search button i {
  font-size: 17px;
  color: #000000;
}
.faq_content__item {
  display: flex;
  flex-direction: column;
  background: #fefefe;
  box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  transition: 0.3s;
  justify-content: center;
  padding: 6.2px 30px;
  margin-bottom: 11px;
}
.faq_content__item .faq_content__item-ask {
  color: #252424;
  font-size: 16px;
  font-weight: 700;
  line-height: 29.45px;
  display: flex;
  align-items: center;
  transition: 0.3s;
  margin-bottom: 0px;
  cursor: pointer;
}
.faq_content__item .faq_content__item-ask:before {
  content: "\e902";
  font-family: "icomoon";
  font-size: 13px;
  font-weight: 800;
  color: #ff4c4c;
  margin-left: 25px;
  transition: 0.2s;
}
.faq_content__item .faq_content__item-question {
  color: #444242;
  font-size: 16px;
  font-weight: 500;
  text-align: justify;
  line-height: 26px;
  display: none;
}
.faq_content__item.active {
  padding-bottom: 34px;
}
.faq_content__item.active .faq_content__item-ask {
  margin-bottom: 31px;
}
.faq_content__item.active .faq_content__item-ask:before {
  transform: rotate(180deg);
}
.faq_content__item.active .faq_content__item-ask:after {
  transform: rotateX(180deg);
}

[data-theme=dark] .faq_content {
  background-color: #13111e;
}
[data-theme=dark] .faq_content__header .faq_content__header-title_fa {
  color: #f0ecff;
  background-color: #13111e;
}
[data-theme=dark] .faq_content__header .faq_content__header-title_en {
  color: #d8d4f0;
  background-color: #13111e;
}
[data-theme=dark] .faq_content__header .faq_content__header-search {
  border-color: #252040;
}
[data-theme=dark] .faq_content__header .faq_content__header-search input {
  color: #f0ecff;
  background-color: transparent;
}
[data-theme=dark] .faq_content__header .faq_content__header-search input::placeholder {
  color: #7a7498;
}
[data-theme=dark] .faq_content__header .faq_content__header-search button {
  background-color: #1a1730;
}
[data-theme=dark] .faq_content__header .faq_content__header-search button i {
  color: #c4bde8;
}
[data-theme=dark] .faq_content__item {
  background-color: #1a1730;
  border-color: #252040;
}
[data-theme=dark] .faq_content__item .faq_content__item-ask {
  color: #f0ecff;
}
[data-theme=dark] .faq_content__item .faq_content__item-question {
  color: #d0cce8;
}

@media (max-width: 850px) {
  .faq_content__header {
    margin-bottom: 18px;
  }
  .faq_content__header__item {
    display: flex;
    flex-direction: column;
    background: #fefefe;
    box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    transition: 0.3s;
    justify-content: center;
    padding: 4.2px 20px;
    margin-bottom: 11px;
  }
  .faq_content__header__item .faq_content__item-ask {
    font-size: 12px;
  }
  .faq_content__header__item .faq_content__item-question {
    font-size: 12px;
  }
}
.rel-ai {
  position: relative;
  padding: 36px 0 40px;
  margin-bottom: 16px;
  isolation: isolate;
}
.rel-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 20% 20%, rgba(124, 58, 237, 0.06), transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(6, 182, 212, 0.05), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.rel-ai__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.rel-ai__head-titles {
  min-width: 0;
}
.rel-ai__head-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #ddd4f3;
  padding: 5px 11px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.rel-ai__head-eyebrow svg {
  color: #a855f7;
}
.rel-ai__head-title {
  font-size: 17px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rel-ai__head-sub {
  font-size: 11.5px;
  color: #6b6880;
  margin: 0;
  font-weight: 500;
}
.rel-ai__head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rel-ai__head-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  text-decoration: none;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.rel-ai__head-more:hover {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
  transform: translateY(-1px);
}
.rel-ai__head-nav {
  display: inline-flex;
  gap: 6px;
}
.rel-ai__nav {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  color: #7c3aed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.rel-ai__nav:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.rel-ai__nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rel-ai__swiper {
  overflow: visible;
  padding-bottom: 10px;
}

/* ── Universal Swiper fallback ──────────────────────────────────
   When Swiper.js fails to initialize (or loads slowly), slides stack
   vertically because base Swiper CSS isn't bundled. This makes every
   swiper render as a horizontal-scrollable list by default; once
   Swiper.js initializes (.swiper-initialized class lands), Swiper
   takes over and these styles defer to it. */
.swiper:not(.swiper-initialized) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.swiper:not(.swiper-initialized)::-webkit-scrollbar {
  display: none;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
}
.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
  flex: 0 0 auto;
  width: 70vw;
  max-width: 320px;
  scroll-snap-align: start;
}
@media (min-width: 576px) {
  .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: 45vw;
    max-width: 280px;
  }
}
@media (min-width: 768px) {
  .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: 32vw;
    max-width: 260px;
  }
}
@media (min-width: 992px) {
  .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: 24vw;
    max-width: 240px;
  }
}
@media (min-width: 1200px) {
  .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: 19vw;
    max-width: 220px;
  }
}

/* Eagerly show lazy-loaded images in the fallback so we don't get
   blank cards before Swiper calls its lazy-init. The data-src attr
   is what Swiper would otherwise consume after init. */
.swiper:not(.swiper-initialized) img.swiper-lazy[data-src] {
  opacity: 1;
}
.swiper:not(.swiper-initialized) .swiper-lazy-preloader {
  display: none;
}

.rel-ai-card {
  --c1: #8b5cf6;
  --c2: #7c3aed;
  --c-rgb: 139, 92, 246;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(155deg, #ffffff 0%, #faf8fe 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.rel-ai-card[data-accent=violet] {
  --c1: #a855f7;
  --c2: #7c3aed;
  --c-rgb: 139, 92, 246;
}
.rel-ai-card[data-accent=sky] {
  --c1: #38bdf8;
  --c2: #0284c7;
  --c-rgb: 14, 165, 233;
}
.rel-ai-card[data-accent=cyan] {
  --c1: #22d3ee;
  --c2: #0891b2;
  --c-rgb: 6, 182, 212;
}
.rel-ai-card[data-accent=slate] {
  --c1: #64748b;
  --c2: #334155;
  --c-rgb: 71, 85, 105;
}
.rel-ai-card[data-accent=blue] {
  --c1: #60a5fa;
  --c2: #2563eb;
  --c-rgb: 59, 130, 246;
}
.rel-ai-card[data-accent=amber] {
  --c1: #fbbf24;
  --c2: #d97706;
  --c-rgb: 245, 158, 11;
}
.rel-ai-card[data-accent=rose] {
  --c1: #fb7185;
  --c2: #e11d48;
  --c-rgb: 244, 63, 94;
}
.rel-ai-card[data-accent=emerald] {
  --c1: #34d399;
  --c2: #059669;
  --c-rgb: 16, 185, 129;
}
.rel-ai-card__glow {
  position: absolute;
  inset: -20% 20% 40% -20%;
  background: radial-gradient(circle, rgba(var(--c-rgb), 0.35), transparent 60%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.rel-ai-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--c-rgb), 0.45);
  box-shadow: 0 22px 40px -16px rgba(var(--c-rgb), 0.35);
}
.rel-ai-card:hover .rel-ai-card__glow {
  opacity: 1;
}
.rel-ai-card:hover .rel-ai-card__ico::after {
  opacity: 1;
  transform: scale(1.08);
}
.rel-ai-card:hover .rel-ai-card__buy {
  transform: translateX(-3px);
  box-shadow: 0 8px 22px -6px rgba(var(--c-rgb), 0.55);
}
.rel-ai-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.2px;
}
.rel-ai-card__badge svg {
  flex-shrink: 0;
}
.rel-ai-card__badge--hot {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
}
.rel-ai-card__badge--new {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
}
.rel-ai-card__badge--off {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
  direction: ltr;
}
.rel-ai-card__badge--limited {
  background: rgba(15, 11, 72, 0.88);
  color: #fff;
}
.rel-ai-card__ico {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 6px auto 2px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f1fc 100%);
  border: 1.5px solid rgba(var(--c-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.rel-ai-card__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}
.rel-ai-card__ico::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-rgb), 0.4) 0%, transparent 60%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}
.rel-ai-card__body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rel-ai-card__title {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.rel-ai-card__en {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a87a3;
  letter-spacing: 0.3px;
  direction: ltr;
}
.rel-ai-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.rel-ai-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: #1a1a2e;
  background: #fff8e6;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 6px;
  direction: ltr;
}
.rel-ai-card__rating svg {
  color: #f59e0b;
}
.rel-ai-card__sales {
  font-size: 10px;
  font-weight: 700;
  color: #6b6880;
}
.rel-ai-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ebe6f5;
  margin-top: 2px;
}
.rel-ai-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  direction: ltr;
  flex-wrap: wrap;
  min-width: 0;
}
.rel-ai-card__price-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #8a87a3;
}
.rel-ai-card__price strong {
  font-size: 17px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rel-ai-card__price small {
  font-size: 10px;
  font-weight: 600;
  color: #8a87a3;
}
.rel-ai-card__price-old {
  font-size: 11px;
  color: #bbb;
  text-decoration: line-through;
}
.rel-ai-card__buy {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px -4px rgba(var(--c-rgb), 0.45);
}
.rel-ai-card__buy:hover {
  color: #fff;
}

[data-theme=dark] .rel-ai::before {
  background: radial-gradient(ellipse 60% 80% at 20% 20%, rgba(167, 139, 250, 0.1), transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(6, 182, 212, 0.07), transparent 60%);
}
[data-theme=dark] .rel-ai__head-eyebrow {
  background: #1a1648;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .rel-ai__head-title {
  background: linear-gradient(135deg, #f1efff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .rel-ai__head-sub {
  color: #b6b3d9;
}
[data-theme=dark] .rel-ai__head-more {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .rel-ai__nav {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .rel-ai-card {
  background: linear-gradient(155deg, #15123a 0%, #0f0c2e 100%);
  border-color: #2a2560;
}
[data-theme=dark] .rel-ai-card:hover {
  border-color: rgba(var(--c-rgb), 0.5);
}
[data-theme=dark] .rel-ai-card__ico {
  background: linear-gradient(135deg, #1a1648 0%, #15123a 100%);
  border-color: rgba(var(--c-rgb), 0.25);
}
[data-theme=dark] .rel-ai-card__title {
  color: #f1efff;
}
[data-theme=dark] .rel-ai-card__en {
  color: #8a87b3;
}
[data-theme=dark] .rel-ai-card__sales {
  color: #b6b3d9;
}
[data-theme=dark] .rel-ai-card__rating {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fde68a;
}
[data-theme=dark] .rel-ai-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .rel-ai-card__price-label {
  color: #8a87b3;
}
[data-theme=dark] .rel-ai-card__price small {
  color: #8a87b3;
}
[data-theme=dark] .rel-ai-card__price-old {
  color: #5a5790;
}
[data-theme=dark] .rel-ai-card__badge--limited {
  background: rgba(241, 239, 255, 0.15);
  color: #f1efff;
}

@media (max-width: 768px) {
  .rel-ai {
    padding: 18px 0 22px;
    margin-bottom: 8px;
  }
  .rel-ai__head {
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 10px;
  }
  .rel-ai__head-eyebrow {
    font-size: 11px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .rel-ai__head-title {
    font-size: 16px;
    margin-bottom: 2px;
  }
  .rel-ai__head-sub {
    font-size: 12px;
    line-height: 1.5;
  }
  .rel-ai__head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .rel-ai__head-more {
    padding: 6px 10px;
    font-size: 12px;
  }
  .rel-ai__nav {
    width: 32px;
    height: 32px;
  }
  .rel-ai__nav svg {
    width: 12px;
    height: 12px;
  }
  .rel-ai__swiper {
    padding-bottom: 6px;
  }
  .rel-ai__swiper .swiper-slide {
    height: auto;
    display: flex;
    align-self: stretch;
  }
  .rel-ai-card {
    width: 100%;
    gap: 0;
    padding: 12px 10px 10px;
    border-radius: 14px;
    display: grid;
    grid-template-rows: 64px 36px 22px 1fr;
    row-gap: 6px;
  }
  .rel-ai-card__badge {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 2px 6px;
    gap: 3px;
  }
  .rel-ai-card__badge svg {
    width: 8px !important;
    height: 8px !important;
  }
  .rel-ai-card__ico {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin: 0 auto;
  }
  .rel-ai-card__ico img {
    padding: 6px;
    border-radius: 16px;
  }
  .rel-ai-card__body {
    gap: 0;
    display: contents;
  }
  .rel-ai-card__title {
    font-size: 13px;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
  }
  .rel-ai-card__en {
    font-size: 10px;
    letter-spacing: 0.1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    line-height: 1.2;
  }
  .rel-ai-card__meta {
    display: none;
  }
  .rel-ai-card__foot {
    padding-top: 8px;
    gap: 6px;
    margin-top: 0;
    align-self: end;
  }
  .rel-ai-card__price {
    flex: 1;
    min-width: 0;
    gap: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .rel-ai-card__price-label {
    font-size: 9.5px;
    flex-shrink: 0;
  }
  .rel-ai-card__price strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .rel-ai-card__price small {
    font-size: 9.5px;
    flex-shrink: 0;
  }
  .rel-ai-card__buy {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
  }
  .rel-ai-card__buy svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 480px) {
  .rel-ai-card {
    padding: 10px 9px 9px;
    grid-template-rows: 56px 32px 20px 1fr;
    row-gap: 5px;
  }
  .rel-ai-card__ico {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .rel-ai-card__ico img {
    padding: 5px;
    border-radius: 14px;
  }
  .rel-ai-card__title {
    font-size: 12.5px;
  }
  .rel-ai-card__en {
    font-size: 9.5px;
  }
  .rel-ai-card__price-label {
    font-size: 9px;
  }
  .rel-ai-card__price strong {
    font-size: 12.5px;
  }
  .rel-ai-card__price small {
    font-size: 9px;
  }
  .rel-ai-card__buy {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
}
.comments.mobile {
  display: none;
}

.reviews {
  margin-bottom: 48px;
}
.reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.reviews__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviews__title {
  font-size: 17px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews__title svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.reviews__count {
  font-size: 11.5px;
  font-weight: 700;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #ddd4f3;
  padding: 3px 11px;
  border-radius: 20px;
}
.reviews__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22);
  white-space: nowrap;
}
.reviews__add-btn:hover {
  opacity: 0.9;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.32);
}
.reviews__summary {
  display: flex;
  align-items: center;
  gap: 28px;
  background: #faf9fe;
  border: 1.5px solid #ede8f8;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 22px;
}
.reviews__summary-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 80px;
}
.reviews__summary-score strong {
  font-size: 38px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1;
  letter-spacing: -0.03em;
}
.reviews__summary-score > span {
  font-size: 11px;
  color: #9090ae;
  font-weight: 500;
}
.reviews__summary-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reviews__bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #9090ae;
  font-weight: 600;
}
.reviews__bar-row svg {
  flex-shrink: 0;
}
.reviews__bar {
  flex: 1;
  height: 6px;
  background: #ede8f8;
  border-radius: 6px;
  overflow: hidden;
}
.reviews__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 6px;
}
.reviews__stars {
  display: flex;
  gap: 2px;
}
.reviews__stars svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.reviews__stars--lg svg {
  width: 18px;
  height: 18px;
}
.reviews__form {
  margin-bottom: 20px;
  animation: rv-slide 0.25s ease;
}
@keyframes rv-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reviews__form-inner {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: #faf9fe;
  border: 1.5px solid #ede8f8;
  border-radius: 16px;
}
.reviews__form-body {
  flex: 1;
  min-width: 0;
}
.reviews__form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.reviews__form-top strong {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
}
.reviews__form-rating {
  display: flex;
  gap: 2px;
  direction: ltr;
}
.reviews__form textarea {
  width: 100%;
  min-height: 80px;
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #333;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reviews__form textarea::placeholder {
  color: #bbb;
}
.reviews__form textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.reviews__form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.reviews__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.22);
  transition: box-shadow 0.2s;
}
.reviews__form-submit:hover {
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.32);
}
.reviews__form-cancel {
  background: none;
  border: 1.5px solid #ede8f8;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #9090ae;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.reviews__form-cancel:hover {
  border-color: #c4b5f4;
  color: #7c3aed;
}
.reviews__star-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #ddd;
  cursor: pointer;
  padding: 0 1px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.reviews__star-btn.is-hover, .reviews__star-btn.is-active {
  color: #f59e0b;
  transform: scale(1.15);
}
.reviews__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.reviews__avatar--color-1 {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
.reviews__avatar--color-2 {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.reviews__avatar--color-3 {
  background: linear-gradient(135deg, #059669, #047857);
}
.reviews__avatar--color-4 {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}
.reviews__avatar--color-5 {
  background: linear-gradient(135deg, #db2777, #9d174d);
}
.reviews__avatar--admin {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
}
.reviews__avatar--admin svg {
  color: #fff;
}
.reviews__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.reviews__item-card {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #ede8f8;
  border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.reviews__item-card:hover {
  border-color: #c4b5f4;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06);
}
.reviews__item-card--reply {
  background: #faf9fe;
  border-color: #e8e2f8;
  border-right: 3px solid #a78bfa;
}
.reviews__item-body {
  flex: 1;
  min-width: 0;
}
.reviews__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.reviews__item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.reviews__item-meta strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #1a1a2e;
}
.reviews__item-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.reviews__item-badge--buyer {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.reviews__item-badge--admin {
  background: #f3f0ff;
  color: #7c3aed;
  border: 1px solid #ddd4f3;
}
.reviews__item-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #b0aac8;
  white-space: nowrap;
  flex-shrink: 0;
}
.reviews__item-date svg {
  opacity: 0.6;
}
.reviews__item-text {
  font-size: 13.5px;
  color: #4a4a6a;
  line-height: 2;
  margin: 0 0 10px;
}
.reviews__item-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews__like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8f7fc;
  border: 1.5px solid #ede8f8;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #9090ae;
  cursor: pointer;
  transition: all 0.2s;
}
.reviews__like-btn span {
  min-width: 14px;
  text-align: center;
}
.reviews__like-btn:hover {
  border-color: #c4b5f4;
  color: #7c3aed;
  background: #f3f0ff;
}
.reviews__like-btn.is-liked {
  background: #f3f0ff;
  border-color: #c4b5f4;
  color: #7c3aed;
}
.reviews__reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid #ede8f8;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9090ae;
  cursor: pointer;
  transition: all 0.2s;
}
.reviews__reply-btn:hover {
  border-color: #c4b5f4;
  color: #7c3aed;
}
.reviews__reply {
  display: flex;
  gap: 0;
  margin-top: 6px;
  padding-right: 28px;
}
.reviews__reply-line {
  width: 2px;
  background: linear-gradient(180deg, #c4b5f4, transparent);
  border-radius: 2px;
  margin-left: 12px;
  flex-shrink: 0;
}
.reviews__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 22px;
}
.reviews__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f8f7fc;
  border: 1.5px solid #ede8f8;
  font-size: 13px;
  font-weight: 700;
  color: #6b6b8a;
  text-decoration: none;
  transition: all 0.2s;
}
.reviews__page:hover {
  border-color: #c4b5f4;
  color: #7c3aed;
  background: #f3f0ff;
}
.reviews__page--active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
}
.reviews__list {
  position: relative;
}
.reviews__list--collapsed {
  max-height: 360px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
}
.reviews__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  margin: 14px auto 0;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 12px;
  color: #4a4664;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}
.reviews__toggle:hover {
  border-color: #7c3aed;
  color: #7c3aed;
  background: linear-gradient(135deg, #faf8ff, #f3f0ff);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(124, 58, 237, 0.3);
}
.reviews__toggle-text {
  line-height: 1;
}
.reviews__toggle-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.reviews__toggle-chev {
  transition: transform 0.25s ease;
  color: rgba(0, 0, 0, 0.45);
}
.reviews__toggle[aria-expanded=true] .reviews__toggle-chev {
  transform: rotate(180deg);
}
.reviews__toggle[aria-expanded=true] .reviews__toggle-count {
  display: none;
}
.reviews__list:not(.reviews__list--collapsed) {
  max-height: none;
  mask-image: none;
  -webkit-mask-image: none;
}

[data-theme=dark] .reviews__title {
  color: #f0ecff;
}
[data-theme=dark] .reviews__title svg {
  color: #a78bfa;
}
[data-theme=dark] .reviews__count {
  background: #1e1940;
  border-color: #3a2f6a;
  color: #c4b5f4;
}
[data-theme=dark] .reviews__add-btn {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
[data-theme=dark] .reviews__summary {
  background: #16131f;
  border-color: #252040;
}
[data-theme=dark] .reviews__summary-score strong {
  color: #f0ecff;
}
[data-theme=dark] .reviews__summary-score > span {
  color: #6b6090;
}
[data-theme=dark] .reviews__bar {
  background: #2a2448;
}
[data-theme=dark] .reviews__bar-fill {
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}
[data-theme=dark] .reviews__bar-row {
  color: #6b6090;
}
[data-theme=dark] .reviews__form-inner {
  background: #16131f;
  border-color: #252040;
}
[data-theme=dark] .reviews__form-top strong {
  color: #f0ecff;
}
[data-theme=dark] .reviews__form textarea {
  background: #1a1730;
  border-color: #252040;
  color: #f0ecff;
}
[data-theme=dark] .reviews__form textarea::placeholder {
  color: #4a4468;
}
[data-theme=dark] .reviews__form textarea:focus {
  border-color: #7c3aed;
}
[data-theme=dark] .reviews__form-cancel {
  border-color: #252040;
  color: #6b6090;
}
[data-theme=dark] .reviews__form-cancel:hover {
  border-color: #5b4f90;
  color: #c4b5f4;
}
[data-theme=dark] .reviews__star-btn {
  color: #2e2848;
}
[data-theme=dark] .reviews__item-card {
  background: #16131f;
  border-color: #252040;
}
[data-theme=dark] .reviews__item-card:hover {
  border-color: #4a3f78;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .reviews__item-card--reply {
  background: #1a1730;
  border-color: #2e2848;
  border-right-color: #7c3aed;
}
[data-theme=dark] .reviews__item-meta strong {
  color: #f0ecff;
}
[data-theme=dark] .reviews__item-date {
  color: #4a4468;
}
[data-theme=dark] .reviews__item-text {
  color: #c0bce0;
}
[data-theme=dark] .reviews__item-badge--buyer {
  background: #0d2018;
  color: #6ee7b7;
  border-color: #1a4030;
}
[data-theme=dark] .reviews__item-badge--admin {
  background: #1e1940;
  color: #c4b5f4;
  border-color: #3a2f6a;
}
[data-theme=dark] .reviews__like-btn {
  background: #1a1730;
  border-color: #252040;
  color: #6b6090;
}
[data-theme=dark] .reviews__like-btn:hover, [data-theme=dark] .reviews__like-btn.is-liked {
  background: #1e1940;
  border-color: #4a3f78;
  color: #c4b5f4;
}
[data-theme=dark] .reviews__reply-btn {
  border-color: #252040;
  color: #6b6090;
}
[data-theme=dark] .reviews__reply-btn:hover {
  border-color: #4a3f78;
  color: #c4b5f4;
}
[data-theme=dark] .reviews__reply-line {
  background: linear-gradient(180deg, #4a3f78, transparent);
}
[data-theme=dark] .reviews__page {
  background: #1a1730;
  border-color: #252040;
  color: #6b6090;
}
[data-theme=dark] .reviews__page:hover {
  border-color: #4a3f78;
  color: #c4b5f4;
  background: #1e1940;
}
[data-theme=dark] .reviews__page--active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: #7c3aed;
  color: #fff;
}

@media (max-width: 640px) {
  .reviews__summary {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
  }
  .reviews__summary-score {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .reviews__summary-score strong {
    font-size: 28px;
  }
  .reviews__summary-bars {
    width: 100%;
  }
  .reviews__header {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .reviews__title {
    font-size: 16px;
  }
  .reviews__count {
    font-size: 11px;
    padding: 3px 9px;
  }
  .reviews__add-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 13px;
  }
  .reviews__form-inner {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .reviews__item-card {
    padding: 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .reviews__item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
  }
  .reviews__item-meta {
    gap: 5px;
  }
  .reviews__item-meta strong {
    font-size: 13px;
  }
  .reviews__user-name {
    font-size: 13px;
  }
  .reviews__user-tag {
    font-size: 9.5px;
    padding: 1px 6px;
  }
  .reviews__item-badge {
    font-size: 9px;
    padding: 2px 7px;
    gap: 3px;
  }
  .reviews__verified {
    font-size: 9.5px;
    padding: 1px 6px;
    gap: 3px;
  }
  .reviews__sentiment-tag {
    font-size: 9.5px;
    padding: 1px 7px;
  }
  .reviews__stars svg {
    width: 11px !important;
    height: 11px !important;
  }
  .reviews__item-date {
    font-size: 10.5px;
    gap: 3px;
  }
  .reviews__item-text {
    font-size: 12.5px;
    line-height: 1.85;
    margin-bottom: 8px;
  }
  .reviews__item-foot {
    gap: 6px;
    flex-wrap: wrap;
  }
  .reviews__like-btn, .reviews__reply-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
  }
  .reviews__like-btn svg, .reviews__reply-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
  }
  .reviews__like-btn span, .reviews__reply-btn span {
    min-width: 12px;
    flex-shrink: 0;
  }
  .reviews__reply {
    padding-right: 12px;
  }
  .reviews__avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }
  .reviews__top-review {
    padding: 14px 14px 4px;
    border-radius: 14px;
  }
  .reviews__top-review-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  .reviews__top-review-by {
    font-size: 10.5px;
  }
  .reviews__toggle {
    width: 100%;
    padding: 11px 14px;
    font-size: 12.5px;
    gap: 6px;
  }
  .reviews__toggle-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .reviews__toggle-count {
    font-size: 10.5px;
    padding: 2px 8px;
  }
  .reviews__pagination {
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .reviews__page {
    width: 34px;
    height: 34px;
    font-size: 12px;
    border-radius: 9px;
  }
  .reviews__page svg {
    width: 12px;
    height: 12px;
  }
  .reviews__list--collapsed {
    max-height: 320px;
  }
}
.reviews__ai-summary {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf5ff 0%, #eef2ff 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  box-shadow: 0 10px 30px -18px rgba(124, 58, 237, 0.35);
  isolation: isolate;
}
.reviews__ai-summary-glow {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25), transparent 60%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}
.reviews__ai-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.reviews__ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.5);
}
.reviews__ai-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.reviews__ai-stamp svg {
  color: #7c3aed;
}
.reviews__ai-summary-text {
  font-size: 13.5px;
  line-height: 2;
  color: #334155;
  margin: 0 0 12px;
}
.reviews__ai-summary-text strong {
  color: #1e1b4b;
  font-weight: 800;
  background: rgba(168, 85, 247, 0.12);
  padding: 1px 6px;
  border-radius: 6px;
}
.reviews__ai-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.reviews__ai-insight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.reviews__ai-insight small {
  font-weight: 800;
  font-size: 11px;
  margin-right: 2px;
}
.reviews__ai-insight--up {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.3);
}
.reviews__ai-insight--up svg, .reviews__ai-insight--up small {
  color: #16a34a;
}
.reviews__ai-insight--down {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.3);
}
.reviews__ai-insight--down svg, .reviews__ai-insight--down small {
  color: #d97706;
}
.reviews__sentiment {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.reviews__sentiment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.reviews__sentiment-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #1e1b4b;
}
.reviews__sentiment-title svg {
  color: #7c3aed;
}
.reviews__sentiment-count {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}
.reviews__sentiment-bar {
  display: flex;
  height: 28px;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 10px;
}
.reviews__sentiment-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  transition: transform 0.25s ease;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.reviews__sentiment-seg:hover {
  transform: scaleY(1.08);
}
.reviews__sentiment-seg span {
  padding: 0 6px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.reviews__sentiment-seg--positive {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.reviews__sentiment-seg--neutral {
  background: linear-gradient(90deg, #facc15, #eab308);
  color: #422006;
}
.reviews__sentiment-seg--negative {
  background: linear-gradient(90deg, #f87171, #dc2626);
}
.reviews__sentiment-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.reviews__sentiment-dot {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}
.reviews__sentiment-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
}
.reviews__sentiment-tag--positive {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}
.reviews__sentiment-tag--neutral {
  color: #854d0e;
  background: rgba(234, 179, 8, 0.15);
}
.reviews__sentiment-tag--negative {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}
.reviews__keywords {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.7);
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
.reviews__keywords-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.reviews__keywords-label svg {
  color: #7c3aed;
}
.reviews__keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.reviews__keyword {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reviews__keyword small {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 6px;
}
.reviews__keyword:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: #7c3aed;
}
.reviews__keyword--active {
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #db2777);
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.5);
}
.reviews__keyword--active small {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.reviews__top-review {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  padding: 16px 18px 6px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 14px 36px -18px rgba(245, 158, 11, 0.5);
  isolation: isolate;
}
.reviews__top-review-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 60%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}
.reviews__top-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.reviews__top-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(217, 119, 6, 0.6);
}
.reviews__top-review-by {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
}
.reviews__item-card--top {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.reviews__avatar-crown {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.6);
}
.reviews__avatar {
  position: relative;
}
.reviews__top-review-helpful {
  margin-right: auto;
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
}
.reviews__keyword-mention {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 800;
}
.reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #0e7490;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 999px;
  cursor: help;
}
.reviews__verified svg {
  color: #0891b2;
}
.reviews__verified--pending {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}
.reviews__verified--pending svg {
  color: #d97706;
}
.reviews__item-card--pending {
  background: rgba(254, 252, 232, 0.6);
  border: 1px dashed rgba(245, 158, 11, 0.4);
}
.reviews__pending-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400e;
  background: rgba(245, 158, 11, 0.08);
  border-right: 3px solid #f59e0b;
  border-radius: 8px;
}
.reviews__pending-note svg {
  color: #d97706;
  flex-shrink: 0;
}
.reviews__user-name {
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.reviews__user-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  line-height: 1.3;
}
.reviews__user-tag--pro {
  color: #fff;
  background: linear-gradient(90deg, #f59e0b, #d97706);
}
.reviews__user-tag--pro svg {
  color: #fff;
}
.reviews__user-tag--active {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
}
.reviews__user-tag--active svg {
  color: #2563eb;
}
.reviews__user-tag--new {
  color: #475569;
  background: rgba(100, 116, 139, 0.12);
}
.reviews__user-tag--new svg {
  color: #64748b;
}
.reviews__user-tooltip {
  position: absolute;
  z-index: 100;
  min-width: 240px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.reviews__user-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.reviews__user-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.reviews__user-tooltip-head strong {
  font-size: 13px;
  color: #1e1b4b;
}
.reviews__user-tooltip-head span {
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
}
.reviews__user-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #475569;
  margin-bottom: 6px;
  line-height: 1.7;
}
.reviews__user-tooltip-row:last-child {
  margin-bottom: 0;
}
.reviews__user-tooltip-row span {
  color: #1e1b4b;
  font-weight: 700;
}
.reviews__user-tooltip-row svg {
  color: #7c3aed;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .reviews__ai-summary {
    padding: 14px 14px;
  }
  .reviews__ai-summary-text {
    font-size: 12.5px;
    line-height: 1.9;
  }
  .reviews__sentiment {
    padding: 12px 14px;
  }
  .reviews__sentiment-bar {
    height: 24px;
  }
  .reviews__sentiment-seg {
    font-size: 10px;
  }
  .reviews__keywords {
    padding: 10px 12px;
  }
  .reviews__top-review {
    padding: 14px 14px 4px;
  }
  .reviews__user-tooltip {
    min-width: 200px;
  }
}

[data-theme=dark] .reviews__toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .reviews__toggle:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: #a78bfa;
  color: #c4b5fd;
}
[data-theme=dark] .reviews__toggle-count {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}
[data-theme=dark] .reviews__toggle-chev {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .reviews__ai-summary {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.25), rgba(30, 27, 75, 0.4));
  border-color: rgba(167, 139, 250, 0.25);
}
[data-theme=dark] .reviews__ai-summary-text {
  color: rgba(255, 255, 255, 0.82);
}
[data-theme=dark] .reviews__ai-summary-text strong {
  color: #fff;
  background: rgba(168, 85, 247, 0.25);
}
[data-theme=dark] .reviews__ai-stamp {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .reviews__ai-stamp svg {
  color: #c4b5fd;
}
[data-theme=dark] .reviews__ai-insight {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .reviews__ai-insight--up {
  color: #86efac;
}
[data-theme=dark] .reviews__ai-insight--up svg, [data-theme=dark] .reviews__ai-insight--up small {
  color: #4ade80;
}
[data-theme=dark] .reviews__ai-insight--down {
  color: #fcd34d;
}
[data-theme=dark] .reviews__ai-insight--down svg, [data-theme=dark] .reviews__ai-insight--down small {
  color: #fbbf24;
}
[data-theme=dark] .reviews__sentiment {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .reviews__sentiment-title {
  color: #fff;
}
[data-theme=dark] .reviews__sentiment-title svg {
  color: #c4b5fd;
}
[data-theme=dark] .reviews__sentiment-count {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .reviews__sentiment-bar {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .reviews__sentiment-dot {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .reviews__keywords {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .reviews__keywords-label {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .reviews__keywords-label svg {
  color: #c4b5fd;
}
[data-theme=dark] .reviews__keyword {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
[data-theme=dark] .reviews__keyword small {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .reviews__keyword:hover {
  color: #c4b5fd;
  border-color: rgba(168, 85, 247, 0.5);
}
[data-theme=dark] .reviews__top-review {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.45), rgba(146, 64, 14, 0.25));
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme=dark] .reviews__top-review-by {
  color: #fbbf24;
}
[data-theme=dark] .reviews__item-card--top {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 158, 11, 0.25);
}
[data-theme=dark] .reviews__top-review-helpful {
  color: #fbbf24;
}
[data-theme=dark] .reviews__keyword-mention {
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
}
[data-theme=dark] .reviews__verified {
  color: #67e8f9;
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.35);
}
[data-theme=dark] .reviews__verified svg {
  color: #22d3ee;
}
[data-theme=dark] .reviews__verified--pending {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme=dark] .reviews__verified--pending svg {
  color: #fbbf24;
}
[data-theme=dark] .reviews__item-card--pending {
  background: rgba(120, 53, 15, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme=dark] .reviews__pending-note {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.1);
  border-right-color: #f59e0b;
}
[data-theme=dark] .reviews__pending-note svg {
  color: #fbbf24;
}
[data-theme=dark] .reviews__user-tag--active {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
}
[data-theme=dark] .reviews__user-tag--active svg {
  color: #60a5fa;
}
[data-theme=dark] .reviews__user-tag--new {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .reviews__user-tag--new svg {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .reviews__user-tooltip {
  background: #1e1b4b;
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
[data-theme=dark] .reviews__user-tooltip-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .reviews__user-tooltip-head strong {
  color: #fff;
}
[data-theme=dark] .reviews__user-tooltip-head span {
  color: #c4b5fd;
}
[data-theme=dark] .reviews__user-tooltip-row {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .reviews__user-tooltip-row span {
  color: #fff;
}
[data-theme=dark] .reviews__user-tooltip-row svg {
  color: #c4b5fd;
}
[data-theme=dark] .reviews__sentiment-tag--positive {
  color: #86efac;
  background: rgba(34, 197, 94, 0.18);
}
[data-theme=dark] .reviews__sentiment-tag--neutral {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.2);
}
[data-theme=dark] .reviews__sentiment-tag--negative {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
}

.forms .forms__header-title {
  text-align: right;
  font-size: 14px;
  color: #000;
  line-height: 20px;
}
.forms .forms__header-title h4 {
  line-height: 50px;
}
.forms .forms__header-title p {
  line-height: 30px;
}
.forms .forms__headerimage {
  padding-bottom: 50px;
}
.forms .forms__content {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.44);
  border-radius: 20px;
  margin: 50px 0px;
  padding-top: 30px;
  padding-bottom: 60px;
  padding-right: 30px;
  padding-left: 30px;
}
.forms .forms__content .forms__content-header {
  width: 100%;
  display: flex;
  padding-bottom: 20px;
}
.forms .forms__content .forms__content-header .forms__content-body-title {
  display: inline-flex;
  width: 50%;
  font-size: 20px;
}
.forms .forms__content .forms__content-header .forms__content-body-describe {
  text-align: left;
  display: inline-flex;
  width: 50%;
  text-align: center;
  font-size: 12px;
  color: #828282;
}
.forms .forms__content .forms__content-body {
  width: 100%;
}
.forms .forms__content .forms__content-body .form-group {
  display: flex;
}
.forms .forms__content .forms__content-body input {
  overflow: visible;
  display: inline-flex;
  width: 47%;
  padding: 10px;
  background-color: #eaeaea;
  margin: 10px;
  border-radius: 13px;
}
.forms .forms__content .forms__content-body button {
  display: block;
  padding: 10px;
  background-color: #9900ff;
  border-radius: 13px;
  color: #fff;
  position: absolute;
  left: 54px;
  width: 288px;
  margin-top: 45px;
  text-align: center;
  height: 50px;
}

[data-theme=dark] .forms .forms__header-title {
  color: #fff;
}
[data-theme=dark] .forms .forms__header-title h4 {
  color: #fff;
  line-height: 50px;
}
[data-theme=dark] .forms .forms__header-title p {
  color: #fff;
  line-height: 30px;
}
[data-theme=dark] .forms .forms__headerimage {
  padding-bottom: 50px;
}
[data-theme=dark] .forms .forms__content {
  box-shadow: 0px 10px 30px rgba(252, 249, 249, 0.44);
  background: #0c093e;
}
[data-theme=dark] .forms .forms__content .forms__content-header .forms__content-body-title {
  color: #fff;
}
[data-theme=dark] .forms .forms__content .forms__content-header .forms__content-body-describe {
  color: #fff;
}
[data-theme=dark] .forms .forms__content .forms__content-body input {
  background-color: #000;
}

.zamandar {
  background-image: url("../img/zamandar_back.svg");
  display: flex;
  padding: 50px;
  align-items: center;
  justify-content: start;
}
.zamandar__photo {
  box-shadow: 0px 0px 4.59px 4.41px rgba(0, 0, 0, 0.11);
  height: 232px;
  width: 232px;
  object-fit: cover;
  border-radius: 18px;
  margin-left: 15px;
}
.zamandar__photo-title {
  object-fit: contain;
  height: 60px;
  margin: 0px 40px;
}
.zamandar__details {
  background-color: rgba(0, 0, 0, 0.17);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  height: 232px;
}
.zamandar__details__title {
  margin: 0px 90px;
  font-size: 16px;
  color: white;
  font-weight: 400;
  margin-bottom: 40px;
}
.zamandar__details__time {
  margin-bottom: 40px;
}
.zamandar__details__time__number {
  font-size: 20px;
  color: white;
  font-weight: 700;
}
.zamandar__details__time__number span {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 3px;
}
.zamandar__details__time__word {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: white;
  font-weight: 400;
}
.zamandar__details__button {
  background-color: #fff112;
  border-radius: 0px 0px 14px 14px;
  padding: 10px;
  font-size: 20px;
  text-align: center;
  width: 100%;
  color: black;
  font-weight: 500;
}
.zamandar__details__button :last-child {
  font-weight: 400;
  font-size: 14px;
}

.flash-deal {
  padding: 24px 0 20px;
}
.flash-deal__card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  box-shadow: 0 20px 50px -18px rgba(76, 29, 149, 0.5);
  isolation: isolate;
}
.flash-deal__glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.45) 0%, transparent 60%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
  animation: fd-pulse 5s ease-in-out infinite;
}
@keyframes fd-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
.flash-deal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.flash-deal__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ec4899, #f97316);
  border-radius: 12px;
  box-shadow: 0 6px 16px -4px rgba(236, 72, 153, 0.5);
  letter-spacing: 0.2px;
}
.flash-deal__badge svg {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}
.flash-deal__timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.flash-deal__timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}
.flash-deal__timer-num {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.flash-deal__timer small {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.flash-deal__timer-sep {
  font-size: 16px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  margin-top: -6px;
}
.flash-deal__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.flash-deal__product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.flash-deal__product[data-color=purple] {
  --fd-accent: 168, 85, 247;
  --fd-c1: #a855f7;
  --fd-c2: #7c3aed;
}
.flash-deal__product[data-color=blue] {
  --fd-accent: 59, 130, 246;
  --fd-c1: #3b82f6;
  --fd-c2: #1d4ed8;
}
.flash-deal__product[data-color=emerald] {
  --fd-accent: 16, 185, 129;
  --fd-c1: #10b981;
  --fd-c2: #059669;
}
.flash-deal__product[data-color=orange] {
  --fd-accent: 245, 158, 11;
  --fd-c1: #f59e0b;
  --fd-c2: #d97706;
}
.flash-deal__product[data-color=pink] {
  --fd-accent: 236, 72, 153;
  --fd-c1: #ec4899;
  --fd-c2: #db2777;
}
.flash-deal__product::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  right: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--fd-c1, #a855f7), var(--fd-c2, #7c3aed));
  opacity: 0.9;
}
.flash-deal__product-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.flash-deal__product:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--fd-accent, 168, 85, 247), 0.5);
  box-shadow: 0 14px 30px -10px rgba(var(--fd-accent, 168, 85, 247), 0.45);
}
.flash-deal__product-img {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f8f7fc);
  padding: 6px;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.3);
}
.flash-deal__product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.flash-deal__product-info {
  flex: 1;
  min-width: 0;
}
.flash-deal__product-info h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flash-deal__product-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  direction: ltr;
}
.flash-deal__product-prices del {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
}
.flash-deal__product-prices strong {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}
.flash-deal__product-prices strong small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 3px;
}
.flash-deal__product-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-c1, #ec4899), var(--fd-c2, #db2777));
  border-radius: 8px;
  box-shadow: 0 4px 10px -2px rgba(var(--fd-accent, 236, 72, 153), 0.55);
  direction: ltr;
}

@media (max-width: 768px) {
  .flash-deal {
    padding: 18px 0 14px;
  }
  .flash-deal__card {
    padding: 16px;
    border-radius: 18px;
  }
  .flash-deal__header {
    gap: 10px;
    margin-bottom: 14px;
  }
  .flash-deal__badge {
    font-size: 11.5px;
    padding: 6px 11px;
  }
  .flash-deal__timer {
    padding: 5px 9px;
  }
  .flash-deal__timer-num {
    font-size: 14px;
  }
  .flash-deal__timer-unit {
    min-width: 32px;
  }
  .flash-deal__products {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .flash-deal__product {
    padding: 10px 12px;
  }
  .flash-deal__product-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }
  .flash-deal__product-info h4 {
    font-size: 12.5px;
  }
  .flash-deal__product-prices strong {
    font-size: 15px;
  }
}
.product-content {
  margin-bottom: 30px;
}
.product-content__nav {
  display: flex;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #f0ecf9;
  margin-bottom: 24px;
}
.product-content__nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  background: #f8f7fc;
  font-size: 14px;
  font-weight: 600;
  color: #777;
  cursor: pointer;
  transition: all 0.25s ease;
  border-left: 1px solid #f0ecf9;
}
.product-content__nav-btn:last-child {
  border-left: none;
}
.product-content__nav-btn svg {
  color: #bbb;
  transition: color 0.2s;
}
.product-content__nav-btn:hover {
  color: #7c3aed;
  background: #f3f0ff;
}
.product-content__nav-btn:hover svg {
  color: #7c3aed;
}
.product-content__nav-btn.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}
.product-content__nav-btn.is-active svg {
  color: #fff;
}
.product-content__section {
  display: none;
  animation: contentFadeIn 0.4s ease;
}
.product-content__section.is-active {
  display: block;
}
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.product-content__card {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 18px;
  padding: 32px;
}
.product-content__card h2 {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0ecf9;
}
.product-content__card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin: 24px 0 12px;
}
.product-content__card p {
  font-size: 14px;
  color: #555;
  line-height: 2;
  margin: 0 0 16px;
  text-align: justify;
}
.product-content__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0;
}
.product-content__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #f8f7fc;
  border-radius: 14px;
  border: 1px solid #f0ecf9;
  transition: all 0.25s ease;
}
.product-content__feature:hover {
  border-color: #c4b5fd;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.06);
}
.product-content__feature-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-content__feature-icon--blue {
  background: #eff6ff;
  color: #2563eb;
}
.product-content__feature-icon--green {
  background: #ecfdf5;
  color: #059669;
}
.product-content__feature-icon--purple {
  background: #f3f0ff;
  color: #7c3aed;
}
.product-content__feature-icon--orange {
  background: #fff7ed;
  color: #c2410c;
}
.product-content__feature h4 {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin: 0 0 4px;
}
.product-content__feature p {
  font-size: 12px;
  color: #888;
  margin: 0;
  line-height: 1.5;
}
.product-content__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-right: 24px;
}
.product-content__steps::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #8b5cf6, #c4b5fd, #f0ecf9);
}
.product-content__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  position: relative;
}
.product-content__step-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.product-content__step h4 {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin: 0 0 4px;
}
.product-content__step p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.7;
}
.product-content__rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-content__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
}
.product-content__rule p {
  margin: 0;
  line-height: 1.6;
}
.product-content__rule--do {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.product-content__rule--do svg {
  color: #059669;
}
.product-content__rule--do p {
  color: #047857;
}
.product-content__rule--dont {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.product-content__rule--dont svg {
  color: #ef4444;
}
.product-content__rule--dont p {
  color: #991b1b;
}
.product-content__rule--warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.product-content__rule--warn svg {
  color: #d97706;
}
.product-content__rule--warn p {
  color: #92400e;
}
.product-content__comments {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .product-content__nav {
    flex-wrap: wrap;
  }
  .product-content__nav-btn {
    flex: 1 1 48%;
    font-size: 12px;
    padding: 10px 12px;
  }
  .product-content__card {
    padding: 20px 18px;
  }
  .product-content__card h2 {
    font-size: 17px;
  }
  .product-content__features {
    grid-template-columns: 1fr;
  }
  .product-content__feature {
    padding: 12px;
  }
}
[data-theme=dark] .product-content__nav {
  border-color: #252040;
}
[data-theme=dark] .product-content__nav-btn {
  background: #1a1730;
  color: #c4bde8;
  border-color: #252040;
}
[data-theme=dark] .product-content__nav-btn svg {
  color: #a094cc;
}
[data-theme=dark] .product-content__nav-btn:hover {
  background: #201c3c;
  color: #f0ecff;
}
[data-theme=dark] .product-content__nav-btn.is-active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
}
[data-theme=dark] .product-content__card {
  background: #16131f;
  border-color: #252040;
}
[data-theme=dark] .product-content__card h2 {
  color: #f0ecff;
  border-color: #252040;
}
[data-theme=dark] .product-content__card h3 {
  color: #e8e4f8;
}
[data-theme=dark] .product-content__card p {
  color: #d0cce8;
}
[data-theme=dark] .product-content__feature {
  background: #1a1730;
  border-color: #252040;
}
[data-theme=dark] .product-content__feature h4 {
  color: #f0ecff;
}
[data-theme=dark] .product-content__feature p {
  color: #d0cce8;
}
[data-theme=dark] .product-content__step-num {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
[data-theme=dark] .product-content__step h4 {
  color: #f0ecff;
}
[data-theme=dark] .product-content__step p {
  color: #d0cce8;
}
[data-theme=dark] .product-content__steps::before {
  background: linear-gradient(180deg, #7c3aed, #252040);
}
[data-theme=dark] .product-content__rule--do {
  background: #0d2018;
  border-color: #1a4030;
}
[data-theme=dark] .product-content__rule--do p {
  color: #6ee7b7;
}
[data-theme=dark] .product-content__rule--dont {
  background: #200e18;
  border-color: #3a1828;
}
[data-theme=dark] .product-content__rule--dont p {
  color: #fca5a5;
}
[data-theme=dark] .product-content__rule--warn {
  background: #221508;
  border-color: #3d2810;
}
[data-theme=dark] .product-content__rule--warn p {
  color: #fcd34d;
}

.why-special {
  padding: 28px 0 24px;
  direction: rtl;
}
.why-special__card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 55%, #fdf2f8 100%);
  box-shadow: 0 18px 44px -22px rgba(168, 85, 247, 0.35);
  isolation: isolate;
  border: 1px solid rgba(168, 85, 247, 0.18);
}
.why-special__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(38px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}
.why-special__glow--a {
  top: -120px;
  right: -100px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.35) 0%, transparent 60%);
  animation: ws-pulse 6s ease-in-out infinite;
}
.why-special__glow--b {
  bottom: -140px;
  left: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 60%);
  animation: ws-pulse 8s ease-in-out infinite reverse;
}
@keyframes ws-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}
.why-special__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.why-special__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.why-special__brand-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  padding: 8px;
  box-shadow: 0 8px 22px -10px rgba(168, 85, 247, 0.25);
}
.why-special__brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.why-special__brand-text {
  min-width: 0;
}
.why-special__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #be185d;
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.why-special__eyebrow svg {
  color: #ec4899;
}
.why-special__title {
  font-size: 20px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0;
  line-height: 1.5;
}
.why-special__title strong {
  background: linear-gradient(120deg, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why-special__score {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(22, 163, 74, 0.06));
  border: 1px solid rgba(34, 197, 94, 0.4);
  min-width: 110px;
}
.why-special__score-num {
  font-size: 22px;
  font-weight: 900;
  color: #15803d;
  line-height: 1;
}
.why-special__score-num small {
  font-size: 12px;
  font-weight: 700;
  color: rgba(21, 128, 61, 0.7);
  margin-right: 2px;
}
.why-special__score-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-top: 4px;
}
.why-special__lead {
  font-size: 14px;
  line-height: 2;
  color: #334155;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-right: 3px solid #7c3aed;
  border-radius: 12px;
}
.why-special__lead strong {
  color: #1e1b4b;
  font-weight: 800;
}
.why-special__compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.why-special__col {
  position: relative;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.why-special__col:hover {
  transform: translateY(-3px);
}
.why-special__col--free .why-special__col-head svg {
  color: #dc2626;
}
.why-special__col--free .why-special__col-tag {
  color: #b91c1c;
}
.why-special__col--this {
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.14), rgba(255, 255, 255, 0.85));
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 12px 32px -16px rgba(34, 197, 94, 0.4);
}
.why-special__col--this .why-special__col-head svg {
  color: #16a34a;
}
.why-special__col--this .why-special__col-tag {
  color: #15803d;
}
.why-special__col--this .why-special__list li {
  color: #064e3b;
}
.why-special__col--this .why-special__list li::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.why-special__col--rivals .why-special__col-head svg {
  color: #d97706;
}
.why-special__col--rivals .why-special__col-tag {
  color: #b45309;
}
.why-special__col-ribbon {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #ec4899, #a855f7);
  border-radius: 6px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px -4px rgba(168, 85, 247, 0.5);
}
.why-special__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.why-special__col-tag {
  font-size: 12px;
  font-weight: 800;
}
.why-special__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.why-special__list li {
  position: relative;
  font-size: 12.5px;
  line-height: 1.7;
  color: #475569;
  padding-right: 18px;
  margin-bottom: 8px;
}
.why-special__list li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}
.why-special__list li:last-child {
  margin-bottom: 0;
}
.why-special__list li strong {
  color: #0f172a;
  font-weight: 800;
}
.why-special__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-special__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}
.why-special__tag svg {
  opacity: 0.85;
}
.why-special__tag--hot {
  color: #fff;
  background: linear-gradient(90deg, #ec4899, #f43f5e);
  border-color: transparent;
}
.why-special__tag--hot svg {
  color: #fff;
  opacity: 1;
}
@media (max-width: 900px) {
  .why-special__compare {
    grid-template-columns: 1fr;
  }
  .why-special__col--this {
    order: -1;
  }
}
@media (max-width: 600px) {
  .why-special {
    padding: 14px 0 16px;
  }
  .why-special__card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .why-special__glow--a {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -60px;
  }
  .why-special__glow--b {
    width: 240px;
    height: 240px;
    bottom: -100px;
    left: -80px;
  }
  .why-special__head {
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .why-special__brand {
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .why-special__brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 6px;
  }
  .why-special__brand-text {
    flex: 1;
    min-width: 0;
  }
  .why-special__eyebrow {
    font-size: 10.5px;
    padding: 3px 8px;
    margin-bottom: 5px;
    gap: 4px;
  }
  .why-special__eyebrow svg {
    width: 11px !important;
    height: 11px !important;
  }
  .why-special__title {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .why-special__score {
    padding: 7px 12px;
    min-width: 80px;
    border-radius: 12px;
    flex: 0 0 auto;
  }
  .why-special__score-num {
    font-size: 17px;
  }
  .why-special__score-num small {
    font-size: 10px;
  }
  .why-special__score-label {
    font-size: 9.5px;
    margin-top: 3px;
  }
  .why-special__lead {
    font-size: 12px;
    line-height: 1.85;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    border-right-width: 2px;
  }
  .why-special__compare {
    gap: 10px;
    margin-bottom: 12px;
  }
  .why-special__col {
    padding: 14px 12px 12px;
    border-radius: 14px;
  }
  .why-special__col-ribbon {
    top: -8px;
    right: 10px;
    padding: 3px 9px;
    font-size: 9.5px;
  }
  .why-special__col-head {
    margin-bottom: 10px;
  }
  .why-special__col-head svg {
    width: 16px !important;
    height: 16px !important;
  }
  .why-special__col-tag {
    font-size: 11px;
  }
  .why-special__list li {
    font-size: 11.5px;
    line-height: 1.7;
    padding-right: 14px;
    margin-bottom: 6px;
  }
  .why-special__list li::before {
    top: 7px;
    width: 5px;
    height: 5px;
  }
  .why-special__tags {
    gap: 6px;
  }
  .why-special__tag {
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 4px;
  }
  .why-special__tag svg {
    width: 11px !important;
    height: 11px !important;
  }
}
@media (max-width: 380px) {
  .why-special__card {
    padding: 14px 12px;
  }
  .why-special__title {
    font-size: 13.5px;
  }
  .why-special__brand-logo {
    width: 40px;
    height: 40px;
  }
  .why-special__score {
    min-width: 72px;
    padding: 6px 10px;
  }
  .why-special__score-num {
    font-size: 16px;
  }
  .why-special__col {
    padding: 12px 10px 10px;
  }
}

[data-theme=dark] .why-special__card {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
  box-shadow: 0 24px 60px -22px rgba(76, 29, 149, 0.55);
  border-color: rgba(167, 139, 250, 0.18);
}
[data-theme=dark] .why-special__glow {
  opacity: 0.7;
}
[data-theme=dark] .why-special__glow--a {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.5) 0%, transparent 60%);
}
[data-theme=dark] .why-special__glow--b {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, transparent 60%);
}
[data-theme=dark] .why-special__brand-logo {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme=dark] .why-special__brand-logo img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
[data-theme=dark] .why-special__eyebrow {
  color: #fbcfe8;
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.35);
}
[data-theme=dark] .why-special__eyebrow svg {
  color: #f9a8d4;
}
[data-theme=dark] .why-special__title {
  color: #fff;
}
[data-theme=dark] .why-special__title strong {
  background: linear-gradient(120deg, #c4b5fd, #f9a8d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme=dark] .why-special__score {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.08));
  border-color: rgba(34, 197, 94, 0.35);
}
[data-theme=dark] .why-special__score-num {
  color: #86efac;
}
[data-theme=dark] .why-special__score-num small {
  color: rgba(134, 239, 172, 0.7);
}
[data-theme=dark] .why-special__score-label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .why-special__lead {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  border-right-color: #a78bfa;
}
[data-theme=dark] .why-special__lead strong {
  color: #fff;
}
[data-theme=dark] .why-special__col {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .why-special__col--free .why-special__col-head svg {
  color: #f87171;
}
[data-theme=dark] .why-special__col--free .why-special__col-tag {
  color: #fca5a5;
}
[data-theme=dark] .why-special__col--this {
  background: linear-gradient(155deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.06));
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 12px 32px -16px rgba(34, 197, 94, 0.5);
}
[data-theme=dark] .why-special__col--this .why-special__col-head svg {
  color: #4ade80;
}
[data-theme=dark] .why-special__col--this .why-special__col-tag {
  color: #86efac;
}
[data-theme=dark] .why-special__col--this .why-special__list li {
  color: #fff;
}
[data-theme=dark] .why-special__col--this .why-special__list li::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
[data-theme=dark] .why-special__col--rivals .why-special__col-head svg {
  color: #fbbf24;
}
[data-theme=dark] .why-special__col--rivals .why-special__col-tag {
  color: #fcd34d;
}
[data-theme=dark] .why-special__list li {
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .why-special__list li::before {
  background: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .why-special__list li strong {
  color: #fff;
}
[data-theme=dark] .why-special__tag {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .why-special__tag--hot {
  color: #fff;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.25), rgba(244, 63, 94, 0.15));
  border-color: rgba(236, 72, 153, 0.5);
}
[data-theme=dark] .why-special__tag--hot svg {
  color: #fb7185;
}

/* blog-single */
.aside-blog {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}
.aside-blog__img {
  margin-bottom: 47px;
}
.aside-blog__img figure {
  position: relative;
}
.aside-blog__img figure > img {
  position: relative;
  z-index: 100;
}
.aside-blog__img figure .shadow {
  position: absolute;
  top: 13px;
  bottom: 0;
  right: 10px;
  left: 11px;
  z-index: 90;
  filter: blur(10px);
}
.aside-blog__title {
  margin-bottom: 53px;
}
.aside-blog__title h2 {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
}
.aside-blog__info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 51px;
}
.aside-blog__info .aside-blog__info-grid {
  flex: 1 0 50%;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 31px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item .name {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i {
  color: #000000;
  width: 20px;
  display: flex;
  justify-content: center;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i.icon-profile {
  font-size: 17px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i.icon-hour {
  font-size: 19px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i.icon-statistics {
  font-size: 15px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i.icon-calender {
  font-size: 19px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item i.icon-cat {
  font-size: 16px;
}
.aside-blog__info .aside-blog__info-grid .aside-blog__info-item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.aside-blog__info .aside-blog__info-grid:nth-of-type(1) {
  padding-left: 26px;
  border-left: 1px solid #e6e6e6;
}
.aside-blog__info .aside-blog__info-grid:nth-of-type(2) {
  padding-right: 26px;
}
.aside-blog__rates {
  background-color: #17a404;
  border-radius: 10px;
  padding: 0 30px;
  padding-top: 31px;
  padding-bottom: 32px;
  margin-bottom: 40px;
}
.aside-blog__rates .aside-blog__rates-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating {
  display: flex;
  align-items: center;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating .item {
  margin-left: 21px;
  cursor: pointer;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating .item i {
  font-size: 25px;
  color: #ffffff;
  transition: 0.3s;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating .item:nth-last-of-type(1) {
  margin-left: 0;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating .item:hover i {
  color: #cbffc4;
}
.aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-numb {
  color: #ffffff;
  font-size: 42px;
  font-weight: 600;
  line-height: 40px;
}
.aside-blog__rates .aside-blog__rates-vote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.aside-blog__rates .aside-blog__rates-vote .title {
  color: #cbffc4;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 100;
  background-color: #17a404;
  padding-left: 19px;
}
.aside-blog__rates .aside-blog__rates-vote .vote {
  color: #cbffc4;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 100;
  background-color: #17a404;
  padding-right: 17px;
}
.aside-blog__rates .aside-blog__rates-vote .vote__numb {
  color: #ffffff;
}
.aside-blog__rates .aside-blog__rates-vote:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 90;
}
.aside-blog__related .aside-blog__related-img {
  margin-bottom: 27px;
}
.aside-blog__related .aside-blog__related-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 15px;
  margin-bottom: 19px;
}
.aside-blog__related .aside-blog__related-title .aside-blog__related-title-fa .title {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.aside-blog__related .aside-blog__related-title .aside-blog__related-title-fa .title-cat {
  color: #000000;
  font-size: 13px;
  font-weight: 400;
}
.aside-blog__related .aside-blog__related-title .aside-blog__related-title-en {
  text-align: left;
}
.aside-blog__related .aside-blog__related-title .aside-blog__related-title-en .title {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.aside-blog__related .aside-blog__related-title .aside-blog__related-title-en .title-cat {
  color: #000000;
  font-size: 13px;
  font-weight: 400;
}
.aside-blog__related .aside-blog__related-info {
  margin-bottom: 20px;
}
.aside-blog__related .aside-blog__related-info .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.aside-blog__related .aside-blog__related-info .item__title {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}
.aside-blog__related .aside-blog__related-info .item__value {
  color: #000000;
  font-size: 13px;
  font-weight: 400;
}
.aside-blog__related .aside-blog__related-info .item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.aside-blog__related .aside-blog__related-wiki {
  background-color: #000000;
  display: inline-flex;
  align-items: center;
  height: 26px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 60px;
  padding: 0 12px;
}
.aside-blog__related .aside-blog__related-wiki i {
  font-size: 9px;
  color: #ffffff;
  margin-left: 17px;
}
.aside-blog:before {
  content: "";
  position: absolute;
  left: -35px;
  width: 30px;
  top: 80px;
  bottom: 110px;
  box-shadow: -13px 0px 21px -14px rgba(0, 0, 0, 0.3);
}

/* panel */
.header-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.header-panel__home {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
}
.header-panel__home img {
  margin-left: 17px;
}
.header-panel .header-panel__nav {
  display: flex;
  align-items: center;
}
.header-panel .header-panel__nav li {
  color: #7b7b7b;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-left: 20px;
  transition: 0.3s;
}
.header-panel .header-panel__nav li:after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 60px;
  background-color: #d9d9d9;
  margin-right: 20px;
}
.header-panel .header-panel__nav li:last-child {
  margin-left: 0;
}
.header-panel .header-panel__nav li:last-child:after {
  display: none;
}
.header-panel .header-panel__nav li:hover {
  color: #f31212;
}

[data-theme=dark] .header-panel .header-panel__nav li {
  color: #908dd3;
}
[data-theme=dark] .header-panel .header-panel__nav li:after {
  background-color: #1f1c53;
}
[data-theme=dark] .header-panel .header-panel__nav li a::after {
  color: #c7c5ee;
}

@keyframes ap-verified-pop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ap-vip-shine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.panel-menu {
  display: none;
  align-items: center;
  justify-content: center;
}

.mask-shadow {
  display: none;
}

.aside-panel {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 20px;
  padding: 0 0 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 11, 72, 0.06);
}
.aside-panel__close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  backdrop-filter: blur(8px);
}
.aside-panel__profile {
  position: relative;
  padding: 22px 20px 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.aside-panel__profile-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #4c1d95 0%, #5b52f0 55%, #ec4899 100%);
}
.aside-panel__profile-bg::before, .aside-panel__profile-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.aside-panel__profile-bg::before {
  top: -40px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.2);
}
.aside-panel__profile-bg::after {
  bottom: -60px;
  left: -30px;
  width: 170px;
  height: 170px;
  background: rgba(236, 72, 153, 0.4);
}
.aside-panel__tier {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.aside-panel__tier--bronze {
  background: linear-gradient(135deg, #b45309, #92400e);
  color: #fff;
}
.aside-panel__tier--silver {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #1e293b;
}
.aside-panel__tier--gold {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
}
.aside-panel__tier--platinum {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #3730a3;
}
.aside-panel__avatar {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 6px auto 12px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
}
.aside-panel__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.aside-panel__avatar-verified {
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.5);
  animation: ap-verified-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aside-panel__name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.aside-panel__vip {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 5px;
  background: linear-gradient(90deg, #fbbf24 0%, #fcd34d 25%, #fbbf24 50%, #f59e0b 75%, #fbbf24 100%);
  background-size: 200% 100%;
  color: #7c2d12;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.55);
  animation: ap-vip-shine 3s linear infinite;
}
.aside-panel__phone {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  font-weight: 600;
}
.aside-panel__progress {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  text-align: right;
}
.aside-panel__progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}
.aside-panel__progress-head strong {
  color: #fff;
  font-weight: 800;
  direction: ltr;
}
.aside-panel__progress-bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  overflow: hidden;
}
.aside-panel__progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #fcd34d);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  transition: width 0.6s ease;
}
.aside-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 14px 10px;
}
.aside-panel__stat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(var(--c, 91, 82, 240), 0.08);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.14);
  border-radius: 10px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.aside-panel__stat:hover {
  transform: translateY(-2px);
  background: rgba(var(--c, 91, 82, 240), 0.12);
}
.aside-panel__stat-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(var(--c, 91, 82, 240), 0.3);
}
.aside-panel__stat > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.aside-panel__stat small {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.aside-panel__stat strong {
  font-size: 11.5px;
  font-weight: 800;
  color: #0f0b48;
  direction: ltr;
  letter-spacing: -0.01em;
}
.aside-panel__wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 14px 6px;
  padding: 11px;
  background: linear-gradient(135deg, #5b52f0 0%, #ec4899 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.aside-panel__wallet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.55);
  color: #fff;
}
.aside-panel__menu {
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aside-panel__section-title {
  padding: 10px 10px 6px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.35);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.aside-panel__section-title:first-child {
  padding-top: 4px;
}
.aside-panel__menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  color: rgba(15, 11, 72, 0.75);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, background 0.25s ease;
}
.aside-panel__menu-item::before {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #5b52f0, #ec4899);
  border-radius: 3px;
  transition: height 0.25s ease;
}
.aside-panel__menu-item:hover {
  background: rgba(91, 82, 240, 0.06);
  color: #0f0b48;
}
.aside-panel__menu-item:hover .aside-panel__menu-ico {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
}
.aside-panel__menu-item.is-active {
  background: linear-gradient(90deg, rgba(91, 82, 240, 0.12), rgba(236, 72, 153, 0.06));
  color: #5b52f0;
  font-weight: 800;
}
.aside-panel__menu-item.is-active::before {
  height: 20px;
}
.aside-panel__menu-item.is-active .aside-panel__menu-ico {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.4);
}
.aside-panel__menu-item--danger {
  color: rgba(239, 68, 68, 0.8);
}
.aside-panel__menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}
.aside-panel__menu-item--danger:hover .aside-panel__menu-ico {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.aside-panel__menu-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.aside-panel__menu-badge {
  margin-right: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
.aside-panel__menu-badge--new {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.4);
}

[data-theme=dark] .aside-panel {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .aside-panel__stat small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .aside-panel__stat strong {
  color: #fff;
}
[data-theme=dark] .aside-panel__section-title {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .aside-panel__menu-item {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .aside-panel__menu-item:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #fff;
}
[data-theme=dark] .aside-panel__menu-item:hover .aside-panel__menu-ico {
  background: rgba(91, 82, 240, 0.18);
  color: #c4b5fd;
}
[data-theme=dark] .aside-panel__menu-item.is-active {
  background: linear-gradient(90deg, rgba(91, 82, 240, 0.18), rgba(236, 72, 153, 0.1));
  color: #c4b5fd;
}
[data-theme=dark] .aside-panel__menu-item.is-active .aside-panel__menu-ico {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
}
[data-theme=dark] .aside-panel__menu-item--danger {
  color: #fca5a5;
}
[data-theme=dark] .aside-panel__menu-ico {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 992px) {
  .panel-menu {
    display: none !important;
  }
  .mask-shadow {
    position: fixed;
    inset: 0;
    background: rgba(10, 5, 40, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 9998;
    display: block;
  }
  .mask-shadow.active {
    opacity: 1;
    visibility: visible;
  }
  .aside-panel-warapper {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    max-width: 78vw;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    overflow-y: auto;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
  }
  .aside-panel-warapper.active {
    right: 0;
  }
  .aside-panel-warapper > .aside-panel {
    border-radius: 0 20px 20px 0;
    min-height: 100%;
  }
  .aside-panel__close {
    display: flex;
  }
}
@media (max-width: 767px) {
  .aside-panel__profile {
    padding: 40px 14px 14px;
    text-align: right;
  }
  .aside-panel__profile-bg::before {
    width: 100px;
    height: 100px;
    top: -20px;
    right: -20px;
  }
  .aside-panel__profile-bg::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    left: -20px;
  }
  .aside-panel__close {
    top: 10px !important;
    left: 10px !important;
    width: 28px !important;
    height: 28px !important;
  }
  .aside-panel__close svg {
    width: 14px;
    height: 14px;
  }
  .aside-panel__tier {
    top: 10px;
    right: auto;
    left: 46px;
    font-size: 9px;
    padding: 3px 7px;
  }
  .aside-panel__tier svg {
    width: 9px;
    height: 9px;
  }
  .aside-panel__avatar {
    width: 48px;
    height: 48px;
    margin: 0 0 10px;
    padding: 2px;
    display: inline-block;
    vertical-align: middle;
  }
  .aside-panel__avatar-verified {
    width: 18px;
    height: 18px;
    bottom: -2px;
    left: -2px;
    border-width: 1.5px;
  }
  .aside-panel__avatar-verified svg {
    width: 9px;
    height: 9px;
  }
  .aside-panel__name {
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin: 6px 0 2px;
  }
  .aside-panel__vip {
    font-size: 8px;
    padding: 1px 5px;
  }
  .aside-panel__phone {
    font-size: 10.5px;
  }
  .aside-panel__progress {
    margin-top: 10px;
    padding: 8px 10px;
  }
  .aside-panel__progress-head {
    font-size: 9.5px;
    margin-bottom: 4px;
  }
  .aside-panel__progress-bar {
    height: 4px;
  }
  .aside-panel__stats {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 10px 6px;
  }
  .aside-panel__stat {
    padding: 7px 9px;
    gap: 7px;
    border-radius: 9px;
  }
  .aside-panel__stat-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }
  .aside-panel__stat-ico svg {
    width: 12px;
    height: 12px;
  }
  .aside-panel__stat small {
    font-size: 9px;
  }
  .aside-panel__stat strong {
    font-size: 11px;
  }
  .aside-panel__wallet-btn {
    margin: 0 10px 4px;
    padding: 9px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .aside-panel__wallet-btn svg {
    width: 13px;
    height: 13px;
  }
  .aside-panel__menu {
    padding: 4px 8px 14px;
    gap: 1px;
  }
  .aside-panel__section-title {
    padding: 10px 8px 4px;
    font-size: 9px;
    letter-spacing: 1px;
  }
  .aside-panel__menu-item {
    gap: 9px;
    padding: 8px 10px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .aside-panel__menu-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
  .aside-panel__menu-ico svg {
    width: 15px;
    height: 15px;
  }
  .aside-panel__menu-badge {
    font-size: 9.5px;
    padding: 1px 6px;
  }
}
@keyframes d-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dashboard__welcome {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px 26px;
  background: linear-gradient(135deg, #4c1d95 0%, #5b52f0 55%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(91, 82, 240, 0.25);
}
.dashboard__welcome-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.dashboard__welcome-bg::before, .dashboard__welcome-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.dashboard__welcome-bg::before {
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
}
.dashboard__welcome-bg::after {
  bottom: -80px;
  left: -40px;
  width: 240px;
  height: 240px;
  background: rgba(236, 72, 153, 0.4);
}
.dashboard__welcome-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.dashboard__welcome-text {
  flex: 1;
  min-width: 0;
}
.dashboard__welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}
.dashboard__dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  animation: d-dot-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px #4ade80;
}
.dashboard__welcome-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dashboard__welcome-title strong {
  font-weight: 900;
}
.dashboard__welcome-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.6;
}
.dashboard__welcome-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dashboard__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.dashboard__btn--primary {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.dashboard__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.dashboard__btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}
.dashboard__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.24);
}
.dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dashboard__stat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dashboard__stat::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(var(--c, 91, 82, 240), 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.dashboard__stat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
  box-shadow: 0 10px 24px rgba(15, 11, 72, 0.1);
}
.dashboard__stat-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(var(--c, 91, 82, 240), 0.35);
  position: relative;
  z-index: 1;
}
.dashboard__stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.dashboard__stat-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.dashboard__stat-value {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dashboard__stat-value small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-right: 2px;
}
.dashboard__stat-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-top: 2px;
}
.dashboard__stat-meta a {
  color: rgb(var(--c, 91, 82, 240));
  text-decoration: none;
}
.dashboard__stat-meta a:hover {
  text-decoration: underline;
}
.dashboard__stat-meta--up {
  color: #059669;
}
.dashboard__row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.dashboard__panel {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.dashboard__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.dashboard__panel-head h2 {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
}
.dashboard__panel-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #5b52f0;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.dashboard__panel-more:hover {
  background: rgba(91, 82, 240, 0.08);
}
.dashboard__orders {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dashboard__orders li {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.04);
  border-radius: 12px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.dashboard__orders li:hover {
  background: rgba(91, 82, 240, 0.05);
  border-color: rgba(91, 82, 240, 0.18);
}
.dashboard__order-ico {
  margin: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
}
.dashboard__order-ico img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.dashboard__order-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dashboard__order-body strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f0b48;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard__order-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.dashboard__order-price {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  white-space: nowrap;
  direction: ltr;
}
.dashboard__order-price small {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-right: 2px;
}
.dashboard__order-status {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard__order-status--done {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.dashboard__order-status--progress {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.dashboard__order-status--failed {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.dashboard__quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dashboard__quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(var(--c, 91, 82, 240), 0.06);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.12);
  border-radius: 12px;
  color: #0f0b48;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.dashboard__quick-card:hover {
  transform: translateY(-2px);
  background: rgba(var(--c, 91, 82, 240), 0.12);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
}
.dashboard__quick-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
}
.dashboard__referral {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.08), rgba(236, 72, 153, 0.06));
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 12px;
  color: #0f0b48;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dashboard__referral:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 82, 240, 0.35);
}
.dashboard__referral div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dashboard__referral strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f0b48;
}
.dashboard__referral span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  line-height: 1.5;
}
.dashboard__referral > svg {
  color: #5b52f0;
  flex-shrink: 0;
}
.dashboard__referral-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(91, 82, 240, 0.35);
}
.dashboard__recommend {
  position: relative;
  padding: 22px 24px 24px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  overflow: hidden;
}
.dashboard__recommend::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(91, 82, 240, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.dashboard__recommend > * {
  position: relative;
  z-index: 1;
}
.dashboard__recommend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.dashboard__recommend-head h2 {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.dashboard__recommend-head p {
  font-size: 11.5px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.55;
}
.dashboard__recommend-head-left {
  flex: 1;
  min-width: 0;
}
.dashboard__recommend-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.35);
}
.dashboard__recommend-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.dashboard__recommend-more:hover {
  background: rgba(91, 82, 240, 0.14);
}
.dashboard__recommend-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(15, 11, 72, 0.1);
}
.dashboard__recommend-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(91, 82, 240, 0.06);
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.7);
}
.dashboard__recommend-hint svg {
  color: #5b52f0;
}
.dashboard__recommend-hint strong {
  color: #0f0b48;
  font-weight: 800;
}
.dashboard__recommend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dashboard__rec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 14px;
  background: linear-gradient(180deg, #fff 0%, rgba(var(--c, 91, 82, 240), 0.04) 100%);
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  isolation: isolate;
}
.dashboard__rec-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(var(--c, 91, 82, 240), 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.dashboard__rec-card > * {
  position: relative;
  z-index: 1;
}
.dashboard__rec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
  box-shadow: 0 14px 32px rgba(var(--c, 91, 82, 240), 0.15);
}
.dashboard__rec-card:hover::before {
  opacity: 1;
}
.dashboard__rec-card:hover .dashboard__rec-media img {
  transform: scale(1.08) rotate(-3deg);
}
.dashboard__rec-match {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(var(--c, 91, 82, 240), 0.12);
  color: rgb(var(--c, 91, 82, 240));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.25);
}
.dashboard__rec-match--hot {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
}
.dashboard__rec-match--deal {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35);
}
.dashboard__rec-fav {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.dashboard__rec-fav:hover {
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.3);
  background: rgba(236, 72, 153, 0.08);
}
.dashboard__rec-fav.is-active {
  color: #fff;
  background: #ec4899;
  border-color: transparent;
}
.dashboard__rec-fav.is-active svg {
  fill: currentColor;
}
.dashboard__rec-media {
  margin: 10px auto 10px;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(var(--c, 91, 82, 240), 0.2);
}
.dashboard__rec-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dashboard__rec-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.dashboard__rec-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: rgb(var(--c, 91, 82, 240));
  letter-spacing: 0.3px;
  padding: 2px 8px;
  background: rgba(var(--c, 91, 82, 240), 0.1);
  border-radius: 5px;
  align-self: center;
}
.dashboard__rec-body h3 {
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  margin: 2px 0 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard__rec-reason {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 2px 0 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.dashboard__rec-reason svg {
  color: rgb(var(--c, 91, 82, 240));
}
.dashboard__rec-body footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.dashboard__rec-price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  align-items: flex-start;
  direction: ltr;
}
.dashboard__rec-price del {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.4);
  text-decoration: line-through;
}
.dashboard__rec-price strong {
  font-size: 12px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
}
.dashboard__rec-price strong small {
  font-size: 9px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
  margin-left: 2px;
}
.dashboard__rec-btn {
  padding: 7px 14px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dashboard__rec-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--c, 91, 82, 240), 0.5);
  color: #fff;
}

[data-theme=dark] .dashboard__stat, [data-theme=dark] .dashboard__panel {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .dashboard__stat-label {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__stat-value {
  color: #fff;
}
[data-theme=dark] .dashboard__stat-value small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .dashboard__stat-meta {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__panel-head h2 {
  color: #fff;
}
[data-theme=dark] .dashboard__orders li {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .dashboard__orders li:hover {
  background: rgba(91, 82, 240, 0.12);
  border-color: rgba(91, 82, 240, 0.3);
}
[data-theme=dark] .dashboard__order-ico {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .dashboard__order-body strong {
  color: #fff;
}
[data-theme=dark] .dashboard__order-body span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__order-price {
  color: #fff;
}
[data-theme=dark] .dashboard__order-price small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .dashboard__quick-card {
  color: #fff;
}
[data-theme=dark] .dashboard__referral {
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.15), rgba(236, 72, 153, 0.1));
}
[data-theme=dark] .dashboard__referral strong {
  color: #fff;
}
[data-theme=dark] .dashboard__referral span {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .dashboard__recommend {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .dashboard__recommend-head h2 {
  color: #fff;
}
[data-theme=dark] .dashboard__recommend-head p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__recommend-hints {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .dashboard__recommend-hint {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .dashboard__recommend-hint strong {
  color: #fff;
}
[data-theme=dark] .dashboard__recommend-more {
  background: rgba(91, 82, 240, 0.15);
  color: #c4b5fd;
}
[data-theme=dark] .dashboard__recommend-more:hover {
  background: #5b52f0;
  color: #fff;
}
[data-theme=dark] .dashboard__rec-card {
  background: linear-gradient(180deg, #13112a 0%, rgba(var(--c, 91, 82, 240), 0.12) 100%);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .dashboard__rec-card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .dashboard__rec-body h3 {
  color: #fff;
}
[data-theme=dark] .dashboard__rec-reason {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__rec-body footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .dashboard__rec-price strong {
  color: #fff;
}
[data-theme=dark] .dashboard__rec-price strong small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .dashboard__rec-price del {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .dashboard__rec-fav {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .dashboard__rec-media {
  background: #1a1740;
}

@media (max-width: 991px) {
  .dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard__row {
    grid-template-columns: 1fr;
  }
  .dashboard__recommend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .dashboard {
    gap: 14px;
  }
  .dashboard__welcome {
    padding: 20px 18px;
    border-radius: 16px;
  }
  .dashboard__welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .dashboard__welcome-title {
    font-size: 18px;
    line-height: 1.35;
  }
  .dashboard__welcome-sub {
    font-size: 11.5px;
    line-height: 1.6;
  }
  .dashboard__welcome-actions {
    width: 100%;
    gap: 8px;
  }
  .dashboard__btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 9px 14px;
    font-size: 11.5px;
  }
  .dashboard__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dashboard__stat {
    padding: 16px 18px;
    gap: 14px;
    border-radius: 18px;
    align-items: center;
    min-height: 82px;
    background: linear-gradient(135deg, rgba(var(--c, 91, 82, 240), 0.14) 0%, rgba(var(--c, 91, 82, 240), 0.05) 45%, rgba(255, 255, 255, 0.85) 100%);
    border: 1px solid rgba(var(--c, 91, 82, 240), 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(var(--c, 91, 82, 240), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
  }
  .dashboard__stat::before {
    top: -40%;
    right: -15%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(var(--c, 91, 82, 240), 0.28) 0%, transparent 65%);
  }
  .dashboard__stat::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  .dashboard__stat-ico {
    width: 48px;
    height: 48px;
    min-width: 48px;
    align-self: center;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(var(--c, 91, 82, 240), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .dashboard__stat-ico svg {
    width: 22px;
    height: 22px;
  }
  .dashboard__stat-body {
    flex: 1;
    min-width: 0;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    align-content: center;
  }
  .dashboard__stat-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    color: rgba(15, 11, 72, 0.7);
    line-height: 1.2;
  }
  .dashboard__stat-value {
    grid-column: 2;
    grid-row: 1;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    color: #0f0b48;
    letter-spacing: -0.02em;
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard__stat-value small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin: 2px 0 0;
    color: rgba(15, 11, 72, 0.5);
    letter-spacing: 0;
    line-height: 1;
  }
  .dashboard__stat-meta {
    grid-column: 1/-1;
    grid-row: 2;
    font-size: 10.5px;
    line-height: 1.2;
  }
  .dashboard__stat-meta a {
    padding: 2px 9px;
    border-radius: 6px;
    background: rgba(var(--c, 91, 82, 240), 0.14);
    transition: background 0.2s ease;
  }
  .dashboard__stat-meta a:hover {
    background: rgba(var(--c, 91, 82, 240), 0.22);
    text-decoration: none;
  }
  .dashboard__panel {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .dashboard__panel-head {
    margin-bottom: 12px;
  }
  .dashboard__panel-head h2 {
    font-size: 13.5px;
  }
  .dashboard__panel-more {
    font-size: 10.5px;
    padding: 4px 8px;
  }
  .dashboard__orders li {
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    padding: 10px;
  }
  .dashboard__order-ico {
    width: 38px;
    height: 38px;
    grid-row: 1/span 2;
  }
  .dashboard__order-body {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .dashboard__order-body strong {
    font-size: 12px;
  }
  .dashboard__order-body span {
    font-size: 10px;
  }
  .dashboard__order-price {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    align-self: center;
  }
  .dashboard__order-status {
    grid-column: 3;
    grid-row: 2;
    padding: 2px 7px;
    font-size: 9px;
    align-self: center;
    justify-self: start;
  }
  .dashboard__quick-card {
    padding: 10px 12px;
    font-size: 11.5px;
    border-radius: 10px;
  }
  .dashboard__quick-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .dashboard__quick-ico svg {
    width: 16px;
    height: 16px;
  }
  .dashboard__referral {
    padding: 10px 12px;
    margin-top: 12px;
    gap: 10px;
  }
  .dashboard__referral strong {
    font-size: 11.5px;
  }
  .dashboard__referral span {
    font-size: 10px;
  }
  .dashboard__referral-ico {
    width: 34px;
    height: 34px;
  }
  .dashboard__referral-ico svg {
    width: 18px;
    height: 18px;
  }
  .dashboard__recommend {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .dashboard__recommend-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }
  .dashboard__recommend-head h2 {
    font-size: 14px;
  }
  .dashboard__recommend-head p {
    font-size: 11px;
    line-height: 1.55;
  }
  .dashboard__recommend-head-left {
    width: 100%;
  }
  .dashboard__recommend-more {
    align-self: flex-end;
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .dashboard__recommend-hints {
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .dashboard__recommend-hint {
    font-size: 9.5px;
    padding: 4px 8px;
  }
  .dashboard__recommend-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dashboard__rec-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--c, 91, 82, 240), 0.1) 0%, rgba(var(--c, 91, 82, 240), 0.03) 50%, rgba(255, 255, 255, 0.9) 100%);
    border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
    box-shadow: 0 4px 14px rgba(var(--c, 91, 82, 240), 0.08);
  }
  .dashboard__rec-card::before {
    display: none;
  }
  .dashboard__rec-card:hover {
    transform: none;
  }
  .dashboard__rec-match {
    position: static;
    grid-column: 2;
    grid-row: 1;
    font-size: 9px;
    padding: 2px 7px;
    align-self: start;
    justify-self: start;
    margin-bottom: 2px;
  }
  .dashboard__rec-fav {
    top: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
  }
  .dashboard__rec-fav svg {
    width: 13px;
    height: 13px;
  }
  .dashboard__rec-media {
    grid-column: 1;
    grid-row: 1/span 2;
    width: 72px;
    height: 72px;
    margin: 0;
    border-radius: 14px;
    align-self: center;
  }
  .dashboard__rec-body {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: stretch;
    gap: 4px;
  }
  .dashboard__rec-tag {
    font-size: 9px;
    padding: 2px 7px;
    align-self: flex-start;
  }
  .dashboard__rec-body h3 {
    font-size: 13px;
    text-align: right;
    margin: 1px 0 0;
  }
  .dashboard__rec-reason {
    justify-content: flex-start;
    margin: 1px 0 4px;
    font-size: 10px;
  }
  .dashboard__rec-body footer {
    padding-top: 8px;
    gap: 8px;
  }
  .dashboard__rec-price del {
    font-size: 9.5px;
  }
  .dashboard__rec-price strong {
    font-size: 12.5px;
  }
  .dashboard__rec-price strong small {
    font-size: 9px;
  }
  .dashboard__rec-btn {
    padding: 6px 14px;
    font-size: 11px;
    border-radius: 8px;
  }
}
@media (max-width: 380px) {
  .dashboard__stat {
    padding: 12px 14px;
    gap: 12px;
    min-height: 72px;
  }
  .dashboard__stat-ico {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
  }
  .dashboard__stat-ico svg {
    width: 20px;
    height: 20px;
  }
  .dashboard__stat-label {
    font-size: 12px;
  }
  .dashboard__stat-value {
    font-size: 20px;
  }
  .dashboard__stat-value small {
    font-size: 10px;
  }
  .dashboard__recommend-grid {
    grid-template-columns: 1fr;
  }
  .dashboard__rec-media {
    width: 72px;
    height: 72px;
  }
}
.wallet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wallet__balance {
  position: relative;
  overflow: hidden;
  padding: 24px 26px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #3b1577 0%, #5b52f0 55%, #ec4899 110%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(91, 82, 240, 0.3);
  isolation: isolate;
}
.wallet__balance-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.wallet__balance-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.wallet__balance-circle--a {
  top: -80px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.22);
}
.wallet__balance-circle--b {
  bottom: -100px;
  left: -40px;
  width: 260px;
  height: 260px;
  background: rgba(236, 72, 153, 0.55);
}
.wallet__balance-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.wallet__balance-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.wallet__balance-chip {
  width: 32px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #7c2d12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.wallet__balance-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.2px;
}
.wallet__balance-eye {
  margin-right: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}
.wallet__balance-eye:hover {
  background: rgba(255, 255, 255, 0.24);
}
.wallet__balance-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  direction: ltr;
  justify-content: flex-end;
}
.wallet__balance-amount strong {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.wallet__balance-amount small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.wallet__balance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 18px;
}
.wallet__balance-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wallet__balance-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wallet__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.wallet__action:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: translateY(-2px);
}
.wallet__action--primary {
  background: #fff;
  color: #5b52f0;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.wallet__action--primary:hover {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.wallet__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.wallet__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.wallet__stat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
}
.wallet__stat-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
}
.wallet__stat > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wallet__stat small {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.wallet__stat strong {
  font-size: 14px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
}
.wallet__stat strong span {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-right: 2px;
}
.wallet__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
.wallet__panel {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  padding: 18px 20px 18px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.wallet__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.wallet__panel-head h2 {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
}
.wallet__panel-badge {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.wallet__panel-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wallet__panel-more:hover {
  background: rgba(91, 82, 240, 0.16);
  border-color: rgba(91, 82, 240, 0.3);
}
.wallet__amount-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.wallet__preset {
  padding: 9px 4px;
  background: rgba(15, 11, 72, 0.04);
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
  direction: ltr;
}
.wallet__preset:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.wallet__preset.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.wallet__amount-field {
  margin-bottom: 14px;
}
.wallet__amount-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  margin-bottom: 6px;
}
.wallet__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(15, 11, 72, 0.04);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 11px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.wallet__input-wrap:focus-within {
  background: #fff;
  border-color: rgba(91, 82, 240, 0.45);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.1);
}
.wallet__input-wrap input {
  flex: 1;
  padding: 11px 14px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 800;
  color: #0f0b48;
  direction: ltr;
  text-align: right;
}
.wallet__input-wrap input::placeholder {
  color: rgba(15, 11, 72, 0.35);
  font-weight: 500;
}
.wallet__input-suffix {
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  border-right: 1px solid rgba(15, 11, 72, 0.08);
}
.wallet__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.wallet__hint svg {
  opacity: 0.65;
  flex-shrink: 0;
}
.wallet__gateways {
  margin-bottom: 16px;
}
.wallet__gateways-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  margin-bottom: 6px;
}
.wallet__gateway-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wallet__gateway {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(15, 11, 72, 0.03);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 11px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.75);
  transition: all 0.25s ease;
}
.wallet__gateway:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.wallet__gateway.is-active {
  background: rgba(91, 82, 240, 0.06);
  border-color: #5b52f0;
  color: #5b52f0;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.15);
}
.wallet__gateway-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wallet__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(91, 82, 240, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wallet__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(91, 82, 240, 0.55);
}
.wallet__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wallet__card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.3);
  isolation: isolate;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wallet__card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
}
.wallet__card-bg::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  filter: blur(30px);
}
.wallet__card--mellat {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
  box-shadow: 0 6px 20px rgba(153, 27, 27, 0.3);
}
.wallet__card--parsian {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(6, 78, 59, 0.3);
}
.wallet__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wallet__card-bank {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.wallet__card-default {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
}
.wallet__card-menu {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}
.wallet__card-menu:hover {
  background: rgba(255, 255, 255, 0.25);
}
.wallet__card-number {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.wallet__card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.wallet__card-bottom strong {
  color: #fff;
  font-weight: 800;
}
.wallet__card-expiry {
  font-weight: 700;
  letter-spacing: 0.8px;
  direction: ltr;
}
.wallet__tx-filter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(15, 11, 72, 0.04);
  border-radius: 10px;
}
.wallet__tx-filter button {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.wallet__tx-filter button:hover {
  color: #0f0b48;
}
.wallet__tx-filter button.is-active {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 2px 8px rgba(15, 11, 72, 0.1);
}
.wallet__tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wallet__tx {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.04);
  border-radius: 11px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wallet__tx:hover {
  background: rgba(91, 82, 240, 0.04);
  border-color: rgba(91, 82, 240, 0.14);
}
.wallet__tx-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wallet__tx-ico--in {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.wallet__tx-ico--out {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.wallet__tx-ico--buy {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
}
.wallet__tx-ico--cashback {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.wallet__tx-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}
.wallet__tx-body strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f0b48;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet__tx-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.5);
}
.wallet__tx-amount {
  font-size: 13px;
  font-weight: 900;
  direction: ltr;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.wallet__tx-amount--in {
  color: #059669;
}
.wallet__tx-amount--out {
  color: #ef4444;
}
.wallet__tx-status {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.wallet__tx-status--done {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.wallet__tx-status--progress {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.wallet__tx-status--failed {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.wallet__tx-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
  text-align: center;
}
.wallet__tx-foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b52f0;
  text-decoration: none;
}
.wallet__tx-foot a:hover {
  text-decoration: underline;
}

[data-theme=dark] .wallet__stat, [data-theme=dark] .wallet__panel {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .wallet__stat small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .wallet__stat strong {
  color: #fff;
}
[data-theme=dark] .wallet__stat strong span {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .wallet__panel-head h2 {
  color: #fff;
}
[data-theme=dark] .wallet__preset {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .wallet__amount-field label, [data-theme=dark] .wallet__gateways-label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .wallet__input-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .wallet__input-wrap:focus-within {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .wallet__input-wrap input {
  color: #fff;
}
[data-theme=dark] .wallet__input-suffix {
  color: rgba(255, 255, 255, 0.55);
  border-right-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .wallet__gateway {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .wallet__gateway.is-active {
  background: rgba(91, 82, 240, 0.15);
}
[data-theme=dark] .wallet__tx {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .wallet__tx-body strong {
  color: #fff;
}
[data-theme=dark] .wallet__tx-body span {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .wallet__tx-filter {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .wallet__tx-filter button {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .wallet__tx-filter button:hover {
  color: #fff;
}
[data-theme=dark] .wallet__tx-filter button.is-active {
  background: #1a1740;
  color: #c4b5fd;
}
[data-theme=dark] .wallet__tx-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .wallet__hint {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .wallet__panel-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}
[data-theme=dark] .wallet__panel-more {
  background: rgba(91, 82, 240, 0.15);
  color: #c4b5fd;
  border-color: rgba(91, 82, 240, 0.3);
}
[data-theme=dark] .wallet__panel-more:hover {
  background: #5b52f0;
  color: #fff;
}

@media (max-width: 991px) {
  .wallet__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .wallet__row {
    grid-template-columns: 1fr;
  }
  .wallet__amount-presets {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .wallet {
    gap: 12px;
  }
  .wallet__balance {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
  .wallet__balance-head {
    margin-bottom: 8px;
    gap: 8px;
  }
  .wallet__balance-title {
    font-size: 11.5px;
  }
  .wallet__balance-chip {
    width: 26px;
    height: 26px;
  }
  .wallet__balance-amount {
    margin-bottom: 10px;
  }
  .wallet__balance-amount strong {
    font-size: 26px;
  }
  .wallet__balance-amount small {
    font-size: 11.5px;
  }
  .wallet__balance-meta {
    font-size: 10px;
    gap: 4px 10px;
    margin-bottom: 12px;
  }
  .wallet__balance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .wallet__action {
    padding: 9px 6px;
    font-size: 10.5px;
    border-radius: 10px;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    line-height: 1.1;
  }
  .wallet__action svg {
    width: 14px;
    height: 14px;
  }
  .wallet__stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wallet__stat {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 12px;
  }
  .wallet__stat-ico {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .wallet__stat-ico svg {
    width: 14px;
    height: 14px;
  }
  .wallet__stat small {
    font-size: 9.5px;
  }
  .wallet__stat strong {
    font-size: 13px;
  }
  .wallet__stat strong span {
    font-size: 9px;
  }
  .wallet__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wallet__panel {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .wallet__panel-head {
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .wallet__panel-head h2 {
    font-size: 13.5px;
  }
  .wallet__panel-badge {
    font-size: 9.5px;
    padding: 2px 8px;
  }
  .wallet__panel-more {
    font-size: 10.5px;
    padding: 6px 10px;
  }
  .wallet__panel-more svg {
    width: 11px;
    height: 11px;
  }
  .wallet__amount-presets {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .wallet__preset {
    padding: 9px 8px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .wallet__amount-field label {
    font-size: 11px;
  }
  .wallet__input-wrap input {
    font-size: 14px;
    padding: 10px 12px;
  }
  .wallet__input-suffix {
    font-size: 11px;
    padding: 0 12px;
  }
  .wallet__hint {
    font-size: 10px;
    line-height: 1.55;
  }
  .wallet__gateways-label {
    font-size: 11px;
  }
  .wallet__gateway-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .wallet__gateway {
    padding: 9px 12px;
    gap: 10px;
    border-radius: 9px;
    font-size: 11.5px;
  }
  .wallet__gateway-ico {
    width: 30px;
    height: 30px;
  }
  .wallet__gateway-ico svg {
    width: 14px;
    height: 14px;
  }
  .wallet__submit {
    padding: 11px;
    font-size: 12px;
    border-radius: 10px;
  }
  .wallet__cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wallet__card {
    padding: 14px;
    border-radius: 14px;
    min-height: auto;
  }
  .wallet__card-number {
    font-size: 15px;
    letter-spacing: 2px;
  }
  .wallet__card-bottom {
    font-size: 10.5px;
  }
  .wallet__tx-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
  }
  .wallet__tx-filter::-webkit-scrollbar {
    display: none;
  }
  .wallet__tx-filter button {
    flex-shrink: 0;
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .wallet__tx-list {
    gap: 6px;
  }
  .wallet__tx {
    grid-template-columns: 34px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px;
    border-radius: 10px;
  }
  .wallet__tx-ico {
    width: 34px;
    height: 34px;
    grid-row: 1/span 2;
    border-radius: 9px;
  }
  .wallet__tx-ico svg {
    width: 14px;
    height: 14px;
  }
  .wallet__tx-body {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .wallet__tx-body strong {
    font-size: 11.5px;
  }
  .wallet__tx-body span {
    font-size: 10px;
  }
  .wallet__tx-amount {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    align-self: center;
  }
  .wallet__tx-status {
    grid-column: 3;
    grid-row: 2;
    font-size: 9px;
    padding: 2px 7px;
    align-self: center;
    justify-self: end;
  }
  .wallet__tx-foot {
    margin-top: 10px;
    padding-top: 10px;
  }
  .wallet__tx-foot a {
    font-size: 11px;
  }
}
@media (max-width: 380px) {
  .wallet__balance-amount strong {
    font-size: 24px;
  }
  .wallet__action {
    font-size: 10px;
  }
  .wallet__action svg {
    width: 13px;
    height: 13px;
  }
  .wallet__stat strong {
    font-size: 12px;
  }
  .wallet__amount-presets {
    grid-template-columns: 1fr 1fr;
  }
}
.pwn-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pwn-col > .notification {
  margin-bottom: 0;
}

.pwn-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #1e0756 0%, #6c63ff 45%, #ec4899 100%);
  padding: 28px 28px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  isolation: isolate;
  min-height: 185px;
  box-shadow: 0 18px 50px rgba(108, 99, 255, 0.32);
}
.pwn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.pwn-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
}
.pwn-hero__orb--a {
  top: -70px;
  right: -50px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.18);
}
.pwn-hero__orb--b {
  bottom: -110px;
  left: -60px;
  width: 290px;
  height: 290px;
  background: rgba(236, 72, 153, 0.5);
}
.pwn-hero__orb--c {
  top: 10px;
  left: 38%;
  width: 140px;
  height: 140px;
  background: rgba(108, 99, 255, 0.38);
}
.pwn-hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55px;
}
.pwn-hero__right {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pwn-hero__chip {
  display: inline-flex;
  margin-bottom: 3px;
  opacity: 0.85;
}
.pwn-hero__label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.pwn-hero__amount {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.pwn-hero__amount strong {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.pwn-hero__amount span {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  margin-left: auto;
}
.pwn-hero__amount .pwn-btn--eye {
  margin-right: 4px;
}
.pwn-hero__trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 2px 0 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pwn-hero__trend svg {
  color: #6ee7b7;
  flex-shrink: 0;
}
.pwn-hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.pwn-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwn-hero__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
}
.pwn-hero__id {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  direction: ltr;
  white-space: nowrap;
}
.pwn-hero__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pwn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  white-space: nowrap;
}
.pwn-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-2px);
  color: #fff;
}
.pwn-btn--primary {
  background: #fff;
  color: #6c63ff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.pwn-btn--primary:hover {
  background: #fff;
  color: #6c63ff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}
.pwn-btn--eye {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.pwn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pwn-stat {
  background: #fff;
  border: 1px solid rgba(13, 11, 46, 0.07);
  border-radius: 15px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(13, 11, 46, 0.07);
  transition: transform 0.22s, box-shadow 0.22s;
}
.pwn-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(13, 11, 46, 0.1);
}
.pwn-stat__ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgb(var(--c)), rgba(var(--c), 0.7));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(var(--c), 0.32);
}
.pwn-stat > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwn-stat small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(13, 11, 46, 0.5);
  white-space: nowrap;
}
.pwn-stat strong {
  font-size: 13.5px;
  font-weight: 900;
  color: #0d0b2e;
  direction: ltr;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pwn-stat strong em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(13, 11, 46, 0.42);
  margin-right: 2px;
}

.pwn-mid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}

.pwn-card {
  background: #fff;
  border: 1px solid rgba(13, 11, 46, 0.07);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(13, 11, 46, 0.07);
}
.pwn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.pwn-card__head h2 {
  font-size: 14.5px;
  font-weight: 900;
  color: #0d0b2e;
  margin: 0;
}

.pwn-badge {
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
}
.pwn-badge--green {
  background: rgba(16, 185, 129, 0.1);
  color: #0c8a60;
}

.pwn-add-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(108, 99, 255, 0.08);
  color: #6c63ff;
  border: 1px solid rgba(108, 99, 255, 0.18);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}
.pwn-add-card:hover {
  background: #6c63ff;
  color: #fff;
  border-color: #6c63ff;
}

.pwn-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.pwn-preset {
  padding: 9px 4px;
  background: rgba(13, 11, 46, 0.04);
  border: 1.5px solid rgba(13, 11, 46, 0.07);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(13, 11, 46, 0.6);
  cursor: pointer;
  transition: all 0.2s;
  direction: ltr;
}
.pwn-preset:hover {
  border-color: rgba(108, 99, 255, 0.4);
  color: #6c63ff;
  background: rgba(108, 99, 255, 0.04);
}
.pwn-preset.is-active {
  background: linear-gradient(135deg, #6c63ff, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(108, 99, 255, 0.35);
}

.pwn-field {
  margin-bottom: 14px;
}
.pwn-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 11, 46, 0.6);
  margin-bottom: 6px;
}
.pwn-field__wrap {
  display: flex;
  align-items: center;
  background: rgba(13, 11, 46, 0.04);
  border: 1.5px solid rgba(13, 11, 46, 0.08);
  border-radius: 11px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.pwn-field__wrap:focus-within {
  background: #fff;
  border-color: rgba(108, 99, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}
.pwn-field__wrap input {
  flex: 1;
  padding: 11px 13px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 900;
  color: #0d0b2e;
  direction: ltr;
  text-align: right;
}
.pwn-field__wrap input::placeholder {
  color: rgba(13, 11, 46, 0.3);
  font-weight: 500;
  font-size: 12px;
}
.pwn-field__unit {
  padding: 0 13px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 11, 46, 0.48);
  border-right: 1.5px solid rgba(13, 11, 46, 0.08);
}
.pwn-field__hint {
  margin: 5px 0 0;
  font-size: 10px;
  color: rgba(13, 11, 46, 0.42);
}

.pwn-gateways {
  margin-bottom: 16px;
}
.pwn-gateways__label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 11, 46, 0.6);
  display: block;
  margin-bottom: 7px;
}
.pwn-gateways__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.pwn-gw {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  background: rgba(13, 11, 46, 0.03);
  border: 1.5px solid rgba(13, 11, 46, 0.07);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 11, 46, 0.65);
  transition: all 0.2s;
}
.pwn-gw:hover {
  border-color: rgba(108, 99, 255, 0.35);
  color: #6c63ff;
}
.pwn-gw.is-active {
  background: rgba(108, 99, 255, 0.06);
  border-color: #6c63ff;
  color: #6c63ff;
  box-shadow: 0 3px 12px rgba(108, 99, 255, 0.14);
}
.pwn-gw__ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pwn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px;
  background: linear-gradient(135deg, #6c63ff 0%, #ec4899 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(108, 99, 255, 0.4);
  transition: transform 0.22s, box-shadow 0.22s;
}
.pwn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(108, 99, 255, 0.52);
}

.pwn-cards {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pwn-bankcard {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  padding: 15px 18px 13px;
  color: #fff;
  isolation: isolate;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.pwn-bankcard--red {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 60%, #f87171 100%);
}
.pwn-bankcard--teal {
  background: linear-gradient(135deg, #064e3b 0%, #059669 60%, #34d399 100%);
}
.pwn-bankcard__shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 52%);
}
.pwn-bankcard__shine::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  filter: blur(28px);
}
.pwn-bankcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pwn-bankcard__bank {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.pwn-bankcard__default {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.pwn-bankcard__menu {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pwn-bankcard__menu:hover {
  background: rgba(255, 255, 255, 0.26);
}
.pwn-bankcard__num {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2.5px;
  margin: 5px 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pwn-bankcard__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.pwn-bankcard__exp {
  font-weight: 700;
  letter-spacing: 1px;
}

.pwn-tx__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pwn-tx__item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(13, 11, 46, 0.025);
  border: 1px solid rgba(13, 11, 46, 0.04);
  transition: background 0.2s, border-color 0.2s;
}
.pwn-tx__item:hover {
  background: rgba(108, 99, 255, 0.04);
  border-color: rgba(108, 99, 255, 0.12);
}
.pwn-tx__ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pwn-tx__ico--in {
  background: rgba(16, 185, 129, 0.12);
  color: #0d9367;
}
.pwn-tx__ico--out {
  background: rgba(239, 68, 68, 0.12);
  color: #ec1e1e;
}
.pwn-tx__ico--buy {
  background: rgba(108, 99, 255, 0.12);
  color: #6c63ff;
}
.pwn-tx__ico--star {
  background: rgba(245, 158, 11, 0.14);
  color: #c57f08;
}
.pwn-tx__ico--transfer {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}
.pwn-tx__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pwn-tx__info strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #0d0b2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwn-tx__info span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(13, 11, 46, 0.46);
}
.pwn-tx__amount {
  font-size: 13.5px;
  font-weight: 900;
  direction: ltr;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.pwn-tx__amount--in {
  color: #0d9367;
}
.pwn-tx__amount--out {
  color: #ef4444;
}
.pwn-tx__badge {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.pwn-tx__badge--done {
  background: rgba(16, 185, 129, 0.12);
  color: #0d9367;
}
.pwn-tx__badge--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #c57f08;
}
.pwn-tx__badge--fail {
  background: rgba(239, 68, 68, 0.12);
  color: #ec1e1e;
}
.pwn-tx__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(13, 11, 46, 0.08);
  text-align: center;
}
.pwn-tx__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #6c63ff;
  text-decoration: none;
}
.pwn-tx__foot a:hover {
  text-decoration: underline;
}

.pwn-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(13, 11, 46, 0.05);
  border-radius: 10px;
}

.pwn-tab {
  padding: 6px 13px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 11, 46, 0.55);
  cursor: pointer;
  transition: all 0.2s;
}
.pwn-tab:hover {
  color: #0d0b2e;
}
.pwn-tab.is-active {
  background: #fff;
  color: #6c63ff;
  box-shadow: 0 2px 8px rgba(13, 11, 46, 0.1);
  font-weight: 900;
}

[data-theme=dark] .pwn-stat,
[data-theme=dark] .pwn-card {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .pwn-card__head h2 {
  color: #e0deff;
}
[data-theme=dark] .pwn-stat small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .pwn-stat strong {
  color: #e0deff;
}
[data-theme=dark] .pwn-stat strong em {
  color: rgba(255, 255, 255, 0.42);
}
[data-theme=dark] .pwn-preset {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .pwn-preset:hover {
  color: #c4b5fd;
  background: rgba(196, 181, 253, 0.06);
}
[data-theme=dark] .pwn-field label, [data-theme=dark] .pwn-field .pwn-gateways__label {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme=dark] .pwn-field__wrap {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .pwn-field__wrap:focus-within {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .pwn-field__wrap input {
  color: #e0deff;
}
[data-theme=dark] .pwn-field__unit {
  color: rgba(255, 255, 255, 0.48);
  border-right-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .pwn-field__hint {
  color: rgba(255, 255, 255, 0.38);
}
[data-theme=dark] .pwn-gateways__label {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme=dark] .pwn-gw {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
}
[data-theme=dark] .pwn-gw.is-active {
  background: rgba(108, 99, 255, 0.14);
}
[data-theme=dark] .pwn-add-card {
  background: rgba(108, 99, 255, 0.14);
  color: #c4b5fd;
  border-color: rgba(108, 99, 255, 0.3);
}
[data-theme=dark] .pwn-tx__item {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .pwn-tx__item:hover {
  background: rgba(108, 99, 255, 0.06);
  border-color: rgba(108, 99, 255, 0.14);
}
[data-theme=dark] .pwn-tx__info strong {
  color: #e0deff;
}
[data-theme=dark] .pwn-tx__info span {
  color: rgba(255, 255, 255, 0.44);
}
[data-theme=dark] .pwn-tx__foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .pwn-tabs {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .pwn-tab {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .pwn-tab:hover {
  color: #fff;
}
[data-theme=dark] .pwn-tab.is-active {
  background: #1e1a50;
  color: #c4b5fd;
}

@media (max-width: 992px) {
  .pwn-col {
    gap: 16px;
  }
  .pwn-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pwn-mid {
    grid-template-columns: 1fr;
  }
  .pwn-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px 18px;
    min-height: auto;
    gap: 16px;
    border-radius: 18px;
  }
  .pwn-hero__left {
    width: 100%;
    align-items: flex-start;
  }
  .pwn-hero__meta {
    flex-wrap: wrap;
  }
  .pwn-hero__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .pwn-hero__amount strong {
    font-size: 30px;
  }
  .pwn-card {
    padding: 18px 20px;
  }
}
@media (max-width: 576px) {
  .pwn-col {
    gap: 14px;
  }
  .pwn-hero {
    padding: 18px 16px 16px;
    border-radius: 16px;
    gap: 14px;
  }
  .pwn-hero__chip {
    display: none;
  }
  .pwn-hero__amount strong {
    font-size: 26px;
  }
  .pwn-hero__amount span {
    font-size: 12px;
  }
  .pwn-hero__label {
    font-size: 11px;
  }
  .pwn-hero__trend {
    font-size: 10px;
    padding: 3px 9px;
  }
  .pwn-hero__id {
    display: none;
  }
  .pwn-hero__actions {
    gap: 6px;
  }
  .pwn-btn {
    padding: 8px 13px;
    font-size: 11.5px;
    border-radius: 10px;
    gap: 5px;
  }
  .pwn-btn svg {
    width: 13px;
    height: 13px;
  }
  .pwn-btn--eye {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    padding: 0 !important;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .pwn-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pwn-stat {
    padding: 12px 13px;
    border-radius: 13px;
    gap: 10px;
  }
  .pwn-stat__ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .pwn-stat__ico svg {
    width: 15px;
    height: 15px;
  }
  .pwn-stat small {
    font-size: 9.5px;
  }
  .pwn-stat strong {
    font-size: 12.5px;
  }
  .pwn-stat strong em {
    font-size: 9px;
  }
  .pwn-card {
    padding: 14px 16px;
    border-radius: 16px;
  }
  .pwn-card__head {
    margin-bottom: 14px;
  }
  .pwn-card__head h2 {
    font-size: 13.5px;
  }
  .pwn-presets {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .pwn-preset {
    padding: 9px 4px;
    font-size: 11px;
    border-radius: 8px;
  }
  .pwn-gateways__list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pwn-gw {
    padding: 9px 12px;
    border-radius: 9px;
  }
  .pwn-bankcard {
    min-height: 110px;
    padding: 13px 16px 11px;
    border-radius: 13px;
  }
  .pwn-bankcard__num {
    font-size: 14px;
    letter-spacing: 2px;
    margin: 4px 0;
  }
  .pwn-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .pwn-tabs::-webkit-scrollbar {
    display: none;
  }
  .pwn-tab {
    flex-shrink: 0;
    padding: 5px 11px;
    font-size: 10.5px;
  }
  .pwn-tx__list {
    gap: 7px;
  }
  .pwn-tx__item {
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    padding: 11px 12px;
    border-radius: 11px;
  }
  .pwn-tx__item .pwn-tx__ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    grid-row: 1/span 2;
    align-self: center;
  }
  .pwn-tx__item .pwn-tx__ico svg {
    width: 14px;
    height: 14px;
  }
  .pwn-tx__item .pwn-tx__info {
    grid-column: 2;
    grid-row: 1/span 2;
    align-self: center;
  }
  .pwn-tx__item .pwn-tx__info strong {
    font-size: 12px;
  }
  .pwn-tx__item .pwn-tx__info span {
    font-size: 9.5px;
  }
  .pwn-tx__item .pwn-tx__amount {
    grid-column: 3;
    grid-row: 1;
    font-size: 12.5px;
    align-self: end;
  }
  .pwn-tx__item .pwn-tx__badge {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    font-size: 9.5px;
    padding: 2px 7px;
  }
  .pwn-submit {
    padding: 12px;
    font-size: 12.5px;
    border-radius: 11px;
  }
}
@media (max-width: 380px) {
  .pwn-hero__amount strong {
    font-size: 22px;
  }
  .pwn-hero__actions {
    gap: 5px;
  }
  .pwn-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
  .pwn-presets {
    grid-template-columns: repeat(2, 1fr);
  }
  .pwn-stats {
    gap: 7px;
  }
  .pwn-stat {
    padding: 10px 11px;
    gap: 8px;
  }
  .pwn-stat__ico {
    width: 32px;
    height: 32px;
  }
  .pwn-stat__ico svg {
    width: 13px;
    height: 13px;
  }
  .pwn-stat strong {
    font-size: 11.5px;
  }
}
.earn {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.earn__hero {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #3b1577 0%, #5b52f0 55%, #ec4899 110%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(91, 82, 240, 0.3);
  isolation: isolate;
}
.earn__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.earn__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.earn__hero-blob--a {
  top: -80px;
  right: -50px;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.25);
}
.earn__hero-blob--b {
  bottom: -100px;
  left: -40px;
  width: 260px;
  height: 260px;
  background: rgba(236, 72, 153, 0.5);
}
.earn__hero-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.earn__hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.earn__hero-left {
  flex: 1;
  min-width: 260px;
}
.earn__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.earn__hero-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.earn__hero-title span {
  background: linear-gradient(90deg, #fbbf24, #fcd34d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.earn__hero-sub {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 16px;
  max-width: 460px;
}
.earn__hero-sub strong {
  color: #fbbf24;
  font-weight: 900;
}
.earn__hero-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.earn__hero-earned {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  min-width: 180px;
  direction: ltr;
  text-align: right;
}
.earn__hero-earned-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  direction: rtl;
}
.earn__hero-earned strong {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}
.earn__hero-earned strong small {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-left: 3px;
}
.earn__hero-earned-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4ade80;
  direction: rtl;
}
.earn__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.earn__btn--primary {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.earn__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  color: #5b52f0;
}
.earn__btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}
.earn__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.earn__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.earn__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.earn__stat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
}
.earn__stat-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
}
.earn__stat > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.earn__stat strong {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
  letter-spacing: -0.01em;
}
.earn__stat span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.earn__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
.earn__panel {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.earn__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.earn__panel-head h2 {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
}
.earn__panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.earn__panel-badge--silver {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
}
.earn__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 14px;
  background: rgba(15, 11, 72, 0.03);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 11px;
  margin-bottom: 14px;
}
.earn__link input {
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f0b48;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.earn__icon-btn {
  width: 34px;
  height: 34px;
  background: rgba(91, 82, 240, 0.08);
  border: 1px solid rgba(91, 82, 240, 0.14);
  color: #5b52f0;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.earn__icon-btn:hover {
  background: #5b52f0;
  color: #fff;
  border-color: transparent;
}
.earn__share {
  margin-bottom: 12px;
}
.earn__share-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  margin-bottom: 8px;
}
.earn__share-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.earn__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--c, 91, 82, 240), 0.1);
  color: rgb(var(--c, 91, 82, 240));
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.2);
  transition: all 0.25s ease;
}
.earn__share-btn:hover {
  background: rgb(var(--c, 91, 82, 240));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(var(--c, 91, 82, 240), 0.35);
  border-color: transparent;
}
.earn__hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  padding: 9px 12px;
  background: rgba(91, 82, 240, 0.05);
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.65);
  line-height: 1.7;
}
.earn__hint svg {
  color: #5b52f0;
  flex-shrink: 0;
  margin-top: 3px;
}
.earn__tier-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.08), rgba(236, 72, 153, 0.04));
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 11px;
  margin-bottom: 14px;
}
.earn__tier-rate span {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.65);
}
.earn__tier-rate strong {
  font-size: 22px;
  font-weight: 900;
  color: #5b52f0;
  direction: ltr;
  letter-spacing: -0.01em;
}
.earn__tier-progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.earn__tier-progress span {
  display: block;
  height: 100%;
  width: var(--p, 0);
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.earn__tier-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.earn__tier-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.05);
  border-radius: 9px;
}
.earn__tier-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(15, 11, 72, 0.15);
  flex-shrink: 0;
}
.earn__tier-step > div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: 1;
}
.earn__tier-step strong {
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.6);
}
.earn__tier-step small {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.earn__tier-step.is-done {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
}
.earn__tier-step.is-done .earn__tier-step-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.earn__tier-step.is-done strong {
  color: #059669;
}
.earn__tier-step.is-current {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}
.earn__tier-step.is-current .earn__tier-step-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.earn__tier-step.is-current strong {
  color: #d97706;
}
.earn__tier-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.7);
}
.earn__tier-note svg {
  color: #f59e0b;
  flex-shrink: 0;
}
.earn__tier-note strong {
  color: #f59e0b;
  font-weight: 800;
}
.earn__how {
  padding: 20px 24px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.earn__how-head {
  text-align: center;
  margin-bottom: 16px;
}
.earn__how-head h2 {
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.earn__how-head p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.earn__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.earn__step-card {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #fff 0%, rgba(var(--c, 91, 82, 240), 0.04) 100%);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
  border-radius: 14px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.earn__step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--c, 91, 82, 240), 0.35);
  box-shadow: 0 10px 24px rgba(var(--c, 91, 82, 240), 0.15);
}
.earn__step-card h3 {
  font-size: 13px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.earn__step-card p {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  line-height: 1.75;
}
.earn__step-num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 34px;
  font-weight: 900;
  color: rgba(var(--c, 91, 82, 240), 0.15);
  line-height: 1;
  letter-spacing: -0.02em;
}
.earn__step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--c, 91, 82, 240), 0.35);
}
.earn__history-filter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(15, 11, 72, 0.04);
  border-radius: 10px;
}
.earn__history-filter button {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.earn__history-filter button:hover {
  color: #0f0b48;
}
.earn__history-filter button.is-active {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 2px 8px rgba(15, 11, 72, 0.1);
}
.earn__history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.earn__tx {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.04);
  border-radius: 11px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.earn__tx:hover {
  background: rgba(91, 82, 240, 0.04);
  border-color: rgba(91, 82, 240, 0.14);
}
.earn__tx-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(15, 11, 72, 0.15);
}
.earn__tx-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}
.earn__tx-body strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
}
.earn__tx-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.earn__tx-amount {
  font-size: 13px;
  font-weight: 900;
  direction: ltr;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.earn__tx-amount--in {
  color: #059669;
}
.earn__tx-amount--pending {
  color: rgba(15, 11, 72, 0.5);
}
.earn__tx-status {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.earn__tx-status--done {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.earn__tx-status--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.earn__history-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
  text-align: center;
}
.earn__history-foot a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b52f0;
  text-decoration: none;
}
.earn__history-foot a:hover {
  text-decoration: underline;
}

[data-theme=dark] .earn__stat, [data-theme=dark] .earn__panel, [data-theme=dark] .earn__how {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .earn__stat strong {
  color: #fff;
}
[data-theme=dark] .earn__stat span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .earn__panel-head h2 {
  color: #fff;
}
[data-theme=dark] .earn__link {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .earn__link input {
  color: #fff;
}
[data-theme=dark] .earn__hint {
  background: rgba(91, 82, 240, 0.12);
  border-color: rgba(91, 82, 240, 0.3);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .earn__share-label {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .earn__tier-rate {
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.18), rgba(236, 72, 153, 0.1));
  border-color: rgba(91, 82, 240, 0.35);
}
[data-theme=dark] .earn__tier-rate span {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .earn__tier-rate strong {
  color: #c4b5fd;
}
[data-theme=dark] .earn__tier-progress {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .earn__tier-step {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .earn__tier-step strong {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .earn__tier-step small {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .earn__tier-step.is-done {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme=dark] .earn__tier-step.is-done strong {
  color: #6ee7b7;
}
[data-theme=dark] .earn__tier-step.is-current {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme=dark] .earn__tier-step.is-current strong {
  color: #fcd34d;
}
[data-theme=dark] .earn__tier-note {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.35);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .earn__tier-note strong {
  color: #fcd34d;
}
[data-theme=dark] .earn__how-head h2 {
  color: #fff;
}
[data-theme=dark] .earn__how-head p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .earn__step-card {
  background: linear-gradient(180deg, #13112a 0%, rgba(var(--c, 91, 82, 240), 0.15) 100%);
  border-color: rgba(var(--c, 91, 82, 240), 0.25);
}
[data-theme=dark] .earn__step-card h3 {
  color: #fff;
}
[data-theme=dark] .earn__step-card p {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .earn__step-num {
  color: rgba(var(--c, 91, 82, 240), 0.25);
}
[data-theme=dark] .earn__history-filter {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .earn__history-filter button {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .earn__history-filter button:hover {
  color: #fff;
}
[data-theme=dark] .earn__history-filter button.is-active {
  background: #1a1740;
  color: #c4b5fd;
}
[data-theme=dark] .earn__tx {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .earn__tx-body strong {
  color: #fff;
}
[data-theme=dark] .earn__tx-body span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .earn__tx-amount--pending {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .earn__history-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {
  .earn__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .earn__row {
    grid-template-columns: 1fr;
  }
  .earn__steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .earn {
    gap: 12px;
  }
  .earn__hero {
    padding: 20px 20px;
  }
  .earn__hero-main {
    flex-direction: column;
    align-items: stretch;
  }
  .earn__hero-title {
    font-size: 18px;
  }
  .earn__hero-sub {
    font-size: 12px;
  }
  .earn__hero-earned {
    align-items: stretch;
    text-align: center;
  }
  .earn__panel {
    padding: 14px 16px;
  }
  .earn__how {
    padding: 16px 18px;
  }
  .earn__tx {
    grid-template-columns: 34px 1fr auto;
    padding: 8px 10px;
  }
  .earn__tx-status {
    display: none;
  }
}
.notification {
  display: none;
}

.panel-notif {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 14px;
  margin-bottom: 20px;
}
.panel-notif__icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: #fbbf24;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.panel-notif__body {
  flex: 1;
}
.panel-notif__body strong {
  font-size: 14px;
  color: #92400e;
  display: block;
  margin-bottom: 2px;
}
.panel-notif__body span {
  font-size: 12px;
  color: #a16207;
}
.panel-notif__action {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}
.panel-notif__action:hover {
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
  color: #fff;
}
.panel-notif__close {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: rgba(217, 119, 6, 0.1);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d97706;
  transition: all 0.2s;
}
.panel-notif__close:hover {
  background: #fef3c7;
}

[data-theme=dark] .panel-notif {
  background: #2a1f10;
  border-color: #4a2c10;
}
[data-theme=dark] .panel-notif__body strong {
  color: #fcd34d;
}
[data-theme=dark] .panel-notif__body span {
  color: #d97706;
}
[data-theme=dark] .panel-notif__close {
  background: rgba(217, 119, 6, 0.1);
  color: #fbbf24;
}

@media (max-width: 767px) {
  .panel-notif {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    align-items: center;
  }
  .panel-notif__icon {
    grid-column: 1;
    grid-row: 1/span 2;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    align-self: center;
  }
  .panel-notif__icon svg {
    width: 16px;
    height: 16px;
  }
  .panel-notif__body {
    grid-column: 2;
    grid-row: 1/span 2;
    min-width: 0;
  }
  .panel-notif__body strong {
    font-size: 12.5px;
    margin-bottom: 1px;
  }
  .panel-notif__body span {
    font-size: 10.5px;
    line-height: 1.5;
    display: block;
  }
  .panel-notif__action {
    grid-column: 1/-1;
    grid-row: 3;
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: 11.5px;
    border-radius: 10px;
    margin-top: 4px;
  }
  .panel-notif__action svg {
    width: 12px;
    height: 12px;
  }
  .panel-notif__close {
    grid-column: 3;
    grid-row: 1/span 2;
    width: 28px;
    height: 28px;
    min-width: 28px;
    align-self: start;
  }
  .panel-notif__close svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 360px) {
  .panel-notif {
    grid-template-columns: 34px 1fr auto;
    padding: 10px 12px;
  }
  .panel-notif__body strong {
    font-size: 12px;
  }
  .panel-notif__body span {
    font-size: 10px;
  }
}
@keyframes o-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
@keyframes o-spin {
  to {
    transform: rotate(360deg);
  }
}
.orders {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.orders__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.orders__header-left {
  flex: 1;
  min-width: 0;
}
.orders__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border: 1px solid rgba(91, 82, 240, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.orders__header h1 {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.orders__header p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.orders__stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.orders__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  min-width: 60px;
  background: rgba(var(--c, 91, 82, 240), 0.08);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
  border-radius: 10px;
  line-height: 1.2;
}
.orders__stat strong {
  font-size: 16px;
  font-weight: 900;
  color: rgb(var(--c, 91, 82, 240));
  direction: ltr;
}
.orders__stat span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-top: 2px;
}
.orders__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.orders__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.orders__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
}
.orders__filter span {
  padding: 1px 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.55);
}
.orders__filter:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.orders__filter.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.orders__filter.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.orders__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 10px;
  min-width: 240px;
  transition: border-color 0.25s ease;
}
.orders__search svg {
  color: rgba(15, 11, 72, 0.45);
  flex-shrink: 0;
}
.orders__search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  font-weight: 500;
  color: #0f0b48;
}
.orders__search input::placeholder {
  color: rgba(15, 11, 72, 0.4);
}
.orders__search:focus-within {
  border-color: rgba(91, 82, 240, 0.45);
}
.orders__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orders__card {
  position: relative;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.orders__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.55));
}
.orders__card:hover {
  border-color: rgba(var(--c, 91, 82, 240), 0.25);
  box-shadow: 0 10px 24px rgba(15, 11, 72, 0.1);
}
.orders__card-main {
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  align-items: center;
  gap: 14px;
}
.orders__card-logo {
  margin: 0;
  width: 54px;
  height: 54px;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--c, 91, 82, 240), 0.12), rgba(var(--c, 91, 82, 240), 0.04));
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
}
.orders__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.orders__card-info {
  min-width: 0;
}
.orders__card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orders__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.orders__card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.orders__card-meta strong {
  color: #0f0b48;
  font-weight: 800;
}
.orders__card-price {
  text-align: left;
  direction: ltr;
  line-height: 1.2;
}
.orders__card-price strong {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
}
.orders__card-price small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
  margin-top: 2px;
}
.orders__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.orders__badge--done {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.orders__badge--progress {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.orders__badge--progress svg {
  animation: o-spin 2s linear infinite;
}
.orders__badge--pending {
  background: rgba(236, 72, 153, 0.12);
  color: #be185d;
}
.orders__badge--refund {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.orders__badge--cancel {
  background: rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.55);
}
.orders__badge-dot {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: o-dot-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px #16a34a;
}
.orders__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 14px 4px 0;
  padding-top: 6px;
}
.orders__steps::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: rgba(15, 11, 72, 0.08);
  z-index: 0;
}
.orders__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.orders__step::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(15, 11, 72, 0.15);
  transition: all 0.25s ease;
}
.orders__step span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.5);
}
.orders__step.is-done::before {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.orders__step.is-done span {
  color: #059669;
}
.orders__step.is-current::before {
  background: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  animation: o-dot-pulse 1.4s ease-in-out infinite;
}
.orders__step.is-current span {
  color: #d97706;
  font-weight: 800;
}
.orders__step.is-pending::before {
  background: #ec4899;
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
}
.orders__step.is-pending span {
  color: #be185d;
  font-weight: 800;
}
.orders__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(91, 82, 240, 0.05);
  border: 1px solid rgba(91, 82, 240, 0.15);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.7);
  line-height: 1.6;
}
.orders__note svg {
  color: #5b52f0;
  flex-shrink: 0;
  margin-top: 2px;
}
.orders__note--warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #92400e;
}
.orders__note--warn svg {
  color: #d97706;
}
.orders__card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
  flex-wrap: wrap;
}
.orders__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 800;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}
.orders__btn--primary {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.orders__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(91, 82, 240, 0.5);
  color: #fff;
}
.orders__btn--ghost {
  background: rgba(15, 11, 72, 0.04);
  color: rgba(15, 11, 72, 0.75);
  border-color: rgba(15, 11, 72, 0.08);
}
.orders__btn--ghost:hover {
  background: rgba(15, 11, 72, 0.08);
  color: #0f0b48;
}
.orders__btn--danger-ghost {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.18);
}
.orders__btn--danger-ghost:hover {
  background: #ef4444;
  color: #fff;
  border-color: transparent;
}
.orders__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.orders__page, .orders__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.7);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.orders__page:hover, .orders__page-btn:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.orders__page.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.35);
}

[data-theme=dark] .orders__header, [data-theme=dark] .orders__card, [data-theme=dark] .orders__filter, [data-theme=dark] .orders__search, [data-theme=dark] .orders__page, [data-theme=dark] .orders__page-btn {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .orders__header h1 {
  color: #fff;
}
[data-theme=dark] .orders__header p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .orders__stat span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .orders__filter {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .orders__filter span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .orders__search input {
  color: #fff;
}
[data-theme=dark] .orders__search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .orders__card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .orders__card-title {
  color: #fff;
}
[data-theme=dark] .orders__card-meta {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .orders__card-meta strong {
  color: #fff;
}
[data-theme=dark] .orders__card-price strong {
  color: #fff;
}
[data-theme=dark] .orders__card-price small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .orders__card-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .orders__steps::before {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .orders__step::before {
  background: #1a1740;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .orders__step span {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .orders__note {
  background: rgba(91, 82, 240, 0.12);
  border-color: rgba(91, 82, 240, 0.3);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .orders__note--warn {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}
[data-theme=dark] .orders__btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .orders__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
[data-theme=dark] .orders__page, [data-theme=dark] .orders__page-btn {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .orders__page.is-active {
  color: #fff;
}

@media (max-width: 991px) {
  .orders__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .orders__search {
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .orders {
    gap: 12px;
  }
  .orders__header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(236, 72, 153, 0.04) 50%, #fff 100%);
  }
  .orders__eyebrow {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 6px;
  }
  .orders__header h1 {
    font-size: 16px;
    margin-bottom: 2px;
  }
  .orders__header p {
    font-size: 11px;
    line-height: 1.55;
  }
  .orders__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .orders__stat {
    padding: 10px 8px;
    min-width: 0;
    border-radius: 10px;
    background: rgba(var(--c, 91, 82, 240), 0.1);
  }
  .orders__stat strong {
    font-size: 17px;
  }
  .orders__stat span {
    font-size: 10px;
  }
  .orders__toolbar {
    gap: 10px;
  }
  .orders__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
    gap: 6px;
  }
  .orders__filters::-webkit-scrollbar {
    display: none;
  }
  .orders__filter {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
  }
  .orders__filter span {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .orders__search {
    min-width: 0;
    width: 100%;
    padding: 9px 12px;
    border-radius: 11px;
  }
  .orders__search input {
    font-size: 12px;
  }
  .orders__card {
    padding: 14px;
    border-radius: 14px;
  }
  .orders__card-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .orders__card-logo {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    order: 1;
  }
  .orders__card-info {
    flex: 1 1 0;
    min-width: 0;
    order: 2;
  }
  .orders__card-title {
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    margin-bottom: 4px;
  }
  .orders__card-meta {
    font-size: 10px;
    gap: 3px 10px;
  }
  .orders__card-meta svg {
    display: none;
  }
  .orders__badge {
    flex: 0 0 auto;
    align-self: flex-start;
    order: 3;
    padding: 4px 9px;
    font-size: 9.5px;
    border-radius: 7px;
  }
  .orders__badge svg {
    width: 10px;
    height: 10px;
  }
  .orders__card-price {
    flex: 1 1 100%;
    order: 4;
    display: flex;
    align-items: baseline;
    gap: 5px;
    text-align: right;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px dashed rgba(15, 11, 72, 0.08);
  }
  .orders__card-price strong {
    font-size: 16px;
  }
  .orders__card-price small {
    margin: 0;
    font-size: 10px;
    display: inline;
  }
  .orders__steps {
    margin: 12px 0 0;
    padding-top: 4px;
  }
  .orders__steps::before {
    right: 12%;
    left: 12%;
    top: 9px;
  }
  .orders__step::before {
    width: 14px;
    height: 14px;
  }
  .orders__step span {
    font-size: 9.5px;
  }
  .orders__note {
    font-size: 10.5px;
    padding: 7px 10px;
    line-height: 1.6;
  }
  .orders__card-actions {
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    flex-wrap: wrap;
  }
  .orders__btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 9px 10px;
    font-size: 11px;
    border-radius: 10px;
  }
  .orders__btn--primary {
    flex: 1 1 100%;
    order: -1;
    padding: 10px;
  }
}
@media (max-width: 420px) {
  .orders__header h1 {
    font-size: 15px;
  }
  .orders__stat strong {
    font-size: 15px;
  }
  .orders__stat span {
    font-size: 9px;
  }
  .orders__card-title {
    font-size: 12.5px;
  }
  .orders__card-price strong {
    font-size: 15px;
  }
}
.favorites {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.favorites__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.favorites__header-left {
  flex: 1;
  min-width: 0;
}
.favorites__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.favorites__title {
  font-size: 18px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.favorites__subtitle {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.6;
}
.favorites__subtitle strong {
  color: #5b52f0;
  font-weight: 800;
}
.favorites__header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.favorites__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(15, 11, 72, 0.04);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 10px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.favorites__search svg {
  color: rgba(15, 11, 72, 0.45);
  flex-shrink: 0;
}
.favorites__search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  font-weight: 500;
  color: #0f0b48;
  width: 180px;
}
.favorites__search input::placeholder {
  color: rgba(15, 11, 72, 0.4);
}
.favorites__search:focus-within {
  background: #fff;
  border-color: rgba(91, 82, 240, 0.4);
}
.favorites__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.favorites__clear:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
}
.favorites__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.favorites__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
}
.favorites__filter span {
  padding: 1px 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.55);
}
.favorites__filter:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.favorites__filter:hover span {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
}
.favorites__filter.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
}
.favorites__filter.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.favorites__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.favorites__card {
  display: grid;
  grid-template-columns: 130px 1fr;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.favorites__card:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 82, 240, 0.22);
  box-shadow: 0 14px 32px rgba(15, 11, 72, 0.1);
}
.favorites__card--out {
  opacity: 0.85;
  filter: saturate(0.6);
}
.favorites__card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.06), rgba(236, 72, 153, 0.04));
  text-decoration: none;
}
.favorites__card-media img {
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.18);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.favorites__card:hover .favorites__card-media img {
  transform: scale(1.05) rotate(-2deg);
}
.favorites__card-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  border-radius: 7px;
  direction: ltr;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}
.favorites__card-stock {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  background: rgba(15, 11, 72, 0.8);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 7px;
  backdrop-filter: blur(4px);
}
.favorites__card-body {
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.favorites__card-tag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}
.favorites__card-tag--mobile {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
}
.favorites__card-tag--ai {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
}
.favorites__card-tag--ps {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.favorites__card-tag--gift {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.favorites__card-tag--pc {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.favorites__card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
  color: #0f0b48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.favorites__card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.favorites__card-title a:hover {
  color: #5b52f0;
}
.favorites__card-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.favorites__card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.favorites__card-meta li svg {
  opacity: 0.7;
}
.favorites__card-meta li.is-warning {
  color: #d97706;
}
.favorites__card-meta li.is-warning svg {
  opacity: 1;
}
.favorites__card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
}
.favorites__card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  direction: ltr;
  text-align: left;
}
.favorites__card-price del {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.4);
  text-decoration: line-through;
}
.favorites__card-price del small {
  font-size: 9px;
  font-weight: 600;
  margin-left: 2px;
}
.favorites__card-price strong {
  font-size: 14px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
}
.favorites__card-price strong small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
  margin-left: 2px;
}
.favorites__card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.favorites__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}
.favorites__icon-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}
.favorites__icon-btn--remove:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.favorites__buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.favorites__buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(91, 82, 240, 0.5);
  color: #fff;
}
.favorites__buy-btn--notify {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 5px 14px rgba(245, 158, 11, 0.4);
}
.favorites__buy-btn--notify:hover {
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55);
}
.favorites__empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px dashed rgba(15, 11, 72, 0.15);
  border-radius: 16px;
}
.favorites__empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.1), rgba(236, 72, 153, 0.08));
  color: #ec4899;
}
.favorites__empty h3 {
  font-size: 15px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 6px;
}
.favorites__empty p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0 0 18px;
  line-height: 1.7;
}
.favorites__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
  transition: transform 0.25s ease;
}
.favorites__empty-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

[data-theme=dark] .favorites__header, [data-theme=dark] .favorites__card, [data-theme=dark] .favorites__filter, [data-theme=dark] .favorites__empty {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .favorites__title {
  color: #fff;
}
[data-theme=dark] .favorites__subtitle {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .favorites__card-title a, [data-theme=dark] .favorites__card-price strong {
  color: #fff;
}
[data-theme=dark] .favorites__card-title a:hover {
  color: #c4b5fd;
}
[data-theme=dark] .favorites__card-price strong small, [data-theme=dark] .favorites__card-price del {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .favorites__card-meta li {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .favorites__card-foot {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .favorites__card-media {
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.1), rgba(236, 72, 153, 0.06));
}
[data-theme=dark] .favorites__filter {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .favorites__filter span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .favorites__filter:hover {
  color: #c4b5fd;
  border-color: rgba(91, 82, 240, 0.4);
}
[data-theme=dark] .favorites__search {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .favorites__search input {
  color: #fff;
}
[data-theme=dark] .favorites__search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .favorites__icon-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .favorites__empty h3 {
  color: #fff;
}
[data-theme=dark] .favorites__empty p {
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
  .favorites__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .favorites {
    gap: 12px;
  }
  .favorites__header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(91, 82, 240, 0.04) 50%, #fff 100%);
  }
  .favorites__eyebrow {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 6px;
  }
  .favorites__title {
    font-size: 16px;
  }
  .favorites__subtitle {
    font-size: 11px;
    line-height: 1.55;
  }
  .favorites__header-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .favorites__search {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
  }
  .favorites__search input {
    width: 100%;
    font-size: 12px;
  }
  .favorites__clear {
    flex-shrink: 0;
    padding: 9px 11px;
    font-size: 0;
    gap: 0;
  }
  .favorites__clear svg {
    width: 16px;
    height: 16px;
  }
  .favorites__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
    gap: 6px;
  }
  .favorites__filters::-webkit-scrollbar {
    display: none;
  }
  .favorites__filter {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
  }
  .favorites__filter span {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .favorites__card {
    grid-template-columns: 96px 1fr;
    border-radius: 14px;
  }
  .favorites__card-media {
    padding: 10px;
  }
  .favorites__card-media img {
    max-width: 72px;
    border-radius: 12px;
  }
  .favorites__card-discount, .favorites__card-stock {
    top: 7px;
    right: 7px;
    padding: 2px 7px;
    font-size: 9.5px;
    border-radius: 5px;
  }
  .favorites__card-body {
    padding: 10px 12px 10px;
    gap: 5px;
  }
  .favorites__card-tag {
    font-size: 9px;
    padding: 2px 7px;
  }
  .favorites__card-title {
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }
  .favorites__card-meta {
    gap: 4px 8px;
  }
  .favorites__card-meta li {
    font-size: 9.5px;
  }
  .favorites__card-meta li svg {
    width: 10px;
    height: 10px;
  }
  .favorites__card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 8px;
    margin-top: 6px;
  }
  .favorites__card-price {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    text-align: right;
    direction: ltr;
  }
  .favorites__card-price del {
    font-size: 10px;
    order: 2;
  }
  .favorites__card-price strong {
    font-size: 13px;
    order: 1;
  }
  .favorites__card-price strong small {
    font-size: 9.5px;
  }
  .favorites__card-actions {
    display: flex;
    gap: 6px;
  }
  .favorites__icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .favorites__icon-btn svg {
    width: 13px;
    height: 13px;
  }
  .favorites__buy-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 11px;
    border-radius: 9px;
  }
  .favorites__buy-btn svg {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 380px) {
  .favorites__card {
    grid-template-columns: 86px 1fr;
  }
  .favorites__card-media {
    padding: 8px;
  }
  .favorites__card-media img {
    max-width: 64px;
  }
  .favorites__card-title {
    font-size: 12px;
  }
  .favorites__card-price strong {
    font-size: 12.5px;
  }
  .favorites__buy-btn {
    font-size: 10.5px;
    padding: 7px 8px;
  }
}
.accts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.accts__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.accts__header-left {
  flex: 1;
  min-width: 0;
}
.accts__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border: 1px solid rgba(91, 82, 240, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.accts__header h1 {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.accts__header p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.55;
}
.accts__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.accts__add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.5);
}
.accts__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(91, 82, 240, 0.04));
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 12px;
}
.accts__banner > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.accts__banner > div strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f0b48;
}
.accts__banner > div span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.62);
  line-height: 1.7;
}
.accts__banner-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.accts__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.accts__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
}
.accts__filter span {
  padding: 1px 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.55);
}
.accts__filter:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.accts__filter.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.accts__filter.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.accts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.accts__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  isolation: isolate;
}
.accts__card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(var(--c, 91, 82, 240), 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.accts__card > * {
  position: relative;
  z-index: 1;
}
.accts__card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
  box-shadow: 0 14px 30px rgba(15, 11, 72, 0.1);
}
.accts__card:hover::before {
  opacity: 0.9;
}
.accts__card.is-unverified {
  background: linear-gradient(180deg, #fff 0%, rgba(245, 158, 11, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.2);
}
.accts__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.accts__card-logo {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 11, 72, 0.1);
  flex-shrink: 0;
}
.accts__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.accts__card-badge--verified {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.accts__card-badge--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.accts__card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.accts__card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  line-height: 1.3;
}
.accts__card-email {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
  padding: 6px 10px;
  background: rgba(15, 11, 72, 0.04);
  border-radius: 7px;
  text-align: left;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accts__card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.accts__card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.accts__card-meta span svg {
  opacity: 0.7;
}
.accts__card-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #92400e;
}
.accts__card-note svg {
  color: #d97706;
  flex-shrink: 0;
}
.accts__card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.accts__icon-btn {
  width: 32px;
  height: 32px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.65);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.accts__icon-btn:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.22);
}
.accts__icon-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.22);
}
.accts__verify-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.accts__verify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.5);
}
.accts__card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px;
  min-height: 200px;
  background: rgba(91, 82, 240, 0.03);
  border: 2px dashed rgba(91, 82, 240, 0.28);
  color: #0f0b48;
  cursor: pointer;
  box-shadow: none;
}
.accts__card--add::before {
  display: none;
}
.accts__card--add:hover {
  background: rgba(91, 82, 240, 0.08);
  border-color: #5b52f0;
  transform: translateY(-3px);
}
.accts__card--add strong {
  font-size: 13px;
  font-weight: 800;
  color: #5b52f0;
}
.accts__card--add span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  text-align: center;
}
.accts__card-add-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.4);
}
.accts__supported {
  padding: 14px 18px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px dashed rgba(15, 11, 72, 0.1);
  border-radius: 12px;
}
.accts__supported h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.7);
  margin: 0 0 10px;
  letter-spacing: 0.2px;
}
.accts__supported h4 svg {
  color: #10b981;
}
.accts__supported-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.accts__supported-list span {
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

[data-theme=dark] .accts__header, [data-theme=dark] .accts__card, [data-theme=dark] .accts__filter, [data-theme=dark] .accts__supported {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .accts__header h1 {
  color: #fff;
}
[data-theme=dark] .accts__header p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .accts__banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(91, 82, 240, 0.1));
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme=dark] .accts__banner strong {
  color: #fff;
}
[data-theme=dark] .accts__banner span {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .accts__filter {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .accts__filter span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .accts__card:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .accts__card.is-unverified {
  background: linear-gradient(180deg, #13112a 0%, rgba(245, 158, 11, 0.08) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme=dark] .accts__card-title {
  color: #fff;
}
[data-theme=dark] .accts__card-email {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .accts__card-meta span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .accts__card-logo {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .accts__card-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .accts__card-note {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}
[data-theme=dark] .accts__icon-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .accts__card--add {
  background: rgba(91, 82, 240, 0.08);
  border-color: rgba(91, 82, 240, 0.35);
}
[data-theme=dark] .accts__card--add:hover {
  background: rgba(91, 82, 240, 0.14);
}
[data-theme=dark] .accts__card--add strong {
  color: #c4b5fd;
}
[data-theme=dark] .accts__card--add span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .accts__supported {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .accts__supported h4 {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 991px) {
  .accts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .accts {
    gap: 12px;
  }
  .accts__header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(236, 72, 153, 0.04) 50%, #fff 100%);
  }
  .accts__eyebrow {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 6px;
  }
  .accts__header h1 {
    font-size: 16px;
  }
  .accts__header p {
    font-size: 11px;
    line-height: 1.55;
  }
  .accts__header-actions {
    width: 100%;
  }
  .accts__add-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 11.5px;
    border-radius: 10px;
  }
  .accts__banner {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 11px;
  }
  .accts__banner > div strong {
    font-size: 11.5px;
  }
  .accts__banner > div span {
    font-size: 10.5px;
    line-height: 1.6;
  }
  .accts__banner-ico {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .accts__banner-ico svg {
    width: 15px;
    height: 15px;
  }
  .accts__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
    gap: 6px;
  }
  .accts__filters::-webkit-scrollbar {
    display: none;
  }
  .accts__filter {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
  }
  .accts__filter span {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .accts__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .accts__card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  .accts__card-head {
    display: contents;
  }
  .accts__card-logo {
    grid-column: 1;
    grid-row: 1/span 2;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    align-self: center;
    margin-bottom: 0;
  }
  .accts__card-badge {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 6px;
  }
  .accts__card-badge svg {
    width: 9px;
    height: 9px;
  }
  .accts__card-body {
    grid-column: 2/-1;
    grid-row: 2;
    gap: 4px;
    margin: 0;
  }
  .accts__card-title {
    font-size: 12.5px;
  }
  .accts__card-email {
    font-size: 10.5px;
    padding: 4px 8px;
    border-radius: 6px;
  }
  .accts__card-meta {
    gap: 3px;
    margin-top: 3px;
  }
  .accts__card-meta span {
    font-size: 9.5px;
  }
  .accts__card-note {
    grid-column: 1/-1;
    font-size: 10px;
    padding: 5px 9px;
    margin-top: 0;
  }
  .accts__card-foot {
    grid-column: 1/-1;
    grid-row: auto;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
  }
  .accts__icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .accts__icon-btn svg {
    width: 13px;
    height: 13px;
  }
  .accts__verify-btn {
    padding: 8px;
    font-size: 11px;
    border-radius: 8px;
  }
  .accts__card--add {
    min-height: 120px;
    padding: 18px;
    display: flex !important;
  }
  .accts__card-add-ico {
    width: 40px;
    height: 40px;
  }
  .accts__supported-list span {
    font-size: 10px;
    padding: 4px 9px;
  }
}
@media (max-width: 380px) {
  .accts__card {
    grid-template-columns: 40px 1fr auto;
    padding: 10px 12px;
  }
  .accts__card-logo {
    width: 40px;
    height: 40px;
  }
  .accts__card-title {
    font-size: 12px;
  }
  .accts__card-email {
    font-size: 10px;
  }
}
.panel-add-account {
  display: none;
}

.add-acc {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 40px;
}
.add-acc__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f4fb 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  flex-wrap: wrap;
}
.add-acc__head-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -8px rgba(124, 58, 237, 0.5);
  flex-shrink: 0;
}
.add-acc__head-text {
  flex: 1;
  min-width: 0;
}
.add-acc__head-text h2 {
  font-size: 17px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.add-acc__head-text p {
  font-size: 12px;
  color: #6b6880;
  margin: 0;
  line-height: 1.7;
  font-weight: 500;
}
.add-acc__head-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 800;
  color: #7c3aed;
  background: #fff;
  border: 1.5px solid #ddd4f3;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.add-acc__head-back:hover {
  background: #f3f0ff;
  border-color: #c4b5fd;
  color: #7c3aed;
}
.add-acc__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 1200px) {
  .add-acc__grid {
    grid-template-columns: 1fr;
  }
}
.add-acc__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.add-acc__section {
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.add-acc__section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed #ebe6f5;
}
.add-acc__section-head h3 {
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.add-acc__section-head small {
  font-size: 11px;
  color: #6b6880;
  font-weight: 500;
  line-height: 1.6;
}
.add-acc__section--footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.add-acc__step {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.5);
  flex-shrink: 0;
}
.add-acc__types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .add-acc__types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.add-acc__type {
  --t1: #8b5cf6;
  --t2: #7c3aed;
  --t-rgb: 139, 92, 246;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.add-acc__type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.add-acc__type[data-accent=violet] {
  --t1: #a855f7;
  --t2: #7c3aed;
  --t-rgb: 139, 92, 246;
}
.add-acc__type[data-accent=sky] {
  --t1: #38bdf8;
  --t2: #0284c7;
  --t-rgb: 14, 165, 233;
}
.add-acc__type[data-accent=amber] {
  --t1: #fbbf24;
  --t2: #d97706;
  --t-rgb: 245, 158, 11;
}
.add-acc__type[data-accent=slate] {
  --t1: #64748b;
  --t2: #334155;
  --t-rgb: 71, 85, 105;
}
.add-acc__type[data-accent=blue] {
  --t1: #60a5fa;
  --t2: #2563eb;
  --t-rgb: 59, 130, 246;
}
.add-acc__type[data-accent=rose] {
  --t1: #fb7185;
  --t2: #e11d48;
  --t-rgb: 244, 63, 94;
}
.add-acc__type[data-accent=emerald] {
  --t1: #34d399;
  --t2: #059669;
  --t-rgb: 16, 185, 129;
}
.add-acc__type[data-accent=gray] {
  --t1: #9ca3af;
  --t2: #4b5563;
  --t-rgb: 107, 114, 128;
}
.add-acc__type figure {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
  margin: 0;
  border: 1.5px solid rgba(var(--t-rgb), 0.15);
  transition: all 0.22s ease;
}
.add-acc__type figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.add-acc__type-plus {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #8a87a3;
}
.add-acc__type-plus svg {
  opacity: 0.6;
}
.add-acc__type span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.add-acc__type span strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-acc__type span small {
  font-size: 10px;
  font-weight: 600;
  color: #8a87a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-acc__type:hover {
  border-color: rgba(var(--t-rgb), 0.4);
  background: #fff;
  transform: translateY(-1px);
}
.add-acc__type.is-active, .add-acc__type:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--t1), var(--t2)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 24px -8px rgba(var(--t-rgb), 0.45);
}
.add-acc__type.is-active figure, .add-acc__type:has(input:checked) figure {
  border-color: rgba(var(--t-rgb), 0.45);
  box-shadow: 0 4px 10px -3px rgba(var(--t-rgb), 0.35);
}
.add-acc__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 576px) {
  .add-acc__fields {
    grid-template-columns: 1fr;
  }
}
.add-acc__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.add-acc__field--full {
  grid-column: 1/-1;
}
.add-acc__field label {
  font-size: 11.5px;
  font-weight: 700;
  color: #4a4664;
  padding-right: 2px;
}
.add-acc__field textarea {
  width: 100%;
  padding: 11px 14px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 11px;
  font-size: 12.5px;
  color: #1a1a2e;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  transition: all 0.2s ease;
}
.add-acc__field textarea::placeholder {
  color: #a5a2bd;
}
.add-acc__field textarea:focus {
  outline: none;
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.add-acc__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 11px;
  transition: all 0.2s ease;
}
.add-acc__input > svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.add-acc__input input {
  flex: 1;
  height: 42px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: #1a1a2e;
  font-family: inherit;
}
.add-acc__input input::placeholder {
  color: #a5a2bd;
}
.add-acc__input input:focus {
  outline: none;
}
.add-acc__input:focus-within {
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.add-acc__eye {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #8a87a3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.add-acc__eye:hover {
  background: #f3f0ff;
  color: #7c3aed;
}
.add-acc__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #8a87a3;
  font-weight: 500;
}
.add-acc__hint svg {
  color: #a78bfa;
  flex-shrink: 0;
}
.add-acc__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 240px;
}
.add-acc__checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.add-acc__checkbox-mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid #cfc6e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.add-acc__checkbox > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.add-acc__checkbox > span:last-child strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}
.add-acc__checkbox > span:last-child small {
  font-size: 11px;
  color: #6b6880;
  font-weight: 500;
  line-height: 1.5;
}
.add-acc__checkbox input:checked ~ .add-acc__checkbox-mark {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(124, 58, 237, 0.5);
}
.add-acc__actions {
  display: inline-flex;
  gap: 8px;
}
.add-acc__cancel {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  font-size: 12.5px;
  font-weight: 800;
  color: #4a4664;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 11px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.add-acc__cancel:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}
.add-acc__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 22px -6px rgba(5, 150, 105, 0.45);
  font-family: inherit;
}
.add-acc__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(5, 150, 105, 0.6);
}
.add-acc__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 90px;
}
@media (max-width: 1200px) {
  .add-acc__aside {
    position: static;
  }
}
.add-acc__aside-card {
  padding: 16px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 16px;
}
.add-acc__aside-card header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #ebe6f5;
}
.add-acc__aside-card header svg {
  color: #7c3aed;
}
.add-acc__aside-card header h4 {
  font-size: 13px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
}
.add-acc__aside-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-acc__aside-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: #4a4664;
  line-height: 1.8;
  font-weight: 500;
}
.add-acc__aside-card ul li svg {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 3px;
}
.add-acc__aside-card--warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}
.add-acc__aside-card--warn header {
  border-bottom-color: rgba(217, 119, 6, 0.25);
}
.add-acc__aside-card--warn header svg {
  color: #d97706;
}
.add-acc__aside-card--warn header h4 {
  color: #78350f;
}
.add-acc__aside-card--warn ul li {
  color: #92400e;
  position: relative;
  padding-right: 14px;
}
.add-acc__aside-card--warn ul li::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d97706;
}
.add-acc__aside-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.add-acc__aside-stats > div {
  padding: 14px;
  background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 100%);
  border: 1.5px solid #ddd4f3;
  border-radius: 14px;
  text-align: center;
}
.add-acc__aside-stats > div strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.add-acc__aside-stats > div small {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}

[data-theme=dark] .add-acc__head {
  background: linear-gradient(135deg, #15123a 0%, #0f0c2e 100%);
  border-color: #2a2560;
}
[data-theme=dark] .add-acc__head-text h2 {
  color: #f1efff;
}
[data-theme=dark] .add-acc__head-text p {
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__head-back {
  background: #15123a;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .add-acc__head-back:hover {
  background: #1a1648;
  border-color: #a78bfa;
}
[data-theme=dark] .add-acc__section {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .add-acc__section-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .add-acc__section-head h3 {
  color: #f1efff;
}
[data-theme=dark] .add-acc__section-head small {
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__type {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .add-acc__type figure {
  background: #15123a;
}
[data-theme=dark] .add-acc__type span strong {
  color: #f1efff;
}
[data-theme=dark] .add-acc__type span small {
  color: #8a87b3;
}
[data-theme=dark] .add-acc__type:hover {
  background: #1a1648;
}
[data-theme=dark] .add-acc__type.is-active, [data-theme=dark] .add-acc__type:has(input:checked) {
  background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, var(--t1), var(--t2)) border-box;
}
[data-theme=dark] .add-acc__field label {
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__input {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .add-acc__input input {
  color: #f1efff;
}
[data-theme=dark] .add-acc__input input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .add-acc__input:focus-within {
  background: #1a1648;
}
[data-theme=dark] .add-acc__field textarea {
  background: #0d0b32;
  border-color: #2a2560;
  color: #f1efff;
}
[data-theme=dark] .add-acc__field textarea::placeholder {
  color: #5a5790;
}
[data-theme=dark] .add-acc__hint {
  color: #8a87b3;
}
[data-theme=dark] .add-acc__hint svg {
  color: #a78bfa;
}
[data-theme=dark] .add-acc__checkbox-mark {
  background: #0d0b32;
  border-color: #3d3485;
}
[data-theme=dark] .add-acc__checkbox > span:last-child strong {
  color: #f1efff;
}
[data-theme=dark] .add-acc__checkbox > span:last-child small {
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__cancel {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__cancel:hover {
  background: #2a0f12;
  border-color: #5a1a20;
  color: #fca5a5;
}
[data-theme=dark] .add-acc__aside-card {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .add-acc__aside-card header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .add-acc__aside-card header h4 {
  color: #f1efff;
}
[data-theme=dark] .add-acc__aside-card ul li {
  color: #b6b3d9;
}
[data-theme=dark] .add-acc__aside-card ul li svg {
  color: #34d399;
}
[data-theme=dark] .add-acc__aside-card--warn {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1308 100%);
  border-color: #4a2c10;
}
[data-theme=dark] .add-acc__aside-card--warn header h4 {
  color: #fde68a;
}
[data-theme=dark] .add-acc__aside-card--warn ul li {
  color: #fcd34d;
}
[data-theme=dark] .add-acc__aside-card--warn ul li::before {
  background: #fbbf24;
}
[data-theme=dark] .add-acc__aside-stats > div {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 100%);
  border-color: #3d3485;
}
[data-theme=dark] .add-acc__aside-stats > div strong {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .add-acc__aside-stats > div small {
  color: #b6b3d9;
}

@media (max-width: 576px) {
  .add-acc__section {
    padding: 14px 16px;
  }
  .add-acc__section--footer {
    flex-direction: column;
    align-items: stretch;
  }
  .add-acc__actions {
    width: 100%;
  }
  .add-acc__cancel, .add-acc__submit {
    flex: 1;
    justify-content: center;
  }
}
@keyframes t-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
@keyframes t-spin {
  to {
    transform: rotate(360deg);
  }
}
.tickets {
  display: none;
}

.tks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tks__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.tks__header-left {
  flex: 1;
  min-width: 0;
}
.tks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border: 1px solid rgba(91, 82, 240, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.tks__header h1 {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.tks__header p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.55;
}
.tks__new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tks__new-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.5);
}
.tks__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tks__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.tks__stat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.3);
}
.tks__stat-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
}
.tks__stat > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.tks__stat strong {
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
  letter-spacing: -0.01em;
}
.tks__stat span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.tks__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tks__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.tks__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
}
.tks__filter span {
  padding: 1px 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.55);
}
.tks__filter:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.tks__filter.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.tks__filter.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.tks__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 10px;
  min-width: 240px;
  transition: border-color 0.25s ease;
}
.tks__search svg {
  color: rgba(15, 11, 72, 0.45);
  flex-shrink: 0;
}
.tks__search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  font-weight: 500;
  color: #0f0b48;
}
.tks__search input::placeholder {
  color: rgba(15, 11, 72, 0.4);
}
.tks__search:focus-within {
  border-color: rgba(91, 82, 240, 0.45);
}
.tks__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tks__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tks__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.55));
}
.tks__card:hover {
  transform: translateX(-3px);
  border-color: rgba(var(--c, 91, 82, 240), 0.25);
  box-shadow: 0 12px 28px rgba(15, 11, 72, 0.1);
}
.tks__card:hover .tks__card-arrow {
  transform: translateX(-4px);
  color: rgb(var(--c, 91, 82, 240));
}
.tks__card.is-unread {
  background: linear-gradient(180deg, #fff 0%, rgba(var(--c, 91, 82, 240), 0.04) 100%);
  border-color: rgba(var(--c, 91, 82, 240), 0.28);
}
.tks__card.is-unread .tks__card-title {
  color: #0f0b48;
  font-weight: 900;
}
.tks__card.is-closed {
  background: rgba(15, 11, 72, 0.025);
}
.tks__card.is-closed .tks__card-title {
  color: rgba(15, 11, 72, 0.75);
}
.tks__card-pill {
  position: absolute;
  top: 12px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45);
  z-index: 2;
}
.tks__card-pill-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: t-dot-pulse 1.4s ease-in-out infinite;
}
.tks__card-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.tks__card-code {
  flex-shrink: 0;
  padding: 6px 10px;
  background: rgba(var(--c, 91, 82, 240), 0.1);
  color: rgb(var(--c, 91, 82, 240));
  font-size: 11px;
  font-weight: 900;
  border-radius: 8px;
  letter-spacing: 0.2px;
  direction: ltr;
}
.tks__card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tks__card-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tks__card-preview {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tks__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.tks__card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tks__card-meta strong {
  color: #0f0b48;
  font-weight: 800;
}
.tks__card-priority {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
}
.tks__card-priority--high {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.tks__card-priority--high svg {
  color: #ef4444;
}
.tks__card-rating {
  color: #f59e0b !important;
}
.tks__card-rating svg {
  color: #f59e0b;
}
.tks__card-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tks__card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.tks__card-status--waiting {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.tks__card-status--progress {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
}
.tks__card-status--progress svg {
  animation: t-spin 2.2s linear infinite;
}
.tks__card-status--closed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.tks__card-status-dot {
  width: 6px;
  height: 6px;
  background: #d97706;
  border-radius: 50%;
  animation: t-dot-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px #d97706;
}
.tks__card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.tks__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.tks__page, .tks__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.7);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tks__page:hover, .tks__page-btn:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.tks__page.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.35);
}

[data-theme=dark] .tks__header, [data-theme=dark] .tks__stat, [data-theme=dark] .tks__filter, [data-theme=dark] .tks__search, [data-theme=dark] .tks__card, [data-theme=dark] .tks__page, [data-theme=dark] .tks__page-btn {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .tks__header h1 {
  color: #fff;
}
[data-theme=dark] .tks__header p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .tks__stat strong {
  color: #fff;
}
[data-theme=dark] .tks__stat span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .tks__filter {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .tks__filter span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .tks__search input {
  color: #fff;
}
[data-theme=dark] .tks__search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .tks__card-title {
  color: #fff;
}
[data-theme=dark] .tks__card-preview {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .tks__card-meta {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .tks__card-meta strong {
  color: #fff;
}
[data-theme=dark] .tks__card-arrow {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .tks__card.is-unread {
  background: linear-gradient(180deg, #13112a 0%, rgba(var(--c, 91, 82, 240), 0.1) 100%);
  border-color: rgba(var(--c, 91, 82, 240), 0.35);
}
[data-theme=dark] .tks__card.is-closed {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme=dark] .tks__card.is-closed .tks__card-title {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .tks__page, [data-theme=dark] .tks__page-btn {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .tks__page.is-active {
  color: #fff;
}

@media (max-width: 767px) {
  .tks {
    gap: 12px;
  }
  .tks__header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(236, 72, 153, 0.04) 50%, #fff 100%);
  }
  .tks__header h1 {
    font-size: 16px;
  }
  .tks__new-btn {
    width: 100%;
    justify-content: center;
    font-size: 11.5px;
    padding: 10px 14px;
  }
  .tks__stats {
    gap: 8px;
  }
  .tks__stat {
    padding: 10px 8px;
    min-width: 0;
  }
  .tks__stat strong {
    font-size: 16px;
  }
  .tks__stat span {
    font-size: 9.5px;
  }
  .tks__toolbar {
    gap: 10px;
  }
  .tks__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
    gap: 6px;
  }
  .tks__filters::-webkit-scrollbar {
    display: none;
  }
  .tks__filter {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
  }
  .tks__filter span {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .tks__search {
    min-width: 0;
    width: 100%;
    padding: 9px 12px;
  }
  .tks__card {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 14px;
  }
  .tks__card-pill {
    position: static !important;
    align-self: flex-start;
    font-size: 9px;
    padding: 3px 9px;
  }
  .tks__card-main {
    gap: 10px;
    align-items: flex-start;
  }
  .tks__card-code {
    font-size: 10px;
    padding: 3px 8px;
    flex-shrink: 0;
  }
  .tks__card-title {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 4px;
  }
  .tks__card-preview {
    font-size: 10.5px;
    line-height: 1.6;
    -webkit-line-clamp: 2;
    margin-bottom: 6px;
  }
  .tks__card-meta {
    font-size: 9.5px;
    gap: 3px 10px;
  }
  .tks__card-meta svg {
    width: 10px;
    height: 10px;
  }
  .tks__card-priority {
    font-size: 9px;
    padding: 1px 6px;
  }
  .tks__card-side {
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 11, 72, 0.08);
  }
  .tks__card-status {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .tks__card-arrow svg {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 991px) {
  .tks__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .tks__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .tks__search {
    min-width: 0;
  }
}
@media (max-width: 576px) {
  .tks__header {
    padding: 16px;
    gap: 12px;
  }
  .tks__header h1 {
    font-size: 16px;
  }
  .tks__card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 10px;
  }
  .tks__card-main {
    gap: 10px;
  }
  .tks__card-title {
    font-size: 12.5px;
  }
  .tks__card-side {
    align-self: flex-end;
  }
  .tks__card-pill {
    top: 10px;
    left: 14px;
  }
}
.back-panel, .recent-ticket-btn {
  display: none;
}

@keyframes tk-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
@keyframes tk-new-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
  }
}
.ticket {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(15, 11, 72, 0.06);
  overflow: hidden;
  min-height: 600px;
}
.ticket__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.06);
  background: linear-gradient(180deg, rgba(91, 82, 240, 0.04) 0%, #fff 100%);
}
.ticket__back {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.ticket__back:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.25);
}
.ticket__header-info {
  flex: 1;
  min-width: 0;
}
.ticket__header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ticket__code {
  padding: 4px 10px;
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  font-size: 11px;
  font-weight: 900;
  border-radius: 7px;
  direction: ltr;
  flex-shrink: 0;
}
.ticket__title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ticket__status--waiting {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.ticket__status--progress {
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
}
.ticket__status--closed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.ticket__status-dot {
  width: 6px;
  height: 6px;
  background: #d97706;
  border-radius: 50%;
  animation: tk-dot-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px #d97706;
}
.ticket__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.ticket__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ticket__meta-priority {
  padding: 2px 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444 !important;
  border-radius: 5px;
  font-weight: 800;
}
.ticket__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ticket__icon-btn:hover {
  background: #10b981;
  color: #fff;
  border-color: transparent;
}
.ticket__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: radial-gradient(ellipse at top right, rgba(91, 82, 240, 0.04) 0%, transparent 60%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.03) 0%, transparent 60%), #fafafd;
}
.ticket__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.ticket__divider::before, .ticket__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15, 11, 72, 0.08);
}
.ticket__divider span {
  padding: 3px 12px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  white-space: nowrap;
}
.ticket__msg {
  display: flex;
  gap: 10px;
  max-width: 78%;
}
.ticket__msg--user {
  align-self: flex-start;
  flex-direction: row;
}
.ticket__msg--user .ticket__msg-wrap {
  align-items: flex-start;
}
.ticket__msg--user .ticket__msg-bubble {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  border-top-right-radius: 4px;
  border: none;
}
.ticket__msg--user .ticket__msg-bubble p {
  color: #fff;
}
.ticket__msg--user .ticket__msg-bubble a {
  color: #fff;
  text-decoration: underline;
}
.ticket__msg--user .ticket__msg-bubble strong {
  color: #fff;
}
.ticket__msg--user .ticket__msg-seen {
  color: rgba(255, 255, 255, 0.85);
}
.ticket__msg--user .ticket__msg-head strong {
  color: #0f0b48;
}
.ticket__msg--admin {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.ticket__msg--admin .ticket__msg-wrap {
  align-items: flex-end;
}
.ticket__msg--admin .ticket__msg-head {
  flex-direction: row-reverse;
}
.ticket__msg--admin .ticket__msg-bubble {
  background: #fff;
  color: #0f0b48;
  border: 1px solid rgba(15, 11, 72, 0.07);
  border-top-left-radius: 4px;
}
.ticket__msg--admin .ticket__msg-bubble p {
  color: #0f0b48;
}
.ticket__msg--admin .ticket__msg-bubble strong {
  color: #0f0b48;
}
.ticket__msg--admin .ticket__msg-head strong {
  color: #059669;
}
.ticket__msg--admin.is-new .ticket__msg-bubble--highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(91, 82, 240, 0.06));
  border-color: rgba(16, 185, 129, 0.3);
  animation: tk-new-glow 1.8s ease-out infinite;
}
.ticket__msg-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(91, 82, 240, 0.35);
}
.ticket__msg-avatar--admin {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}
.ticket__msg-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ticket__msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.ticket__msg-head strong {
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ticket__msg-head > span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.ticket__msg-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}
.ticket__msg-new-badge {
  padding: 2px 7px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.ticket__msg-bubble {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.85;
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 11, 72, 0.06);
}
.ticket__msg-bubble p {
  margin: 0;
}
.ticket__msg-bubble p + p {
  margin-top: 8px;
}
.ticket__msg-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.ticket__msg-seen {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
}
.ticket__msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(15, 11, 72, 0.04);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.ticket__msg-file:hover {
  background: rgba(91, 82, 240, 0.08);
  border-color: rgba(91, 82, 240, 0.25);
}
.ticket__msg-file-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(91, 82, 240, 0.12);
  color: #5b52f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ticket__msg-file-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ticket__msg-file-body strong {
  font-size: 11.5px;
  font-weight: 800;
  color: #0f0b48;
}
.ticket__msg-file-body small {
  font-size: 10px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.ticket__msg-file-dl {
  color: #5b52f0;
  flex-shrink: 0;
}
.ticket__msg-image {
  display: block;
  margin-top: 8px;
  max-width: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.ticket__msg-image img {
  display: block;
  width: 100%;
  height: auto;
}
.ticket__composer {
  background: #fff;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
  padding: 14px 16px;
}
.ticket__composer-top {
  padding: 10px 14px;
  background: rgba(15, 11, 72, 0.03);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ticket__composer-top:focus-within {
  background: #fff;
  border-color: rgba(91, 82, 240, 0.4);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.08);
}
.ticket__composer-top textarea {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  padding: 4px 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #0f0b48;
  resize: none;
  line-height: 1.8;
}
.ticket__composer-top textarea::placeholder {
  color: rgba(15, 11, 72, 0.4);
  font-weight: 500;
}
.ticket__composer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.ticket__composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ticket__composer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(15, 11, 72, 0.04);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
}
.ticket__composer-tool:hover {
  background: rgba(91, 82, 240, 0.1);
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.22);
}
.ticket__composer-hint {
  font-size: 10.5px;
  color: rgba(15, 11, 72, 0.4);
  margin-right: 6px;
}
.ticket__composer-hint kbd {
  padding: 1px 5px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: inherit;
  color: rgba(15, 11, 72, 0.7);
}
.ticket__composer-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(91, 82, 240, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ticket__composer-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 82, 240, 0.5);
}
.ticket__composer-send svg {
  transition: transform 0.3s ease;
}
.ticket__composer-send:hover svg {
  transform: translateX(-3px);
}

[data-theme=dark] .ticket {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .ticket__header {
  background: linear-gradient(180deg, rgba(91, 82, 240, 0.1) 0%, #13112a 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .ticket__back {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .ticket__title {
  color: #fff;
}
[data-theme=dark] .ticket__meta {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .ticket__body {
  background: radial-gradient(ellipse at top right, rgba(91, 82, 240, 0.12) 0%, transparent 60%), radial-gradient(ellipse at bottom left, rgba(236, 72, 153, 0.08) 0%, transparent 60%), #0e0c26;
}
[data-theme=dark] .ticket__divider::before, [data-theme=dark] .ticket__divider::after {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ticket__divider span {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .ticket__msg-head strong {
  color: #fff;
}
[data-theme=dark] .ticket__msg-head > span {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ticket__msg--user .ticket__msg-head strong {
  color: #fff;
}
[data-theme=dark] .ticket__msg--admin .ticket__msg-head strong {
  color: #6ee7b7;
}
[data-theme=dark] .ticket__msg--admin .ticket__msg-bubble {
  background: #1a1740;
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
[data-theme=dark] .ticket__msg--admin .ticket__msg-bubble p {
  color: rgba(255, 255, 255, 0.85);
}
[data-theme=dark] .ticket__msg--admin .ticket__msg-bubble strong {
  color: #fff;
}
[data-theme=dark] .ticket__msg--admin.is-new .ticket__msg-bubble--highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(91, 82, 240, 0.15));
  border-color: rgba(16, 185, 129, 0.4);
}
[data-theme=dark] .ticket__msg-file {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ticket__msg-file-body strong {
  color: #fff;
}
[data-theme=dark] .ticket__msg-file-body small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .ticket__composer {
  background: #13112a;
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ticket__composer-top {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .ticket__composer-top:focus-within {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .ticket__composer-top textarea {
  color: #fff;
}
[data-theme=dark] .ticket__composer-top textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .ticket__composer-tool {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .ticket__composer-hint {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .ticket__composer-hint kbd {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
  .ticket {
    min-height: 500px;
    border-radius: 14px;
  }
  .ticket__header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 14px;
    align-items: center;
    background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(236, 72, 153, 0.03) 100%);
  }
  .ticket__back {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .ticket__back svg {
    width: 13px;
    height: 13px;
  }
  .ticket__header-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .ticket__header-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .ticket__icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .ticket__icon-btn svg {
    width: 12px;
    height: 12px;
  }
  .ticket__header-row {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 3px;
  }
  .ticket__code {
    font-size: 10px;
    padding: 2px 8px;
  }
  .ticket__title {
    font-size: 12.5px;
    flex: 1 1 100%;
    order: 3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
  }
  .ticket__status {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .ticket__status svg, .ticket__status .ticket__status-dot {
    width: 5px;
    height: 5px;
  }
  .ticket__meta {
    font-size: 9.5px;
    gap: 2px 10px;
  }
  .ticket__meta svg {
    width: 10px;
    height: 10px;
  }
  .ticket__meta-priority {
    padding: 1px 6px;
    font-size: 9px;
  }
  .ticket__body {
    padding: 14px 12px;
    gap: 12px;
  }
  .ticket__divider {
    margin: 2px 0;
  }
  .ticket__divider span {
    font-size: 9.5px;
    padding: 2px 10px;
  }
  .ticket__msg {
    max-width: 94%;
    gap: 8px;
  }
  .ticket__msg-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 11.5px;
  }
  .ticket__msg-avatar svg {
    width: 14px;
    height: 14px;
  }
  .ticket__msg-head {
    gap: 6px;
    margin-bottom: 3px;
  }
  .ticket__msg-head strong {
    font-size: 11px;
  }
  .ticket__msg-head > span {
    font-size: 9.5px;
  }
  .ticket__msg-verified {
    font-size: 10px;
  }
  .ticket__msg-new-badge {
    font-size: 9px;
    padding: 1px 5px;
  }
  .ticket__msg-bubble {
    padding: 9px 11px;
    font-size: 11.5px;
    line-height: 1.75;
    border-radius: 12px;
  }
  .ticket__msg-bubble p {
    margin: 0;
  }
  .ticket__msg-file {
    padding: 7px 9px;
    gap: 8px;
    margin-top: 8px;
    border-radius: 9px;
  }
  .ticket__msg-file-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }
  .ticket__msg-file-ico svg {
    width: 13px;
    height: 13px;
  }
  .ticket__msg-file-body strong {
    font-size: 11px;
  }
  .ticket__msg-file-body small {
    font-size: 9.5px;
  }
  .ticket__msg-image {
    margin-top: 8px;
    border-radius: 10px;
  }
  .ticket__msg-image img {
    max-height: 180px;
  }
  .ticket__msg-meta {
    margin-top: 6px;
  }
  .ticket__msg-seen {
    font-size: 9.5px;
  }
  .ticket__composer {
    padding: 10px 12px;
  }
  .ticket__composer-top {
    padding: 8px 12px;
    border-radius: 10px;
  }
  .ticket__composer-top textarea {
    font-size: 12px;
    min-height: 40px;
  }
  .ticket__composer-bottom {
    margin-top: 8px;
    gap: 8px;
  }
  .ticket__composer-tools {
    gap: 5px;
  }
  .ticket__composer-tool {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .ticket__composer-tool svg {
    width: 13px;
    height: 13px;
  }
  .ticket__composer-hint {
    display: none;
  }
  .ticket__composer-send {
    padding: 9px 14px;
    font-size: 11.5px;
    border-radius: 10px;
  }
  .ticket__composer-send svg {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 420px) {
  .ticket__title {
    font-size: 12px;
  }
  .ticket__status {
    font-size: 9px;
  }
  .ticket__meta {
    font-size: 9px;
  }
  .ticket__msg-bubble {
    font-size: 11px;
  }
  .ticket__msg {
    max-width: 96%;
    gap: 6px;
  }
  .ticket__composer-send {
    padding: 8px 12px;
    font-size: 11px;
  }
  .ticket__composer-send svg {
    display: none;
  }
}
.aside-ticket {
  display: none;
}

.back-panel {
  display: none;
}

.recent-ticket-btn {
  display: none;
}

.tk-aside {
  position: sticky;
  top: 20px;
}
.tk-aside__back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #7c3aed;
  text-decoration: none;
  margin-bottom: 16px;
  transition: all 0.25s;
}
.tk-aside__back:hover {
  background: #f3f0ff;
  border-color: #c4b5fd;
}
.tk-aside__recent {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
  padding: 18px;
}
.tk-aside__title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tk-aside__title svg {
  color: #7c3aed;
}
.tk-aside__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-aside__item {
  display: block;
  padding: 12px 14px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s;
}
.tk-aside__item:hover {
  border-color: #c4b5fd;
  background: #f3f0ff;
}
.tk-aside__item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tk-aside__item-code {
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #f3f0ff;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace;
}
.tk-aside__item-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}
.tk-aside__item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-aside__item-meta span {
  font-size: 11px;
  color: #999;
}
.tk-aside__item-meta span strong {
  color: #666;
  font-weight: 600;
  margin-left: 4px;
}

@media (max-width: 992px) {
  .tk-aside__recent {
    display: none;
  }
  .recent-ticket-btn {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    background: #f3f0ff;
    border: 1.5px solid #f0ecf9;
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 14px;
    cursor: pointer;
    text-align: center;
  }
}
[data-theme=dark] .tk-aside__back {
  background: #1a1550;
  border-color: #1e1b4b;
  color: #a78bfa;
}
[data-theme=dark] .tk-aside__recent {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .tk-aside__title {
  color: #e0e0ff;
}
[data-theme=dark] .tk-aside__item {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .tk-aside__item:hover {
  background: #1a1550;
  border-color: #7c3aed;
}
[data-theme=dark] .tk-aside__item-title {
  color: #e0e0ff;
}
[data-theme=dark] .tk-aside__item-code {
  background: #1a1550;
  color: #a78bfa;
}
[data-theme=dark] .tk-aside__item-meta span {
  color: #5a5790;
}
[data-theme=dark] .tk-aside__item-meta span strong {
  color: #7b77c5;
}

.new-ticket {
  display: none;
}

.tk-form {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 20px;
  padding: 28px;
  overflow: hidden;
}
.tk-form__header {
  margin-bottom: 22px;
}
.tk-form__header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tk-form__header h2 svg {
  color: #7c3aed;
}
.tk-form__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.tk-form__field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
}
.tk-form__field select {
  width: 100%;
  height: 44px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.tk-form__field select:focus {
  outline: none;
  border-color: #8b5cf6;
}
.tk-form__message {
  margin-bottom: 18px;
}
.tk-form__message label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
}
.tk-form__message textarea {
  width: 100%;
  min-height: 140px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  padding: 16px;
  font-size: 14px;
  color: #333;
  resize: vertical;
  transition: all 0.25s;
}
.tk-form__message textarea::placeholder {
  color: #bbb;
}
.tk-form__message textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.tk-form__attach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f8f7fc;
  border: 1.5px dashed #e0daf5;
  border-radius: 14px;
  margin-bottom: 18px;
}
.tk-form__attach-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tk-form__attach-info svg {
  color: #c4b5fd;
  flex-shrink: 0;
}
.tk-form__attach-info strong {
  font-size: 13px;
  color: #333;
  display: block;
}
.tk-form__attach-info small {
  font-size: 11px;
  color: #999;
}
.tk-form__attach-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f0ff;
  border: 1.5px solid #e0daf5;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.25s;
}
.tk-form__attach-btn:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}
.tk-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}
.tk-form__submit svg {
  transition: transform 0.3s;
}
.tk-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}
.tk-form__submit:hover svg {
  transform: translateX(-3px);
}

@media (max-width: 768px) {
  .tk-form {
    padding: 20px 18px;
  }
  .tk-form__fields {
    grid-template-columns: 1fr;
  }
  .tk-form__attach {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .tk-form__attach-btn {
    width: 100%;
    justify-content: center;
  }
}
[data-theme=dark] .tk-form {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .tk-form__header h2 {
  color: #e0e0ff;
}
[data-theme=dark] .tk-form__field label {
  color: #5a5790;
}
[data-theme=dark] .tk-form__field select {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .tk-form__message label {
  color: #5a5790;
}
[data-theme=dark] .tk-form__message textarea {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .tk-form__message textarea::placeholder {
  color: #5a5790;
}
[data-theme=dark] .tk-form__message textarea:focus {
  border-color: #7c3aed;
}
[data-theme=dark] .tk-form__attach {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .tk-form__attach-info strong {
  color: #e0e0ff;
}
[data-theme=dark] .tk-form__attach-btn {
  background: #1a1550;
  border-color: #1e1b4b;
  color: #a78bfa;
}

.panel-setting {
  display: none;
}

.pf-settings {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 20px;
  padding: 28px;
}
.pf-settings__header {
  margin-bottom: 24px;
}
.pf-settings__header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-settings__header h2 svg {
  color: #7c3aed;
}
.pf-settings__avatar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #f0ecf9;
}
.pf-settings__avatar-img {
  position: relative;
  width: 72px;
  height: 72px;
}
.pf-settings__avatar-img img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #f0ecf9;
  object-fit: cover;
}
.pf-settings__avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  color: #fff;
  transition: all 0.2s;
}
.pf-settings__avatar-edit:hover {
  transform: scale(1.1);
}
.pf-settings__avatar strong {
  font-size: 16px;
  color: #111;
  display: block;
  margin-bottom: 2px;
}
.pf-settings__avatar span {
  font-size: 12px;
  color: #999;
}
.pf-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.pf-settings__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 6px;
}
.pf-settings__input {
  position: relative;
}
.pf-settings__input input {
  width: 100%;
  height: 48px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 0 44px 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  transition: all 0.25s;
}
.pf-settings__input input::placeholder {
  color: #bbb;
}
.pf-settings__input input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.pf-settings__input input[readonly] {
  color: #555;
  cursor: default;
}
.pf-settings__input > svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4b5fd;
  pointer-events: none;
}
.pf-settings__input--verified input {
  padding-left: 110px;
}
.pf-settings__verified {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 8px;
}
.pf-settings__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  height: 48px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.2);
}
.pf-settings__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.3);
}

@media (max-width: 768px) {
  .pf-settings {
    padding: 20px 18px;
  }
  .pf-settings__grid {
    grid-template-columns: 1fr;
  }
  .pf-settings__avatar {
    gap: 14px;
  }
  .pf-settings__avatar-img {
    width: 60px;
    height: 60px;
  }
  .pf-settings__avatar-img img {
    width: 60px;
    height: 60px;
  }
  .pf-settings__avatar strong {
    font-size: 14px;
  }
  .pf-settings__submit {
    max-width: 100%;
  }
}
[data-theme=dark] .pf-settings {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .pf-settings__header h2 {
  color: #e0e0ff;
}
[data-theme=dark] .pf-settings__avatar {
  border-color: #1e1b4b;
}
[data-theme=dark] .pf-settings__avatar strong {
  color: #e0e0ff;
}
[data-theme=dark] .pf-settings__avatar span {
  color: #5a5790;
}
[data-theme=dark] .pf-settings__avatar img {
  border-color: #1e1b4b;
}
[data-theme=dark] .pf-settings__field label {
  color: #5a5790;
}
[data-theme=dark] .pf-settings__input input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .pf-settings__input input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .pf-settings__input input:focus {
  border-color: #7c3aed;
}
[data-theme=dark] .pf-settings__input input[readonly] {
  color: #7b77c5;
}
[data-theme=dark] .pf-settings__input > svg {
  color: #5a5790;
}
[data-theme=dark] .pf-settings__verified {
  background: #0a2620;
  border-color: #0f3d2e;
  color: #34d399;
}

.profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile__hero {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3b1577 0%, #5b52f0 55%, #ec4899 110%);
  color: #fff;
  box-shadow: 0 14px 36px rgba(91, 82, 240, 0.28);
  isolation: isolate;
}
.profile__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.profile__hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.profile__hero-blob--a {
  top: -60px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.2);
}
.profile__hero-blob--b {
  bottom: -100px;
  left: -40px;
  width: 240px;
  height: 240px;
  background: rgba(236, 72, 153, 0.45);
}
.profile__hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.profile__avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  flex-shrink: 0;
}
.profile__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.profile__avatar-edit {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #5b52f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
}
.profile__avatar-edit:hover {
  transform: scale(1.1);
}
.profile__avatar-verified {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.5);
}
.profile__hero-body {
  flex: 1;
  min-width: 0;
}
.profile__hero-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.profile__hero-vip {
  padding: 2px 8px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #7c2d12;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.5);
}
.profile__hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.profile__hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.profile__hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}
.profile__score-ring {
  position: relative;
  width: 66px;
  height: 66px;
}
.profile__score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.profile__score-ring circle {
  fill: none;
  stroke-width: 3;
  cx: 18;
  cy: 18;
  r: 15.9;
}
.profile__score-track {
  stroke: rgba(255, 255, 255, 0.2);
}
.profile__score-progress {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 100, 100;
  stroke-dashoffset: calc(100 - var(--score, 0));
  transition: stroke-dashoffset 0.8s ease;
}
.profile__score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.profile__score-value small {
  font-size: 9px;
  font-weight: 700;
  margin-right: 1px;
}
.profile__score-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
}
.profile__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15, 11, 72, 0.04);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile__tabs::-webkit-scrollbar {
  display: none;
}
.profile__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.profile__tab svg {
  opacity: 0.7;
}
.profile__tab:hover {
  color: #0f0b48;
}
.profile__tab:hover svg {
  opacity: 1;
}
.profile__tab.is-active {
  background: #fff;
  color: #5b52f0;
  box-shadow: 0 3px 10px rgba(15, 11, 72, 0.1);
}
.profile__tab.is-active svg {
  opacity: 1;
  color: #5b52f0;
}
.profile__panel {
  display: none;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.profile__panel.is-active {
  display: block;
}
.profile__panel-head {
  margin-bottom: 18px;
}
.profile__panel-head h2 {
  font-size: 15px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
}
.profile__panel-head p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
}
.profile__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.profile__grid--hidden {
  margin-top: 14px;
}
.profile__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile__field label {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
}
.profile__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(15, 11, 72, 0.03);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 11px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.profile__input > svg:first-child {
  color: rgba(15, 11, 72, 0.45);
  flex-shrink: 0;
}
.profile__input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f0b48;
}
.profile__input input::placeholder {
  color: rgba(15, 11, 72, 0.35);
  font-weight: 500;
}
.profile__input input:read-only {
  cursor: not-allowed;
  color: rgba(15, 11, 72, 0.7);
}
.profile__input:focus-within {
  background: #fff;
  border-color: rgba(91, 82, 240, 0.45);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.08);
}
.profile__input--locked {
  background: rgba(15, 11, 72, 0.02);
  border-style: dashed;
}
.profile__input--locked:focus-within {
  box-shadow: none;
  border-color: rgba(15, 11, 72, 0.15);
}
.profile__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile__form-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(15, 11, 72, 0.1);
}
.profile__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.profile__btn--primary {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  box-shadow: 0 6px 16px rgba(91, 82, 240, 0.35);
}
.profile__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.5);
  color: #fff;
}
.profile__btn--primary-outline {
  background: transparent;
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.35);
}
.profile__btn--primary-outline:hover {
  background: #5b52f0;
  color: #fff;
  border-color: transparent;
}
.profile__btn--ghost {
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.7);
}
.profile__btn--ghost:hover {
  background: rgba(15, 11, 72, 0.09);
  color: #0f0b48;
}
.profile__btn--ghost-sm {
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.15);
}
.profile__btn--ghost-sm:hover {
  background: #5b52f0;
  color: #fff;
  border-color: transparent;
}
.profile__btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}
.profile__btn--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.5);
  color: #fff;
}
.profile__btn--danger-ghost {
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.18);
}
.profile__btn--danger-ghost:hover {
  background: #ef4444;
  color: #fff;
  border-color: transparent;
}
.profile__card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.profile__card:hover {
  border-color: rgba(91, 82, 240, 0.2);
  box-shadow: 0 6px 16px rgba(15, 11, 72, 0.06);
}
.profile__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile__card-head > div {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.profile__card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
}
.profile__card-head p {
  font-size: 11px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.profile__card-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.35);
}
.profile__pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.profile__pill--on {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}
.profile__pill--off {
  background: rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.55);
}
.profile__pill--new {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
}
.profile__switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.profile__switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.profile__switch span {
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 72, 0.15);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.profile__switch span::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}
.profile__switch input:checked + span {
  background: linear-gradient(135deg, #10b981, #16a34a);
}
.profile__switch input:checked + span::before {
  transform: translateX(-18px);
}
.profile__connections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile__conn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.profile__conn:hover {
  border-color: rgba(91, 82, 240, 0.2);
  box-shadow: 0 6px 16px rgba(15, 11, 72, 0.06);
}
.profile__conn.is-connected {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.03);
}
.profile__conn-logo {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 11, 72, 0.06);
  box-shadow: 0 3px 10px rgba(15, 11, 72, 0.1);
}
.profile__conn-body {
  flex: 1;
  min-width: 0;
}
.profile__conn-body h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
}
.profile__conn-body p {
  font-size: 11px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.profile__sessions {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile__session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.05);
  border-radius: 11px;
}
.profile__session.is-current {
  background: rgba(91, 82, 240, 0.05);
  border-color: rgba(91, 82, 240, 0.2);
}
.profile__session-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile__session-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.profile__session-body strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
}
.profile__session-body span {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.profile__sessions-foot {
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 11, 72, 0.1);
}
.profile__danger {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile__danger-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 12px;
}
.profile__danger-item h3 {
  font-size: 13px;
  font-weight: 800;
  color: #ef4444;
  margin: 0 0 2px;
}
.profile__danger-item p {
  font-size: 11px;
  color: rgba(15, 11, 72, 0.6);
  margin: 0;
}

[data-theme=dark] .profile__tabs {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .profile__tab {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .profile__tab:hover {
  color: #fff;
}
[data-theme=dark] .profile__tab.is-active {
  background: #1a1740;
  color: #c4b5fd;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .profile__panel {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .profile__panel-head h2 {
  color: #fff;
}
[data-theme=dark] .profile__panel-head p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .profile__field label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .profile__input {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .profile__input input {
  color: #fff;
}
[data-theme=dark] .profile__input input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme=dark] .profile__input:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(91, 82, 240, 0.45);
}
[data-theme=dark] .profile__input--locked {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme=dark] .profile__form-actions, [data-theme=dark] .profile__sessions-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .profile__card, [data-theme=dark] .profile__conn, [data-theme=dark] .profile__session {
  background: #1a1740;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .profile__card-head h3, [data-theme=dark] .profile__card h3, [data-theme=dark] .profile__conn-head h3, [data-theme=dark] .profile__conn h3, [data-theme=dark] .profile__session-head h3, [data-theme=dark] .profile__session h3 {
  color: #fff;
}
[data-theme=dark] .profile__card p, [data-theme=dark] .profile__card-body span, [data-theme=dark] .profile__conn p, [data-theme=dark] .profile__conn-body span, [data-theme=dark] .profile__session p, [data-theme=dark] .profile__session-body span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .profile__card-body strong, [data-theme=dark] .profile__conn-body strong, [data-theme=dark] .profile__session-body strong {
  color: #fff;
}
[data-theme=dark] .profile__session.is-current {
  background: rgba(91, 82, 240, 0.15);
  border-color: rgba(91, 82, 240, 0.4);
}
[data-theme=dark] .profile__conn.is-connected {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme=dark] .profile__pill--off {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .profile__switch span {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .profile__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .profile__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
[data-theme=dark] .profile__danger-item {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.28);
}
[data-theme=dark] .profile__danger-item p {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .profile__hero {
    padding: 18px 20px;
  }
  .profile__hero-main {
    gap: 12px;
  }
  .profile__hero-score {
    margin-right: 0;
    margin-top: 4px;
  }
  .profile__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .profile__tabs {
    gap: 2px;
    padding: 3px;
  }
  .profile__tab {
    padding: 8px 10px;
    font-size: 11px;
  }
  .profile__panel {
    padding: 16px 18px;
  }
  .profile__card-head > div {
    font-size: 12px;
  }
  .profile__card-head h3 {
    font-size: 12.5px;
  }
  .profile__conn {
    gap: 10px;
    padding: 12px;
  }
  .profile__conn-body h3 {
    font-size: 12.5px;
  }
  .profile__danger-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}
@keyframes l-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
.license {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.license__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
}
.license__header-left {
  flex: 1;
  min-width: 0;
}
.license__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.license__header h1 {
  font-size: 17px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 3px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.license__header p {
  font-size: 12px;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.license__stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.license__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  min-width: 60px;
  background: rgba(var(--c, 91, 82, 240), 0.08);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
  border-radius: 10px;
  line-height: 1.2;
}
.license__stat strong {
  font-size: 16px;
  font-weight: 900;
  color: rgb(var(--c, 91, 82, 240));
  direction: ltr;
}
.license__stat span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  margin-top: 2px;
}
.license__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.license__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
}
.license__filter span {
  padding: 1px 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.55);
}
.license__filter:hover {
  border-color: rgba(91, 82, 240, 0.3);
  color: #5b52f0;
}
.license__filter.is-active {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91, 82, 240, 0.35);
}
.license__filter.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.license__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.license__card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 11, 72, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.license__card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.5));
}
.license__card:hover {
  border-color: rgba(var(--c, 91, 82, 240), 0.25);
  box-shadow: 0 10px 24px rgba(15, 11, 72, 0.1);
}
.license__card.is-expired::before {
  background: rgba(15, 11, 72, 0.15);
}
.license__card.is-expired {
  opacity: 0.85;
}
.license__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  cursor: pointer;
}
.license__card-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--c, 91, 82, 240), 0.1), rgba(var(--c, 91, 82, 240), 0.04));
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.15);
  box-shadow: 0 4px 12px rgba(var(--c, 91, 82, 240), 0.18);
}
.license__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.license__card-title-wrap {
  flex: 1;
  min-width: 0;
}
.license__card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.license__card-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.license__card-sub span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.license__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.license__badge--active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.license__badge--warning {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.license__badge--expired {
  background: rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.55);
}
.license__badge--delivered {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
}
.license__gift {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(236, 72, 153, 0.05));
  border: 1px dashed rgba(var(--c, 59, 130, 246), 0.35);
  border-radius: 12px;
  position: relative;
}
.license__gift::before, .license__gift::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px dashed rgba(var(--c, 59, 130, 246), 0.35);
  border-radius: 50%;
  transform: translateY(-50%);
}
.license__gift::before {
  right: -7px;
}
.license__gift::after {
  left: -7px;
}
.license__gift-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.license__gift-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.7);
}
.license__gift-chip svg {
  color: rgb(var(--c, 59, 130, 246));
}
.license__gift-region {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}
.license__gift-code {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 12px;
  background: #fff;
  border: 1px solid rgba(var(--c, 59, 130, 246), 0.25);
  border-radius: 10px;
}
.license__gift-code input {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}
.license__gift-code input[type=password] {
  letter-spacing: 3px;
}
.license__badge-dot {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: l-dot-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px #16a34a;
}
.license__toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 9px;
  color: rgba(15, 11, 72, 0.6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.license__toggle svg {
  transition: transform 0.25s ease;
}
.license__toggle:hover {
  background: rgba(91, 82, 240, 0.08);
  color: #5b52f0;
  border-color: rgba(91, 82, 240, 0.2);
}
.license__toggle[aria-expanded=true] svg {
  transform: rotate(-180deg);
}
.license__card-body {
  display: none;
  padding: 0 18px 18px 18px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
  animation: l-fade-in 0.25s ease;
}
.license__card.is-open .license__card-body {
  display: block;
}
@keyframes l-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.license__timer {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(var(--c, 91, 82, 240), 0.05);
  border: 1px solid rgba(var(--c, 91, 82, 240), 0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.license__timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.license__timer-row--warranty {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
}
.license__timer-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
}
.license__timer-label svg {
  color: rgb(var(--c, 91, 82, 240));
  opacity: 0.9;
}
.license__timer-row strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #0f0b48;
  direction: ltr;
}
.license__timer-row strong small {
  font-size: 10px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.5);
  margin-right: 3px;
}
.license__timer-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.license__timer-bar span {
  display: block;
  height: 100%;
  width: var(--p, 0);
  background: linear-gradient(90deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.7));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(var(--c, 91, 82, 240), 0.4);
  transition: width 0.6s ease;
}
.license__timer-warranty {
  color: #059669 !important;
}
.license__creds {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(15, 11, 72, 0.025);
  border: 1px solid rgba(15, 11, 72, 0.05);
  border-radius: 12px;
}
.license__section-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(15, 11, 72, 0.7);
  margin: 0 0 10px;
  letter-spacing: 0.2px;
}
.license__section-title svg {
  color: #5b52f0;
}
.license__cred {
  margin-bottom: 8px;
}
.license__cred:last-of-type {
  margin-bottom: 0;
}
.license__cred label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  margin-bottom: 4px;
}
.license__cred-value {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 10px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 9px;
}
.license__cred-value input {
  flex: 1;
  min-width: 0;
  padding: 7px 4px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f0b48;
  cursor: text;
}
.license__icon-btn {
  width: 28px;
  height: 28px;
  background: rgba(91, 82, 240, 0.08);
  border: 1px solid rgba(91, 82, 240, 0.14);
  color: #5b52f0;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.license__icon-btn:hover {
  background: #5b52f0;
  color: #fff;
  border-color: transparent;
}
.license__cred-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #92400e;
}
.license__cred-warning svg {
  color: #d97706;
  flex-shrink: 0;
  margin-top: 3px;
}
.license__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.license__action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 11px;
  text-decoration: none;
  color: #0f0b48;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.license__action:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--c, 91, 82, 240), 0.35);
  box-shadow: 0 8px 20px rgba(var(--c, 91, 82, 240), 0.15);
  color: #0f0b48;
}
.license__action:hover .license__action-ico {
  transform: scale(1.06);
}
.license__action-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--c, 91, 82, 240)), rgba(var(--c, 91, 82, 240), 0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
  box-shadow: 0 3px 10px rgba(var(--c, 91, 82, 240), 0.3);
}
.license__action-body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.license__action-body strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f0b48;
}
.license__action-body small {
  font-size: 10px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
}
.license__foot {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15, 11, 72, 0.08);
  flex-wrap: wrap;
}
.license__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}
.license__btn--primary {
  background: linear-gradient(135deg, #5b52f0, #ec4899);
  color: #fff;
  box-shadow: 0 6px 16px rgba(91, 82, 240, 0.35);
}
.license__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(91, 82, 240, 0.5);
  color: #fff;
}
.license__btn--ghost {
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.75);
  border-color: rgba(15, 11, 72, 0.08);
}
.license__btn--ghost:hover {
  background: rgba(15, 11, 72, 0.09);
  color: #0f0b48;
}
.license__btn--sm {
  padding: 7px 14px;
  font-size: 11px;
}

[data-theme=dark] .license__header, [data-theme=dark] .license__card, [data-theme=dark] .license__filter {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .license__header h1 {
  color: #fff;
}
[data-theme=dark] .license__header p {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__stat span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__filter {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .license__filter span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .license__card-title {
  color: #fff;
}
[data-theme=dark] .license__card-sub {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__card-body {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .license__badge--expired {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__timer {
  background: rgba(var(--c, 91, 82, 240), 0.1);
  border-color: rgba(var(--c, 91, 82, 240), 0.22);
}
[data-theme=dark] .license__timer-label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .license__timer-row strong {
  color: #fff;
}
[data-theme=dark] .license__timer-row strong small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .license__timer-row--warranty {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__timer-bar {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__creds {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .license__section-title {
  color: rgba(255, 255, 255, 0.75);
}
[data-theme=dark] .license__cred label {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .license__cred-value {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__cred-value input {
  color: #fff;
}
[data-theme=dark] .license__cred-warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}
[data-theme=dark] .license__gift {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(236, 72, 153, 0.1));
  border-color: rgba(var(--c, 59, 130, 246), 0.45);
}
[data-theme=dark] .license__gift::before, [data-theme=dark] .license__gift::after {
  background: #13112a;
  border-color: rgba(var(--c, 59, 130, 246), 0.45);
}
[data-theme=dark] .license__gift-chip {
  color: rgba(255, 255, 255, 0.8);
}
[data-theme=dark] .license__gift-region {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .license__gift-code {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(var(--c, 59, 130, 246), 0.45);
}
[data-theme=dark] .license__gift-code input {
  color: #fff;
}
[data-theme=dark] .license__action {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: #fff;
}
[data-theme=dark] .license__action-body strong {
  color: #fff;
}
[data-theme=dark] .license__action-body small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .license__foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .license__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (max-width: 767px) {
  .license {
    gap: 12px;
  }
  .license__header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(91, 82, 240, 0.04) 50%, #fff 100%);
  }
  .license__eyebrow {
    font-size: 10px;
    padding: 3px 10px;
    margin-bottom: 6px;
  }
  .license__header h1 {
    font-size: 16px;
  }
  .license__header p {
    font-size: 11px;
    line-height: 1.55;
  }
  .license__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .license__stat {
    padding: 10px 8px;
    min-width: 0;
    border-radius: 10px;
  }
  .license__stat strong {
    font-size: 17px;
  }
  .license__stat span {
    font-size: 10px;
  }
  .license__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px;
    gap: 6px;
  }
  .license__filters::-webkit-scrollbar {
    display: none;
  }
  .license__filter {
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 11px;
  }
  .license__filter span {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  .license__card {
    border-radius: 14px;
  }
  .license__card-head {
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
  }
  .license__card-logo {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    align-self: center;
  }
  .license__card-title-wrap {
    min-width: 0;
  }
  .license__card-title {
    font-size: 12.5px;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .license__badge {
    font-size: 9px;
    padding: 2px 7px;
  }
  .license__badge svg {
    width: 9px;
    height: 9px;
  }
  .license__card-sub {
    font-size: 9.5px;
    gap: 2px 8px;
  }
  .license__card-sub svg {
    display: none;
  }
  .license__toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    align-self: center;
  }
  .license__toggle svg {
    width: 14px;
    height: 14px;
  }
  .license__card-body {
    padding: 0 12px 12px;
  }
  .license__timer {
    padding: 10px 0;
  }
  .license__timer-row {
    font-size: 10.5px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .license__timer-label {
    font-size: 10px;
  }
  .license__timer-label svg {
    width: 11px;
    height: 11px;
  }
  .license__timer-row strong {
    font-size: 11px;
  }
  .license__timer-bar {
    height: 5px;
  }
  .license__creds {
    padding: 10px;
    border-radius: 10px;
  }
  .license__section-title {
    font-size: 10.5px;
  }
  .license__cred label {
    font-size: 10px;
    margin-bottom: 3px;
  }
  .license__cred-value {
    padding: 4px 4px 4px 8px;
  }
  .license__cred-value input {
    font-size: 11px;
    padding: 7px 4px;
  }
  .license__icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
  }
  .license__icon-btn svg {
    width: 12px;
    height: 12px;
  }
  .license__cred-warning {
    font-size: 9.5px;
    padding: 5px 9px;
    line-height: 1.55;
  }
  .license__gift {
    margin-top: 10px;
    padding: 10px 12px;
  }
  .license__gift-head {
    gap: 6px;
    margin-bottom: 8px;
  }
  .license__gift-chip {
    font-size: 10.5px;
  }
  .license__gift-region {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .license__gift-code input {
    font-size: 12px;
    padding: 7px 2px;
    letter-spacing: 1px;
  }
  .license__actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .license__foot {
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
  }
  .license__btn {
    justify-content: center;
    width: 100%;
    padding: 9px 12px;
    font-size: 11.5px;
    border-radius: 9px;
  }
  .license__card-head .license__btn, .license__btn--sm {
    width: auto;
    padding: 6px 10px;
    font-size: 10.5px;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
  }
  .license__card-head .license__btn svg, .license__btn--sm svg {
    width: 11px;
    height: 11px;
  }
}
@media (max-width: 380px) {
  .license__stat strong {
    font-size: 15px;
  }
  .license__stat span {
    font-size: 9px;
  }
  .license__card-title {
    font-size: 12px;
  }
  .license__card-sub {
    font-size: 9px;
  }
}
/* cart */
.basket-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 0 14px;
  flex-wrap: wrap;
}
.basket-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  color: #8a87a3;
  transition: all 0.25s ease;
}
.basket-steps__item.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.45);
}
.basket-steps__item.is-active .basket-steps__num {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.basket-steps__item.is-done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}
.basket-steps__item.is-done .basket-steps__num {
  background: #10b981;
  color: #fff;
}
.basket-steps__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f0ff;
  color: #7c3aed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.basket-steps__line {
  flex: 0 0 28px;
  height: 2px;
  background: #ebe6f5;
  border-radius: 2px;
}
.basket-steps__line.is-done {
  background: linear-gradient(90deg, #10b981, #059669);
}

[data-theme=dark] .basket-steps__item {
  background: #15123a;
  border-color: #2a2560;
  color: #8a87b3;
}
[data-theme=dark] .basket-steps__item.is-done {
  background: #0f2d28;
  border-color: #1f5e4a;
  color: #34d399;
}
[data-theme=dark] .basket-steps__num {
  background: #1a1648;
  color: #c4b5fd;
}
[data-theme=dark] .basket-steps__line {
  background: #2a2560;
}

@media (max-width: 576px) {
  .basket-steps {
    gap: 4px;
  }
  .basket-steps__item {
    padding: 6px 10px 6px 6px;
    font-size: 10.5px;
  }
  .basket-steps__item .basket-steps__label {
    display: none;
  }
  .basket-steps__item.is-active .basket-steps__label {
    display: inline;
  }
  .basket-steps__line {
    flex: 0 0 16px;
  }
}
.notification-cart {
  display: flex;
  align-items: center;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  padding: 23px 26px 25px 33px;
  margin-bottom: 10px;
}
.notification-cart__title {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding-left: 25px;
  margin-left: 24px;
  position: relative;
}
.notification-cart__title i {
  font-size: 22px;
  color: #f01919;
  margin-left: 12px;
}
.notification-cart__title:before {
  content: "";
  position: absolute;
  left: 0;
  top: -31px;
  bottom: -36px;
  border-left: 1px solid #dbdbdb;
}
.notification-cart__info {
  display: flex;
  flex-direction: column;
}
.notification-cart__info .notification-cart__info-desc {
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: 23px;
}
.notification-cart__info .notification-cart__info-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.notification-cart__info .notification-cart__info-button .link {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-left: 33px;
  transition: 0.3s;
  opacity: 1;
  padding: 0 10px;
  border-radius: 5px;
  background-color: #f31212;
  color: #fff;
}
.notification-cart__info .notification-cart__info-button .link i {
  font-size: 12px;
  margin-right: 9px;
}
.notification-cart__info .notification-cart__info-button .link:hover {
  opacity: 0.7;
}
.notification-cart__info .notification-cart__info-button .close {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  opacity: 1;
  transition: 0.3s;
}
.notification-cart__info .notification-cart__info-button .close i {
  font-size: 18px;
  color: #000000;
  margin-right: 11px;
  transition: 0.3s;
}
.notification-cart__info .notification-cart__info-button .close:hover {
  opacity: 0.7;
  color: #86615f;
}
.notification-cart__info .notification-cart__info-button .close:hover i {
  color: #86615f;
}

@media (max-width: 768px) {
  .notification-cart {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px 18px;
    gap: 12px;
  }
  .notification-cart__title {
    font-size: 15px;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
  }
  .notification-cart__title::before {
    display: none;
  }
  .notification-cart__info {
    width: 100%;
  }
  .notification-cart__info .notification-cart__info-desc {
    font-size: 12.5px;
    line-height: 24px;
    margin-bottom: 14px;
  }
  .notification-cart__info .notification-cart__info-button {
    justify-content: flex-start;
    gap: 10px;
  }
  .notification-cart__info .notification-cart__info-button .link {
    margin-left: 0;
    padding: 6px 14px;
    font-size: 12px;
  }
  .notification-cart__info .notification-cart__info-button .close {
    font-size: 12.5px;
  }
}
@media (max-width: 480px) {
  .notification-cart {
    padding: 14px;
  }
  .notification-cart__info .notification-cart__info-button {
    flex-direction: column;
    align-items: stretch;
  }
  .notification-cart__info .notification-cart__info-button .link, .notification-cart__info .notification-cart__info-button .close {
    justify-content: center;
    padding: 9px 14px;
    border-radius: 8px;
  }
  .notification-cart__info .notification-cart__info-button .close {
    background: #f5f5f5;
    border-radius: 8px;
  }
}
.basket-aside {
  position: sticky;
  top: 90px;
}
@media (max-width: 992px) {
  .basket-aside {
    position: static;
  }
}
.basket-aside__card {
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px -14px rgba(124, 58, 237, 0.12);
}
.basket-aside__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1.5px dashed #ebe6f5;
}
.basket-aside__head svg {
  color: #7c3aed;
}
.basket-aside__head h3 {
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
}
.basket-aside__rows {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.basket-aside__rows li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 12.5px;
  color: #6b6880;
  font-weight: 600;
  border-bottom: 1px dashed #f0ecf9;
}
.basket-aside__rows li:last-child {
  border-bottom: none;
}
.basket-aside__rows li strong {
  color: #1a1a2e;
  font-weight: 800;
  white-space: nowrap;
  direction: ltr;
}
.basket-aside__rows li strong small {
  font-size: 10px;
  color: #8a87a3;
  font-weight: 600;
  margin-right: 2px;
}
.basket-aside__rows-discount span em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #a5a2bd;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.6;
}
.basket-aside__rows-discount strong {
  color: #ef4444 !important;
}
.basket-aside__promo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 14px;
}
.basket-aside__promo-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.basket-aside__promo-field svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.basket-aside__promo-field input {
  flex: 1;
  width: 100%;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #1a1a2e;
  font-family: inherit;
}
.basket-aside__promo-field input::placeholder {
  color: #a5a2bd;
}
.basket-aside__promo-field input:focus {
  outline: none;
}
.basket-aside__promo-field:focus-within {
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.basket-aside__promo-btn {
  padding: 0 16px;
  height: 38px;
  background: #fff;
  border: 1.5px solid #ddd4f3;
  color: #7c3aed;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.basket-aside__promo-btn:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
.basket-aside__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 100%);
  border: 1.5px solid #ddd4f3;
  border-radius: 14px;
  margin-bottom: 12px;
}
.basket-aside__total span {
  font-size: 12.5px;
  font-weight: 700;
  color: #4a4664;
}
.basket-aside__total > div {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  direction: ltr;
}
.basket-aside__total > div strong {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.basket-aside__total > div small {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 700;
}
.basket-aside__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 22px -6px rgba(5, 150, 105, 0.4);
  margin-bottom: 14px;
}
.basket-aside__checkout svg {
  transition: transform 0.25s ease;
}
.basket-aside__checkout:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(5, 150, 105, 0.55);
}
.basket-aside__checkout:hover svg {
  transform: translateX(-3px);
}
.basket-aside__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.basket-aside__perks li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b6880;
}
.basket-aside__perks li svg {
  color: #10b981;
  flex-shrink: 0;
}

[data-theme=dark] .basket-aside__card {
  background: #15123a;
  border-color: #2a2560;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .basket-aside__head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .basket-aside__head h3 {
  color: #f1efff;
}
[data-theme=dark] .basket-aside__rows li {
  color: #b6b3d9;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .basket-aside__rows li strong {
  color: #f1efff;
}
[data-theme=dark] .basket-aside__rows li strong small {
  color: #8a87b3;
}
[data-theme=dark] .basket-aside__rows-discount span em {
  color: #5a5790;
}
[data-theme=dark] .basket-aside__promo-field {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .basket-aside__promo-field input {
  color: #f1efff;
}
[data-theme=dark] .basket-aside__promo-field input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .basket-aside__promo-field:focus-within {
  background: #1a1648;
}
[data-theme=dark] .basket-aside__promo-btn {
  background: #15123a;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .basket-aside__total {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 100%);
  border-color: #3d3485;
}
[data-theme=dark] .basket-aside__total span {
  color: #b6b3d9;
}
[data-theme=dark] .basket-aside__total > div strong {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .basket-aside__total > div small {
  color: #b6b3d9;
}
[data-theme=dark] .basket-aside__perks li {
  color: #b6b3d9;
}
[data-theme=dark] .basket-aside__perks li svg {
  color: #34d399;
}

.basket-gateway {
  margin: 12px 0;
  padding: 11px 12px;
  background: #fafafe;
  border: 1.5px solid #ece7f7;
  border-radius: 12px;
}
.basket-gateway__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.basket-gateway__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
}
.basket-gateway__title svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.basket-gateway__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.basket-gateway__hint svg {
  flex-shrink: 0;
}
.basket-gateway__wallet-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 9px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.03));
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 9px;
}
.basket-gateway__wallet-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
}
.basket-gateway__wallet-summary-label svg {
  color: #10b981;
  flex-shrink: 0;
}
.basket-gateway__wallet-summary-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 13px;
  font-weight: 900;
  color: #1a1a2e;
  direction: ltr;
  white-space: nowrap;
}
.basket-gateway__wallet-summary-amount em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}
.basket-gateway__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.basket-gateway__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-right: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 4px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.basket-gateway__combo-detail {
  display: none;
  margin-top: 7px;
  padding: 9px 11px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px dashed rgba(124, 58, 237, 0.3);
  border-radius: 9px;
  flex-direction: column;
  gap: 5px;
}
.basket-gateway__item--combo.is-checked .basket-gateway__combo-detail, .basket-gateway__item--combo input:checked ~ .basket-gateway__combo-detail {
  display: flex;
}
.basket-gateway__combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #4a4664;
}
.basket-gateway__combo-row strong {
  direction: ltr;
  font-size: 12.5px;
  font-weight: 900;
  color: #1a1a2e;
}
.basket-gateway__combo-row strong em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 3px;
}
.basket-gateway__combo-row--gateway strong {
  color: #7c3aed;
}
.basket-gateway__invoice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 11px;
  background: #fff;
  border: 1.5px solid #ece7f7;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.basket-gateway__invoice:hover {
  border-color: rgba(124, 58, 237, 0.35);
  background: #faf8ff;
}
.basket-gateway__invoice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.basket-gateway__invoice-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  border: 1.5px solid #ece7f7;
  color: transparent;
  background: #fff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
input:checked + .basket-gateway__invoice-box {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #7c3aed;
  color: #fff;
}
input:checked ~ .basket-gateway__invoice-text strong {
  color: #7c3aed;
}
.basket-gateway__invoice-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.basket-gateway__invoice-text strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
  transition: color 0.2s;
}
.basket-gateway__invoice-text small {
  font-size: 10px;
  font-weight: 500;
  color: #6b6880;
}
.basket-gateway__invoice-ico {
  color: rgba(124, 58, 237, 0.55);
  flex-shrink: 0;
}
.basket-gateway__item {
  display: block;
  cursor: pointer;
}
.basket-gateway__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.basket-gateway__item-card,
.basket-gateway__item .basket-gateway__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: #fff;
  border: 1.5px solid #ece7f7;
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.basket-gateway__item:hover .basket-gateway__card {
  border-color: rgba(124, 58, 237, 0.35);
  background: #faf8ff;
  transform: translateY(-1px);
}
.basket-gateway__item input:checked + .basket-gateway__card {
  border-color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
  box-shadow: 0 4px 14px -6px rgba(124, 58, 237, 0.35);
}
.basket-gateway__item input:checked + .basket-gateway__card .basket-gateway__check {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #7c3aed;
  color: #fff;
  opacity: 1;
  transform: scale(1);
}
.basket-gateway__item--wallet input:checked + .basket-gateway__card {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  box-shadow: 0 4px 14px -6px rgba(16, 185, 129, 0.4);
}
.basket-gateway__item--wallet input:checked + .basket-gateway__card .basket-gateway__check {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
}
.basket-gateway__item--wallet input:checked + .basket-gateway__card .basket-gateway__logo--wallet {
  background: linear-gradient(135deg, #10b981, #059669);
}
.basket-gateway__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f3f0ff, #ede8f8);
  color: #7c3aed;
  flex-shrink: 0;
}
.basket-gateway__logo--zibal {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
}
.basket-gateway__logo--paystar {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #ea580c;
}
.basket-gateway__logo--wallet {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.08));
  color: #059669;
}
.basket-gateway__logo--combo {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #7c3aed;
}
.basket-gateway__logo--intl {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
}
.basket-gateway__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.basket-gateway__info strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
}
.basket-gateway__info small {
  font-size: 10px;
  font-weight: 500;
  color: #6b6880;
}
.basket-gateway__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid #ece7f7;
  color: rgba(0, 0, 0, 0.15);
  opacity: 0.7;
  transform: scale(0.85);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

[data-theme=dark] .basket-gateway {
  background: #0f0c2e;
  border-color: #2a2560;
}
[data-theme=dark] .basket-gateway__title {
  color: #f1efff;
}
[data-theme=dark] .basket-gateway__title svg {
  color: #a78bfa;
}
[data-theme=dark] .basket-gateway__hint {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}
[data-theme=dark] .basket-gateway .basket-gateway__card {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .basket-gateway__item:hover .basket-gateway__card {
  border-color: rgba(167, 139, 250, 0.4);
  background: #1a1648;
}
[data-theme=dark] .basket-gateway__item input:checked + .basket-gateway__card {
  border-color: #a78bfa;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.05));
}
[data-theme=dark] .basket-gateway__logo--zibal {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
[data-theme=dark] .basket-gateway__logo--paystar {
  background: rgba(251, 146, 60, 0.18);
  color: #fdba74;
}
[data-theme=dark] .basket-gateway__logo--wallet {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}
[data-theme=dark] .basket-gateway__logo--combo {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}
[data-theme=dark] .basket-gateway__logo--intl {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}
[data-theme=dark] .basket-gateway__wallet-summary {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme=dark] .basket-gateway__wallet-summary-label {
  color: #6ee7b7;
}
[data-theme=dark] .basket-gateway__wallet-summary-label svg {
  color: #34d399;
}
[data-theme=dark] .basket-gateway__wallet-summary-amount {
  color: #f0ecff;
}
[data-theme=dark] .basket-gateway__wallet-summary-amount em {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .basket-gateway__badge {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}
[data-theme=dark] .basket-gateway__combo-detail {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.35);
}
[data-theme=dark] .basket-gateway__combo-row {
  color: #c4b5fd;
}
[data-theme=dark] .basket-gateway__combo-row strong {
  color: #f0ecff;
}
[data-theme=dark] .basket-gateway__combo-row strong em {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .basket-gateway__combo-row--gateway strong {
  color: #a78bfa;
}
[data-theme=dark] .basket-gateway__invoice {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .basket-gateway__invoice:hover {
  background: #1a1648;
  border-color: rgba(167, 139, 250, 0.4);
}
[data-theme=dark] .basket-gateway__invoice-box {
  background: #1a1648;
  border-color: #3d3485;
}
input:checked + [data-theme=dark] .basket-gateway__invoice-box {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border-color: #a78bfa;
}
[data-theme=dark] .basket-gateway__invoice-text strong {
  color: #f0ecff;
}
[data-theme=dark] .basket-gateway__invoice-text small {
  color: #b6b3d9;
}
[data-theme=dark] .basket-gateway__invoice-ico {
  color: rgba(167, 139, 250, 0.55);
}
[data-theme=dark] .basket-gateway__info strong {
  color: #f1efff;
}
[data-theme=dark] .basket-gateway__info small {
  color: #b6b3d9;
}
[data-theme=dark] .basket-gateway__check {
  background: #1a1648;
  border-color: #3d3485;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 992px) {
  .basket-aside__card {
    border-radius: 14px;
    padding: 14px;
  }
}
@media (max-width: 768px) {
  .basket-aside__card {
    border-radius: 12px;
    padding: 14px;
  }
  .basket-aside__total {
    padding: 12px 14px;
  }
  .basket-aside__total span {
    font-size: 12px;
  }
  .basket-aside__total > div strong {
    font-size: 18px;
  }
  .basket-aside__checkout {
    padding: 13px;
    font-size: 13.5px;
  }
  .basket-aside__perks {
    justify-content: flex-start;
    gap: 8px 16px;
  }
  .basket-gateway {
    padding: 12px;
    margin: 14px 0;
  }
  .basket-gateway__title {
    font-size: 12.5px;
  }
  .basket-gateway__hint {
    font-size: 10px;
    padding: 2px 7px;
  }
  .basket-gateway__list {
    gap: 6px;
  }
  .basket-gateway .basket-gateway__card {
    padding: 8px 10px;
    gap: 9px;
  }
  .basket-gateway__logo {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
  }
  .basket-gateway__logo svg {
    width: 17px !important;
    height: 17px !important;
  }
  .basket-gateway__info strong {
    font-size: 12px;
  }
  .basket-gateway__info small {
    font-size: 10px;
  }
  .basket-gateway__check {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }
}
.cart-info__btns,
.cart-info__header-remove-all,
.cart-info__close,
.cart-info__item {
  display: none;
}

.basket-wrap {
  padding: 14px 0 80px;
}
.basket-wrap:has(.basket .basket-item:only-of-type) .basket-grid {
  max-width: 920px;
  margin: 0 auto;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

.basket-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 992px) {
  .basket-grid {
    grid-template-columns: 1fr;
  }
}

.basket-grid__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.basket-grid__aside {
  min-width: 0;
}

.basket {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.basket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.basket__head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
}
.basket__head-title svg {
  color: #7c3aed;
}
.basket__head-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #ddd4f3;
  border-radius: 20px;
  margin-right: 4px;
}
.basket__head-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.basket__head-clear:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.basket-item {
  --ci-rgb: 139, 92, 246;
  --ci1: #8b5cf6;
  --ci2: #7c3aed;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.basket-item[data-accent=violet] {
  --ci-rgb: 139, 92, 246;
  --ci1: #a855f7;
  --ci2: #7c3aed;
}
.basket-item[data-accent=orange] {
  --ci-rgb: 251, 146, 60;
  --ci1: #fb923c;
  --ci2: #ea580c;
}
.basket-item[data-accent=emerald] {
  --ci-rgb: 16, 185, 129;
  --ci1: #34d399;
  --ci2: #059669;
}
.basket-item[data-accent=blue] {
  --ci-rgb: 59, 130, 246;
  --ci1: #60a5fa;
  --ci2: #2563eb;
}
.basket-item[data-accent=rose] {
  --ci-rgb: 244, 63, 94;
  --ci1: #fb7185;
  --ci2: #e11d48;
}
.basket-item:hover {
  border-color: rgba(var(--ci-rgb), 0.35);
}
.basket-item__main {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}
.basket-item__thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ci1), var(--ci2));
  padding: 3px;
  box-shadow: 0 8px 18px -6px rgba(var(--ci-rgb), 0.35);
  margin: 0;
}
.basket-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  background: #fff;
  display: block;
}
.basket-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.basket-item__title {
  font-size: 14px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.basket-item__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.basket-item__tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.basket-item__tag--blue {
  background: rgba(29, 78, 216, 0.1);
  color: #1d4ed8;
}
.basket-item__tag--green {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.basket-item__tag--purple {
  background: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}
.basket-item__tag--orange {
  background: rgba(194, 65, 12, 0.1);
  color: #c2410c;
}
.basket-item__tag--red {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  direction: ltr;
}
.basket-item__actions {
  display: inline-flex;
  gap: 5px;
  margin-top: 2px;
}
.basket-item__action {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #fff;
  border: 1.5px solid #d7cff0;
  color: #6d28d9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.basket-item__action svg {
  flex-shrink: 0;
  opacity: 0.9;
}
.basket-item__action::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%) translateY(2px);
  background: #1a1a2e;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.basket-item__action::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  right: 50%;
  transform: translateX(50%);
  border: 4px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 5;
}
.basket-item__action:hover {
  background: linear-gradient(135deg, var(--ci1), var(--ci2));
  color: #fff;
  border-color: transparent;
}
.basket-item__action:hover::after {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}
.basket-item__action:hover::before {
  opacity: 1;
}
.basket-item__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  direction: ltr;
  text-align: left;
}
.basket-item__price strong {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--ci1), var(--ci2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.basket-item__price small {
  font-size: 10px;
  color: #8a87a3;
  font-weight: 600;
}
.basket-item__price-old {
  font-size: 11px;
  color: #bbb;
  text-decoration: line-through;
}
.basket-item__price-discount {
  font-size: 9.5px;
  font-weight: 800;
  color: #ef4444;
  background: #fef2f2;
  padding: 2px 6px;
  border-radius: 5px;
  direction: ltr;
}
.basket-item__remove {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border: 1px solid #ebe6f5;
  background: #fff;
  border-radius: 7px;
  color: #8a87a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.basket-item__remove:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.basket-item__acc {
  border-top: 1.5px dashed #ebe6f5;
}
.basket-item__acc-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #faf9fd;
  cursor: pointer;
  transition: background 0.2s ease;
}
.basket-item__acc-summary:hover {
  background: #f3f0ff;
}
.basket-item__acc-summary--button {
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: right;
}
.basket-item__acc-summary--button:hover {
  background: #f3f0ff;
}
.basket-item__acc-summary--button .basket-item__acc-chev--external {
  color: #7c3aed;
}
.basket-item__acc-summary--info {
  cursor: default;
  background: rgba(124, 58, 237, 0.05);
}
.basket-item__acc-summary--info:hover {
  background: rgba(124, 58, 237, 0.05);
}
.basket-item__acc-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  color: #7c3aed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.basket-item__acc-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.basket-item__acc-label strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.3;
}
.basket-item__acc-label small {
  font-size: 10.5px;
  font-weight: 600;
  color: #8a87a3;
  line-height: 1.4;
}
.basket-item__acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 20px;
}
.basket-item__acc-badge.is-done {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.basket-item__acc-chev {
  color: #8a87a3;
  transition: transform 0.25s ease;
}
.basket-item__acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.basket-item__acc.is-open .basket-item__acc-chev {
  transform: rotate(180deg);
}
.basket-item__acc.is-open .basket-item__acc-body {
  max-height: 600px;
}
.basket-item__acc.is-filled .basket-item__acc-summary {
  background: rgba(16, 185, 129, 0.04);
}
.basket-item__acc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px 10px;
}
.basket-item__acc-tab {
  position: relative;
  cursor: pointer;
}
.basket-item__acc-tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.basket-item__acc-tab span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #6b6880;
  transition: all 0.2s ease;
}
.basket-item__acc-tab span svg {
  color: #8a87a3;
}
.basket-item__acc-tab:hover span {
  border-color: #c4b5fd;
  color: #7c3aed;
}
.basket-item__acc-tab:hover span svg {
  color: #7c3aed;
}
.basket-item__acc-tab.is-active,
.basket-item__acc-tab input:checked + span {
  background: linear-gradient(135deg, var(--ci1), var(--ci2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(var(--ci-rgb), 0.4);
}
.basket-item__acc-tab.is-active svg,
.basket-item__acc-tab input:checked + span svg {
  color: #fff;
}
.basket-item__acc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 16px 14px;
}
.basket-item__acc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.basket-item__acc-field--full {
  grid-column: 1/-1;
}
.basket-item__acc-field label {
  font-size: 11px;
  font-weight: 700;
  color: #6b6880;
  padding-right: 2px;
}
.basket-item__acc-field textarea {
  width: 100%;
  padding: 9px 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  font-size: 12px;
  color: #1a1a2e;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  transition: all 0.2s ease;
}
.basket-item__acc-field textarea::placeholder {
  color: #a5a2bd;
}
.basket-item__acc-field textarea:focus {
  outline: none;
  border-color: rgba(var(--ci-rgb), 0.6);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--ci-rgb), 0.08);
}
.basket-item__acc-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  transition: all 0.2s ease;
}
.basket-item__acc-input > svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.basket-item__acc-input input {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #1a1a2e;
  font-family: inherit;
}
.basket-item__acc-input input::placeholder {
  color: #a5a2bd;
}
.basket-item__acc-input input:focus {
  outline: none;
}
.basket-item__acc-input:focus-within {
  border-color: rgba(var(--ci-rgb), 0.6);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--ci-rgb), 0.08);
}
.basket-item__acc-eye {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #8a87a3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.basket-item__acc-eye:hover {
  background: #f3f0ff;
  color: #7c3aed;
}
.basket-item__acc-note {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(var(--ci-rgb), 0.06);
  border: 1px dashed rgba(var(--ci-rgb), 0.35);
  border-radius: 10px;
}
.basket-item__acc-note > svg {
  color: var(--ci2);
  flex-shrink: 0;
  margin-top: 2px;
}
.basket-item__acc-note strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 3px;
}
.basket-item__acc-note p {
  font-size: 11.5px;
  color: #6b6880;
  margin: 0;
  line-height: 1.7;
}
.basket-item__acc-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 14px;
}
.basket-item__acc-save {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--ci1), var(--ci2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 14px -4px rgba(var(--ci-rgb), 0.45);
  font-family: inherit;
}
.basket-item__acc-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(var(--ci-rgb), 0.55);
}

[data-theme=dark] .basket__head-title {
  color: #f1efff;
}
[data-theme=dark] .basket__head-count {
  background: #1a1648;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .basket__head-clear {
  background: #2a0f12;
  border-color: #5a1a20;
  color: #fca5a5;
}
[data-theme=dark] .basket-item {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .basket-item__title {
  color: #f1efff;
}
[data-theme=dark] .basket-item__price strong {
  color: #f1efff;
}
[data-theme=dark] .basket-item__action {
  background: #15123a;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .basket-item__action:hover {
  color: #fff;
}
[data-theme=dark] .basket-item__remove {
  background: #15123a;
  border-color: #2a2560;
  color: #8a87b3;
}
[data-theme=dark] .basket-item__remove:hover {
  background: #2a0f12;
  border-color: #5a1a20;
  color: #fca5a5;
}
[data-theme=dark] .basket-item__acc {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .basket-item__acc-summary {
  background: #0d0b32;
}
[data-theme=dark] .basket-item__acc-summary:hover {
  background: #1a1648;
}
[data-theme=dark] .basket-item__acc-ico {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .basket-item__acc-label strong {
  color: #f1efff;
}
[data-theme=dark] .basket-item__acc-label small {
  color: #8a87b3;
}
[data-theme=dark] .basket-item__acc-badge {
  background: #2a1f10;
  border-color: #4a2c10;
  color: #fcd34d;
}
[data-theme=dark] .basket-item__acc-badge.is-done {
  background: #0f2d28;
  border-color: #1f5e4a;
  color: #34d399;
}
[data-theme=dark] .basket-item__acc-tab span {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .basket-item__acc-tab span svg {
  color: #b6b3d9;
}
[data-theme=dark] .basket-item__acc-input {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .basket-item__acc-input input {
  color: #f1efff;
}
[data-theme=dark] .basket-item__acc-input input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .basket-item__acc-field textarea {
  background: #0d0b32;
  border-color: #2a2560;
  color: #f1efff;
}
[data-theme=dark] .basket-item__acc-field textarea::placeholder {
  color: #5a5790;
}
[data-theme=dark] .basket-item__acc-field label {
  color: #b6b3d9;
}
[data-theme=dark] .basket-item__acc-note strong {
  color: #f1efff;
}
[data-theme=dark] .basket-item__acc-note p {
  color: #b6b3d9;
}
[data-theme=dark] .basket-item.is-filled .basket-item__acc-summary {
  background: rgba(16, 185, 129, 0.08);
}

@media (max-width: 768px) {
  .basket-wrap {
    padding: 10px 0 60px;
  }
  .basket-item__main {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "thumb info" "price price";
    gap: 10px;
    padding: 12px 12px 12px 12px;
  }
  .basket-item__thumb {
    grid-area: thumb;
    width: 64px;
    height: 64px;
  }
  .basket-item__info {
    grid-area: info;
    padding-left: 34px;
  }
  .basket-item__title {
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
  }
  .basket-item__price {
    grid-area: price;
    justify-content: flex-end;
    direction: ltr;
    padding-top: 8px;
    border-top: 1px dashed #ebe6f5;
  }
  .basket-item__price strong {
    font-size: 16px;
  }
  .basket-item__remove {
    top: 10px;
    left: 10px;
    z-index: 2;
  }
  .basket-item__acc-summary {
    gap: 8px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .basket-item__acc-label {
    flex: 1;
    min-width: 0;
  }
  .basket-item__acc-label strong {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .basket-item__acc-label small {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .basket-item__acc-badge {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
  }
  .basket-item__acc-tabs {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 12px 8px;
  }
  .basket-item__acc-form {
    grid-template-columns: 1fr;
    padding: 6px 12px 12px;
  }
  .basket-item__acc-footer {
    padding: 0 12px 12px;
  }
  .basket-item__acc-save {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .basket__head-title {
    font-size: 15px;
  }
  .basket-item__main {
    padding: 10px;
    gap: 8px;
  }
  .basket-item__thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }
  .basket-item__info {
    padding-left: 30px;
  }
  .basket-item__title {
    font-size: 12.5px;
    line-height: 1.4;
  }
  .basket-item__tags {
    gap: 3px;
  }
  .basket-item__tag {
    font-size: 9px;
    padding: 2px 6px;
  }
  .basket-item__actions {
    gap: 4px;
  }
  .basket-item__action {
    width: 26px;
    height: 26px;
  }
  .basket-item__price strong {
    font-size: 15px;
  }
  .basket-item__remove {
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
  }
  .basket-item__acc-summary {
    gap: 6px;
    padding: 9px 10px;
  }
  .basket-item__acc-ico {
    width: 26px;
    height: 26px;
  }
}
.cart,
.cart-steps,
.cart-wrapper,
.cart-factor,
.aside-cart {
  display: block;
}

.cart-factor {
  display: none !important;
}

.payment {
  box-shadow: 0 1px 1px rgba(0, 1, 1, 0.1);
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 41px;
  padding: 0 40px 46px 39px;
}
.payment__header .payment__header-title {
  color: #000000;
  font-size: 19px;
  font-weight: 600;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 31px;
  padding-top: 40px;
}
.payment__list .payment__list-item {
  border-bottom: 1px solid #e3e3e3;
  padding-top: 39px;
  padding-bottom: 39px;
}
.payment__list .payment__list-item .item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.payment__list .payment__list-item .item__tick {
  width: 33px;
  height: 33px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 39px;
  transition: 0.3s;
  overflow: hidden;
  position: relative;
}
.payment__list .payment__list-item .item__tick i {
  font-size: 13px;
  color: #e9e9e9;
  position: relative;
  z-index: 100;
  transition: 0.3s;
}
.payment__list .payment__list-item .item__tick:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 60px;
  transform: translate(-50%, -50%) scale(0);
  z-index: 90;
  background-color: #25a913;
  transition: 0.3s;
}
.payment__list .payment__list-item .item__info {
  display: flex;
  flex-direction: column;
}
.payment__list .payment__list-item .item__info .title {
  color: #000000;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 14px;
}
.payment__list .payment__list-item .item__info .desc {
  color: #5a5a5a;
  font-size: 13px;
  font-weight: 600;
  line-height: 23px;
}
.payment__list .payment__list-item .item__logo {
  margin-right: auto;
}
.payment__list .payment__list-item > input {
  display: none;
}
.payment__list .payment__list-item > input:checked + .item .item__tick {
  border-color: transparent;
}
.payment__list .payment__list-item > input:checked + .item .item__tick i {
  color: #ffffff;
}
.payment__list .payment__list-item > input:checked + .item .item__tick:after {
  transform: translate(-50%, -50%) scale(2);
}
.payment__discount-code {
  margin-top: 43px;
}
.payment__discount-code > form {
  display: flex;
  align-items: center;
}
.payment__discount-code .payment__discount-code-input {
  flex: 1 0 auto;
  margin-left: 23px;
}
.payment__discount-code .payment__discount-code-input input {
  width: 100%;
  height: 53px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  padding: 0 15px;
}
.payment__discount-code .payment__discount-code-input input::placeholder {
  font-size: 13px;
  font-weight: 600;
  color: #727272;
  opacity: 1;
}
.payment__discount-code .payment__discount-code-button {
  height: 53px;
  background-color: transparent;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
}
.payment__discount-code .payment__discount-code-button i {
  font-size: 17px;
  color: #ffffff;
  transition: 0.3s;
  position: relative;
  right: 0;
}
.payment__discount-code .payment__discount-code-button.fill {
  background-color: #888;
  color: #ffffff;
}
.payment__discount-code .payment__discount-code-button:hover i {
  right: 10px;
}

@media (max-width: 768px) {
  .payment {
    padding: 0 20px 32px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  .payment__header .payment__header-title {
    font-size: 16px;
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .payment__list .payment__list-item {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .payment__list .payment__list-item .item {
    gap: 16px;
  }
  .payment__list .payment__list-item .item__tick {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-left: 0;
  }
  .payment__list .payment__list-item .item__info .title {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .payment__list .payment__list-item .item__info .desc {
    font-size: 12px;
    line-height: 20px;
  }
  .payment__list .payment__list-item .item__logo img {
    max-height: 28px;
  }
  .payment__discount-code {
    margin-top: 24px;
  }
  .payment__discount-code > form {
    flex-direction: column;
    gap: 10px;
  }
  .payment__discount-code .payment__discount-code-input {
    margin-left: 0;
    width: 100%;
  }
  .payment__discount-code .payment__discount-code-input input {
    height: 46px;
    font-size: 12px;
  }
  .payment__discount-code .payment__discount-code-button {
    height: 46px;
    width: 100%;
    font-size: 14px;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .payment {
    padding: 0 14px 24px;
  }
  .payment__header .payment__header-title {
    font-size: 14.5px;
  }
  .payment__list .payment__list-item {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .payment__list .payment__list-item .item__info .title {
    font-size: 14px;
  }
}
[data-theme=dark] .payment {
  background-color: #03021a;
}
[data-theme=dark] .payment__header .payment__header-title {
  border-color: #1b1939;
  color: #c7c5ee;
}
[data-theme=dark] .payment__list .payment__list-item {
  border-color: #1b1939;
}
[data-theme=dark] .payment__list .payment__list-item .item__tick {
  border-color: #1b1939;
  color: #c7c5ee;
}
[data-theme=dark] .payment__list .payment__list-item .item__tick i {
  color: #c7c5ee;
}
[data-theme=dark] .payment__list .payment__list-item .item__info .title {
  color: #c7c5ee;
}
[data-theme=dark] .payment__list .payment__list-item .item__info .desc {
  color: #c7c5ee;
}
[data-theme=dark] .payment .payment__discount-code .payment__discount-code-input input {
  color: #c7c5ee;
  border-color: #1b1939;
  background-color: #03021a;
}
[data-theme=dark] .payment .payment__discount-code .payment__discount-code-input input::-webkit-input-placeholder {
  color: #908dd3;
}
[data-theme=dark] .payment .payment__discount-code .payment__discount-code-input input:-ms-input-placeholder {
  color: #908dd3;
}
[data-theme=dark] .payment .payment__discount-code .payment__discount-code-input input::placeholder {
  color: #908dd3;
}
[data-theme=dark] .payment .payment__discount-code .payment__discount-code-button.fill {
  background-color: #5a5976;
}

.receipt {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 0 80px;
}
.receipt__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 24px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 55%, #ecfccb 100%);
  border: 1.5px solid #a7f3d0;
  border-radius: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico text" "stats stats";
  gap: 14px 18px;
  align-items: center;
}
.receipt__hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 25%, rgba(16, 185, 129, 0.22), transparent 55%), radial-gradient(circle at 85% 80%, rgba(132, 204, 22, 0.15), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.receipt__hero-ico {
  grid-area: ico;
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px -10px rgba(5, 150, 105, 0.5);
  animation: receipt-pop 3.5s ease-in-out infinite;
}
@keyframes receipt-pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.receipt__hero-text {
  grid-area: text;
  position: relative;
  z-index: 1;
}
.receipt__hero-text h1 {
  font-size: 18px;
  font-weight: 900;
  color: #064e3b;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.receipt__hero-text p {
  font-size: 12px;
  color: #065f46;
  margin: 0;
  line-height: 1.8;
  font-weight: 500;
}
.receipt__hero-stats {
  grid-area: stats;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.receipt__hero-stats > div {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.receipt__hero-stats > div small {
  font-size: 10px;
  color: #065f46;
  font-weight: 700;
}
.receipt__hero-stats > div strong {
  font-size: 12.5px;
  color: #064e3b;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.receipt__footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.receipt__footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 11px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 22px -6px rgba(124, 58, 237, 0.45);
}
.receipt__footer-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(124, 58, 237, 0.6);
}
.receipt__footer-btn--outline {
  background: #fff;
  color: #7c3aed;
  border: 1.5px solid #ddd4f3;
  box-shadow: none;
}
.receipt__footer-btn--outline:hover {
  color: #7c3aed;
  background: #f3f0ff;
  border-color: #c4b5fd;
}

.receipt-prod {
  --rp1: #8b5cf6;
  --rp2: #7c3aed;
  --rp-rgb: 139, 92, 246;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  overflow: hidden;
}
.receipt-prod[data-accent=violet] {
  --rp1: #a855f7;
  --rp2: #7c3aed;
  --rp-rgb: 139, 92, 246;
}
.receipt-prod[data-accent=orange] {
  --rp1: #fb923c;
  --rp2: #ea580c;
  --rp-rgb: 251, 146, 60;
}
.receipt-prod[data-accent=emerald] {
  --rp1: #34d399;
  --rp2: #059669;
  --rp-rgb: 16, 185, 129;
}
.receipt-prod[data-accent=sky] {
  --rp1: #38bdf8;
  --rp2: #0284c7;
  --rp-rgb: 14, 165, 233;
}
.receipt-prod[data-accent=rose] {
  --rp1: #fb7185;
  --rp2: #e11d48;
  --rp-rgb: 244, 63, 94;
}
.receipt-prod__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--rp-rgb), 0.08) 0%, rgba(var(--rp-rgb), 0.03) 100%);
  border-bottom: 1.5px dashed #ebe6f5;
}
.receipt-prod__head-info {
  flex: 1;
  min-width: 0;
}
.receipt-prod__head-info h3 {
  font-size: 14.5px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.receipt-prod__head-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.receipt-prod__ico {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  padding: 3px;
  box-shadow: 0 8px 18px -6px rgba(var(--rp-rgb), 0.4);
  margin: 0;
  flex-shrink: 0;
}
.receipt-prod__ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
  background: #fff;
  display: block;
}
.receipt-prod__meta-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.receipt-prod__meta-tag--blue {
  background: rgba(29, 78, 216, 0.1);
  color: #1d4ed8;
}
.receipt-prod__meta-tag--green {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
}
.receipt-prod__meta-tag--purple {
  background: rgba(109, 40, 217, 0.1);
  color: #6d28d9;
}
.receipt-prod__meta-tag--orange {
  background: rgba(194, 65, 12, 0.1);
  color: #c2410c;
}
.receipt-prod__meta-tag--red {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  direction: ltr;
}
.receipt-prod__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.receipt-prod__status--ready {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.receipt-prod__status--pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.receipt-prod__status--pending svg {
  animation: receipt-spin 1.6s linear infinite;
}
@keyframes receipt-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.receipt-prod__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.receipt-prod__cred {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 11px;
}
.receipt-prod__cred-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #8a87a3;
  min-width: 78px;
  letter-spacing: 0.2px;
}
.receipt-prod__cred > strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-prod__cred--note {
  align-items: flex-start;
  background: rgba(var(--rp-rgb), 0.05);
  border-color: rgba(var(--rp-rgb), 0.2);
}
.receipt-prod__cred--note p {
  flex: 1;
  margin: 0;
  font-size: 11.5px;
  color: #4a4664;
  line-height: 1.9;
  font-weight: 500;
}
.receipt-prod__cred-copy, .receipt-prod__cred-eye {
  width: 30px;
  height: 30px;
  border: 1.5px solid #ebe6f5;
  background: #fff;
  color: var(--rp2);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.receipt-prod__cred-copy:hover, .receipt-prod__cred-eye:hover {
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  color: #fff;
  border-color: transparent;
}
.receipt-prod__cred-copy.is-copied, .receipt-prod__cred-eye.is-copied {
  background: #10b981;
  color: #fff;
  border-color: transparent;
}
.receipt-prod__code {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: repeating-linear-gradient(-45deg, rgba(var(--rp-rgb), 0.05) 0, rgba(var(--rp-rgb), 0.05) 10px, rgba(var(--rp-rgb), 0.02) 10px, rgba(var(--rp-rgb), 0.02) 20px);
  border: 1.5px dashed rgba(var(--rp-rgb), 0.4);
  border-radius: 12px;
}
.receipt-prod__code-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #8a87a3;
  letter-spacing: 0.2px;
}
.receipt-prod__code-value {
  flex: 1;
  font-size: 16px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: 0.12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.receipt-prod__code-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 14px -4px rgba(var(--rp-rgb), 0.5);
  font-family: inherit;
}
.receipt-prod__code-copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(var(--rp-rgb), 0.6);
}
.receipt-prod__code-copy.is-copied {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 14px -4px rgba(5, 150, 105, 0.5);
}
.receipt-prod__timer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(var(--rp-rgb), 0.08), rgba(var(--rp-rgb), 0.02));
  border: 1.5px dashed rgba(var(--rp-rgb), 0.35);
  border-radius: 12px;
}
.receipt-prod__timer-ring {
  position: relative;
  width: 72px;
  height: 72px;
}
.receipt-prod__timer-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(var(--rp-rgb), 0.08);
}
.receipt-prod__timer-progress {
  stroke: url(#rp-grad);
}
.receipt-prod__timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.receipt-prod__timer-text {
  min-width: 0;
}
.receipt-prod__timer-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.receipt-prod__timer-text small {
  display: block;
  font-size: 11px;
  color: #6b6880;
  line-height: 1.7;
  font-weight: 500;
}
.receipt-prod__timer-delay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid rgba(var(--rp-rgb), 0.3);
  color: var(--rp2);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.receipt-prod__timer-delay:hover {
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  color: #fff;
  border-color: transparent;
}
.receipt-prod__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-prod__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--rp2);
  background: #fff;
  border: 1.5px solid rgba(var(--rp-rgb), 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-family: inherit;
}
.receipt-prod__action:hover {
  background: rgba(var(--rp-rgb), 0.08);
  color: var(--rp2);
  border-color: rgba(var(--rp-rgb), 0.5);
}
.receipt-prod__action--primary {
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -6px rgba(var(--rp-rgb), 0.5);
}
.receipt-prod__action--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--rp1), var(--rp2));
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(var(--rp-rgb), 0.65);
}

[data-theme=dark] .receipt__hero {
  background: linear-gradient(135deg, #0a2e25 0%, #0d3a2f 50%, #112f1a 100%);
  border-color: #1f5e4a;
}
[data-theme=dark] .receipt__hero-bg {
  background: radial-gradient(circle at 15% 25%, rgba(52, 211, 153, 0.22), transparent 55%), radial-gradient(circle at 85% 80%, rgba(132, 204, 22, 0.15), transparent 55%);
}
[data-theme=dark] .receipt__hero-text h1 {
  color: #a7f3d0;
}
[data-theme=dark] .receipt__hero-text p {
  color: #6ee7b7;
}
[data-theme=dark] .receipt__hero-stats > div {
  background: rgba(10, 46, 37, 0.7);
  border-color: rgba(31, 94, 74, 0.5);
}
[data-theme=dark] .receipt__hero-stats > div small {
  color: #6ee7b7;
}
[data-theme=dark] .receipt__hero-stats > div strong {
  color: #a7f3d0;
}
[data-theme=dark] .receipt__footer-btn--outline {
  background: #15123a;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .receipt__footer-btn--outline:hover {
  background: #1a1648;
  border-color: #a78bfa;
  color: #c4b5fd;
}
[data-theme=dark] .receipt-prod {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .receipt-prod__head {
  background: linear-gradient(135deg, rgba(var(--rp-rgb), 0.14) 0%, rgba(var(--rp-rgb), 0.05) 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .receipt-prod__head-info h3 {
  color: #f1efff;
}
[data-theme=dark] .receipt-prod__status--ready {
  background: #0a2e25;
  color: #34d399;
  border-color: #1f5e4a;
}
[data-theme=dark] .receipt-prod__status--pending {
  background: #2a1f10;
  color: #fcd34d;
  border-color: #4a2c10;
}
[data-theme=dark] .receipt-prod__cred {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .receipt-prod__cred-label {
  color: #8a87b3;
}
[data-theme=dark] .receipt-prod__cred > strong {
  color: #f1efff;
}
[data-theme=dark] .receipt-prod__cred--note {
  background: rgba(var(--rp-rgb), 0.1);
  border-color: rgba(var(--rp-rgb), 0.3);
}
[data-theme=dark] .receipt-prod__cred--note p {
  color: #b6b3d9;
}
[data-theme=dark] .receipt-prod__cred-copy, [data-theme=dark] .receipt-prod__cred-eye {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .receipt-prod__cred-copy:hover, [data-theme=dark] .receipt-prod__cred-eye:hover {
  color: #fff;
}
[data-theme=dark] .receipt-prod__code {
  background: repeating-linear-gradient(-45deg, rgba(var(--rp-rgb), 0.12) 0, rgba(var(--rp-rgb), 0.12) 10px, rgba(var(--rp-rgb), 0.04) 10px, rgba(var(--rp-rgb), 0.04) 20px);
  border-color: rgba(var(--rp-rgb), 0.5);
}
[data-theme=dark] .receipt-prod__code-label {
  color: #b6b3d9;
}
[data-theme=dark] .receipt-prod__timer {
  background: linear-gradient(135deg, rgba(var(--rp-rgb), 0.12), rgba(var(--rp-rgb), 0.04));
  border-color: rgba(var(--rp-rgb), 0.4);
}
[data-theme=dark] .receipt-prod__timer-num {
  color: #f1efff;
}
[data-theme=dark] .receipt-prod__timer-text strong {
  color: #f1efff;
}
[data-theme=dark] .receipt-prod__timer-text small {
  color: #b6b3d9;
}
[data-theme=dark] .receipt-prod__timer-delay {
  background: #15123a;
  color: #c4b5fd;
  border-color: rgba(var(--rp-rgb), 0.4);
}
[data-theme=dark] .receipt-prod__timer-delay:hover {
  color: #fff;
}
[data-theme=dark] .receipt-prod__action {
  background: #15123a;
  color: #c4b5fd;
  border-color: rgba(var(--rp-rgb), 0.4);
}
[data-theme=dark] .receipt-prod__action:hover {
  background: rgba(var(--rp-rgb), 0.15);
  color: #f1efff;
}
[data-theme=dark] .receipt-prod__action--primary {
  color: #fff;
}

@media (max-width: 768px) {
  .receipt {
    gap: 14px;
    padding: 10px 0 60px;
  }
  .receipt__hero {
    padding: 16px;
    border-radius: 16px;
    gap: 12px 14px;
  }
  .receipt__hero-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  .receipt__hero-text h1 {
    font-size: 16px;
  }
  .receipt__hero-text p {
    font-size: 11.5px;
  }
  .receipt__hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .receipt__footer {
    gap: 8px;
    flex-direction: column;
  }
  .receipt__footer-btn {
    justify-content: center;
    width: 100%;
    padding: 12px;
  }
  .receipt-prod {
    border-radius: 14px;
  }
  .receipt-prod__head {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .receipt-prod__head-info h3 {
    font-size: 13.5px;
  }
  .receipt-prod__ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .receipt-prod__status {
    order: 3;
    margin-right: auto;
    font-size: 10px;
    padding: 5px 9px;
  }
  .receipt-prod__body {
    padding: 12px 14px 14px;
    gap: 9px;
  }
  .receipt-prod__cred {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .receipt-prod__cred-label {
    min-width: 0;
    width: 100%;
    margin-bottom: 2px;
  }
  .receipt-prod__cred > strong {
    font-size: 12.5px;
  }
  .receipt-prod__cred--note p {
    font-size: 11px;
  }
  .receipt-prod__code {
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .receipt-prod__code-value {
    font-size: 14px;
    letter-spacing: 0.08em;
    width: 100%;
  }
  .receipt-prod__code-copy {
    width: 100%;
    justify-content: center;
  }
  .receipt-prod__timer {
    padding: 12px;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ring text" "delay delay";
    gap: 10px;
  }
  .receipt-prod__timer-ring {
    grid-area: ring;
  }
  .receipt-prod__timer-text {
    grid-area: text;
  }
  .receipt-prod__timer-text small {
    font-size: 10.5px;
  }
  .receipt-prod__timer-delay {
    grid-area: delay;
    justify-self: stretch;
    justify-content: center;
  }
  .receipt-prod__actions {
    gap: 6px;
  }
  .receipt-prod__action {
    padding: 8px 12px;
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .receipt__hero {
    grid-template-columns: 1fr;
    grid-template-areas: "ico" "text" "stats";
    text-align: center;
    justify-items: center;
  }
  .receipt__hero-ico {
    width: 56px;
    height: 56px;
  }
  .receipt__hero-text h1 {
    font-size: 15px;
  }
  .receipt__hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .receipt-prod__head-info h3 {
    font-size: 13px;
  }
  .receipt-prod__timer-ring {
    width: 60px;
    height: 60px;
  }
  .receipt-prod__timer-ring svg {
    width: 60px;
    height: 60px;
  }
  .receipt-prod__timer-num {
    font-size: 11px;
  }
  .receipt-prod__timer-text strong {
    font-size: 12px;
  }
  .receipt-prod__actions {
    flex-direction: column;
  }
  .receipt-prod__action {
    justify-content: center;
    width: 100%;
  }
}
.receipt-prod__timer-progress {
  stroke: var(--rp2);
}

.finish-buy-time {
  display: none;
}

.finish-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 20px;
}
.finish-timer__visual {
  margin-bottom: 24px;
}
.finish-timer__circle {
  position: relative;
  width: 120px;
  height: 120px;
  animation: float-404 4s ease-in-out infinite;
}
.finish-timer__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b5cf6;
}
.finish-timer__countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  direction: ltr;
}
.finish-timer__num {
  font-size: 32px;
  font-weight: 900;
  color: #111;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 6px 14px;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.finish-timer__sep {
  font-size: 28px;
  font-weight: 800;
  color: #c4b5fd;
}
.finish-timer__label {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin-right: 8px;
}
.finish-timer__desc {
  font-size: 14px;
  color: #555;
  margin: 0 0 20px;
}
.finish-timer__delay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
  text-decoration: none;
  transition: all 0.25s;
}
.finish-timer__delay:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}

@media (max-width: 576px) {
  .finish-timer {
    padding: 28px 16px;
  }
  .finish-timer__num {
    font-size: 26px;
    padding: 4px 10px;
  }
}
[data-theme=dark] .finish-timer {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .finish-timer__num {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .finish-timer__desc {
  color: #7b77c5;
}
[data-theme=dark] .finish-timer__delay {
  background: #2a1f10;
  border-color: #4a2c10;
  color: #fcd34d;
}
[data-theme=dark] .finish-timer__icon {
  color: #a78bfa;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 0 80px;
}
.cart-empty__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 48px 32px;
  background: linear-gradient(135deg, #faf8fe 0%, #f3f0ff 55%, #fce7f3 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cart-empty__hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 25%, rgba(139, 92, 246, 0.22), transparent 55%), radial-gradient(circle at 85% 80%, rgba(236, 72, 153, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.cart-empty__visual {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
}
.cart-empty__visual-inner {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 40px -12px rgba(124, 58, 237, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.5);
  animation: cart-empty-float 4s ease-in-out infinite;
}
.cart-empty__visual-inner svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.cart-empty__visual-badge {
  position: absolute;
  bottom: -2px;
  left: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 14px -3px rgba(220, 38, 38, 0.5);
  animation: cart-empty-pop 3s ease-in-out infinite;
}
.cart-empty__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
.cart-empty__orb--1 {
  width: 60px;
  height: 60px;
  top: -10px;
  right: -6px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.7), transparent 70%);
  animation: cart-empty-orb 5s ease-in-out infinite;
}
.cart-empty__orb--2 {
  width: 48px;
  height: 48px;
  bottom: -8px;
  right: 20px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.65), transparent 70%);
  animation: cart-empty-orb 6s ease-in-out infinite 1s;
}
.cart-empty__orb--3 {
  width: 52px;
  height: 52px;
  top: 14px;
  left: -14px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.6), transparent 70%);
  animation: cart-empty-orb 7s ease-in-out infinite 2s;
}
@keyframes cart-empty-float {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}
@keyframes cart-empty-pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes cart-empty-orb {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.25) translate(4px, -4px);
    opacity: 1;
  }
}
.cart-empty__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #ddd4f3;
}
.cart-empty__title {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
  background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cart-empty__desc {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: #4a4664;
  margin: 0;
  max-width: 560px;
  line-height: 1.9;
  font-weight: 500;
}
.cart-empty__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.cart-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 11px;
  text-decoration: none;
  transition: all 0.25s ease;
  letter-spacing: -0.01em;
}
.cart-empty__btn--primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 10px 22px -6px rgba(124, 58, 237, 0.45);
}
.cart-empty__btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(124, 58, 237, 0.6);
}
.cart-empty__btn--outline {
  background: rgba(255, 255, 255, 0.85);
  color: #4a4664;
  border: 1.5px solid #ddd4f3;
  backdrop-filter: blur(8px);
}
.cart-empty__btn--outline:hover {
  color: #7c3aed;
  border-color: #c4b5fd;
  background: #fff;
  transform: translateY(-2px);
}
.cart-empty__picks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-empty__picks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}
.cart-empty__picks-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
}
.cart-empty__picks-head h3 svg {
  color: #f59e0b;
  fill: #f59e0b;
}
.cart-empty__picks-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7c3aed;
  text-decoration: none;
  padding: 6px 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  transition: all 0.2s ease;
}
.cart-empty__picks-more:hover {
  background: #f3f0ff;
  border-color: #c4b5fd;
  color: #7c3aed;
}
.cart-empty__picks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cart-empty__pick {
  --p1: #8b5cf6;
  --p2: #7c3aed;
  --p-rgb: 139, 92, 246;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.cart-empty__pick[data-accent=violet] {
  --p1: #a855f7;
  --p2: #7c3aed;
  --p-rgb: 139, 92, 246;
}
.cart-empty__pick[data-accent=orange] {
  --p1: #fb923c;
  --p2: #ea580c;
  --p-rgb: 251, 146, 60;
}
.cart-empty__pick[data-accent=emerald] {
  --p1: #34d399;
  --p2: #059669;
  --p-rgb: 16, 185, 129;
}
.cart-empty__pick[data-accent=sky] {
  --p1: #38bdf8;
  --p2: #0284c7;
  --p-rgb: 14, 165, 233;
}
.cart-empty__pick[data-accent=rose] {
  --p1: #fb7185;
  --p2: #e11d48;
  --p-rgb: 244, 63, 94;
}
.cart-empty__pick[data-accent=amber] {
  --p1: #fbbf24;
  --p2: #d97706;
  --p-rgb: 245, 158, 11;
}
.cart-empty__pick:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--p-rgb), 0.4);
  box-shadow: 0 16px 30px -12px rgba(var(--p-rgb), 0.3);
}
.cart-empty__pick:hover .cart-empty__pick-chev {
  transform: translateX(-3px);
  color: var(--p2);
}
.cart-empty__pick-ico {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  padding: 3px;
  box-shadow: 0 6px 14px -4px rgba(var(--p-rgb), 0.45);
  margin: 0;
}
.cart-empty__pick-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  display: block;
}
.cart-empty__pick > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cart-empty__pick > div strong {
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cart-empty__pick > div small {
  font-size: 10.5px;
  font-weight: 600;
  color: #6b6880;
  line-height: 1.5;
}
.cart-empty__pick-chev {
  color: #c4b5fd;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

[data-theme=dark] .cart-empty__hero {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 50%, #2a1250 100%);
  border-color: #2a2560;
}
[data-theme=dark] .cart-empty__hero-bg {
  background: radial-gradient(circle at 15% 25%, rgba(167, 139, 250, 0.25), transparent 55%), radial-gradient(circle at 85% 80%, rgba(236, 72, 153, 0.18), transparent 55%);
}
[data-theme=dark] .cart-empty__visual-badge {
  border-color: #13103a;
}
[data-theme=dark] .cart-empty__eyebrow {
  background: rgba(26, 22, 72, 0.8);
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .cart-empty__title {
  background: linear-gradient(135deg, #f1efff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .cart-empty__desc {
  color: #b6b3d9;
}
[data-theme=dark] .cart-empty__btn--outline {
  background: rgba(26, 22, 72, 0.8);
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .cart-empty__btn--outline:hover {
  background: #1a1648;
  color: #f1efff;
  border-color: #a78bfa;
}
[data-theme=dark] .cart-empty__picks-head h3 {
  color: #f1efff;
}
[data-theme=dark] .cart-empty__picks-more {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .cart-empty__picks-more:hover {
  background: #1a1648;
  border-color: #3d3485;
}
[data-theme=dark] .cart-empty__pick {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .cart-empty__pick > div strong {
  color: #f1efff;
}
[data-theme=dark] .cart-empty__pick > div small {
  color: #b6b3d9;
}
[data-theme=dark] .cart-empty__pick-chev {
  color: #5a5790;
}

@media (max-width: 768px) {
  .cart-empty {
    gap: 20px;
    padding: 14px 0 60px;
  }
  .cart-empty__hero {
    padding: 36px 20px 32px;
    border-radius: 18px;
    gap: 10px;
  }
  .cart-empty__visual {
    width: 100px;
    height: 100px;
  }
  .cart-empty__visual-inner {
    border-radius: 22px;
  }
  .cart-empty__visual-badge {
    width: 28px;
    height: 28px;
  }
  .cart-empty__title {
    font-size: 18px;
  }
  .cart-empty__desc {
    font-size: 12px;
    line-height: 1.8;
  }
  .cart-empty__actions {
    gap: 8px;
  }
  .cart-empty__btn {
    padding: 10px 16px;
    font-size: 12px;
  }
  .cart-empty__picks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .cart-empty__pick {
    padding: 10px;
    gap: 8px;
    border-radius: 12px;
  }
  .cart-empty__pick-ico {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 11px;
  }
  .cart-empty__pick > div strong {
    font-size: 12px;
  }
  .cart-empty__pick > div small {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .cart-empty {
    padding: 10px 0 50px;
  }
  .cart-empty__hero {
    padding: 28px 16px 26px;
    border-radius: 14px;
    gap: 8px;
  }
  .cart-empty__visual {
    width: 88px;
    height: 88px;
    margin-bottom: 2px;
  }
  .cart-empty__visual-inner {
    border-radius: 20px;
  }
  .cart-empty__title {
    font-size: 16px;
  }
  .cart-empty__desc {
    font-size: 11.5px;
    line-height: 1.75;
  }
  .cart-empty__actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 4px;
  }
  .cart-empty__btn {
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 10px;
  }
  .cart-empty__picks-head h3 {
    font-size: 13px;
  }
  .cart-empty__picks-more {
    font-size: 11px;
    padding: 5px 10px;
  }
  .cart-empty__picks-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .cart-empty__pick {
    padding: 10px 12px;
  }
  .cart-empty__pick-ico {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }
  .cart-empty__pick > div strong {
    font-size: 13px;
  }
  .cart-empty__pick > div small {
    font-size: 10.5px;
  }
}
/* cat */
.ai-cat-header {
  margin-bottom: 30px;
}
.ai-cat-header__slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-cat-header__slider__single__image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.ai-cat-header__slider__single__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 0.5s ease;
}
.ai-cat-header__slider__single__image a {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ai-cat-header__slider__single__image:hover img {
  transform: scale(1.03);
}
.ai-cat-header__slider__multi {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 16px;
}
.ai-cat-header__slider__multi__small__image, .ai-cat-header__slider__multi__large__image {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.ai-cat-header__slider__multi__small__image img, .ai-cat-header__slider__multi__large__image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ai-cat-header__slider__multi__small__image a, .ai-cat-header__slider__multi__large__image a {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ai-cat-header__slider__multi__small__image:hover img, .ai-cat-header__slider__multi__large__image:hover img {
  transform: scale(1.04);
}
.ai-cat-header__slider__multi__small__title h2, .ai-cat-header__slider__multi__small__title h3, .ai-cat-header__slider__multi__small__title h4, .ai-cat-header__slider__multi__small__title h5, .ai-cat-header__slider__multi__small__title h6, .ai-cat-header__slider__multi__large__title h2, .ai-cat-header__slider__multi__large__title h3, .ai-cat-header__slider__multi__large__title h4, .ai-cat-header__slider__multi__large__title h5, .ai-cat-header__slider__multi__large__title h6 {
  position: absolute;
  bottom: 20px;
  right: 0;
  left: 0;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.ai-cat-header__slider__multi__large__title h2, .ai-cat-header__slider__multi__large__title h3, .ai-cat-header__slider__multi__large__title h4, .ai-cat-header__slider__multi__large__title h5, .ai-cat-header__slider__multi__large__title h6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #532b77;
  bottom: 24px;
  left: 24px;
  right: auto;
  text-align: left;
  text-shadow: none;
}
.ai-cat-header__slider__multi__large__title h2 span, .ai-cat-header__slider__multi__large__title h3 span, .ai-cat-header__slider__multi__large__title h4 span, .ai-cat-header__slider__multi__large__title h5 span, .ai-cat-header__slider__multi__large__title h6 span {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}

@media (max-width: 991px) {
  .ai-cat-header__slider__multi {
    grid-template-columns: 1fr 1fr;
  }
  .ai-cat-header__slider__multi__large__image {
    grid-column: 1/-1;
  }
  .ai-cat-header__slider__multi__large__image img {
    height: 240px;
  }
  .ai-cat-header__slider__multi__small__image img {
    height: 200px;
  }
}
@media (max-width: 576px) {
  .ai-cat-header {
    display: none;
  }
}
@keyframes aiu-dot-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}
.ai-updates {
  margin: 24px 0 28px;
}
.ai-updates__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ai-updates__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.ai-updates__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.ai-updates__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: aiu-dot-pulse 1.4s ease-in-out infinite;
}
.ai-updates__title {
  font-size: 19px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 2px;
  line-height: 1.3;
}
.ai-updates__subtitle {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.ai-updates__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.ai-updates__more:hover {
  background: #7c3aed;
  color: #fff;
  transform: translateX(-3px);
}
.ai-updates__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ai-updates__item-link {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.06);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(15, 11, 72, 0.04);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ai-updates__item-link:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.25);
  box-shadow: 0 10px 24px rgba(15, 11, 72, 0.08);
}
.ai-updates__item-logo {
  margin: 0;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-updates__item-logo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.ai-updates__item-body {
  min-width: 0;
}
.ai-updates__item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.ai-updates__item-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-updates__item-version {
  font-size: 10.5px;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  padding: 1px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  direction: ltr;
}
.ai-updates__item-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(15, 11, 72, 0.6);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-updates__item-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.45);
}
.ai-updates__item-time svg {
  opacity: 0.7;
}
.ai-updates__item-badge {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.ai-updates__item-badge--new {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}
.ai-updates__item-badge--update {
  background: rgba(124, 58, 237, 0.14);
  color: #7c3aed;
}
.ai-updates__item-badge--hot {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.ai-top-week {
  margin: 20px 0 28px;
}
.ai-top-week__header {
  margin-bottom: 18px;
}
.ai-top-week__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.ai-top-week__title {
  font-size: 19px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 2px;
  line-height: 1.3;
}
.ai-top-week__subtitle {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  margin: 0;
}
.ai-top-week__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, rgba(236, 72, 153, 0.03) 100%);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 18px;
}
.ai-top-week__item-link {
  display: grid;
  grid-template-columns: 36px 58px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.05);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ai-top-week__item-link:hover {
  transform: translateX(-4px);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 8px 20px rgba(15, 11, 72, 0.08);
}
.ai-top-week__item[data-rank="1"] .ai-top-week__rank {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.ai-top-week__item[data-rank="2"] .ai-top-week__rank {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #fff;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}
.ai-top-week__item[data-rank="3"] .ai-top-week__rank {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35);
}
.ai-top-week__rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 11, 72, 0.06);
  color: rgba(15, 11, 72, 0.7);
  font-size: 13px;
  font-weight: 900;
}
.ai-top-week__logo {
  margin: 0;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.06));
}
.ai-top-week__logo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.ai-top-week__info {
  min-width: 0;
}
.ai-top-week__name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f0b48;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-top-week__tag {
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.5);
}
.ai-top-week__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ai-top-week__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 800;
  color: #f59e0b;
}
.ai-top-week__stat--trend {
  color: #10b981;
}
.ai-top-week__sales {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

[data-theme=dark] .ai-updates__title,
[data-theme=dark] .ai-top-week__title {
  color: #e4e1ff;
}
[data-theme=dark] .ai-updates__subtitle,
[data-theme=dark] .ai-top-week__subtitle {
  color: rgba(199, 197, 238, 0.55);
}
[data-theme=dark] .ai-updates__more {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}
[data-theme=dark] .ai-updates__more:hover {
  background: #7c3aed;
  color: #fff;
}
[data-theme=dark] .ai-updates__item-link,
[data-theme=dark] .ai-top-week__item-link {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .ai-updates__item-link:hover,
[data-theme=dark] .ai-top-week__item-link:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .ai-updates__item-name,
[data-theme=dark] .ai-top-week__name {
  color: #fff;
}
[data-theme=dark] .ai-updates__item-note {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .ai-updates__item-time,
[data-theme=dark] .ai-top-week__tag {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ai-top-week__list {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.05) 100%);
  border-color: rgba(139, 92, 246, 0.2);
}
[data-theme=dark] .ai-top-week__rank {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .ai-top-week__sales {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}

@media (max-width: 767px) {
  .ai-updates__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ai-updates__title {
    font-size: 16px;
  }
  .ai-top-week__title {
    font-size: 16px;
  }
  .ai-top-week__list {
    padding: 10px;
  }
  .ai-top-week__item-link {
    grid-template-columns: 28px 46px 1fr auto;
    gap: 10px;
    padding: 8px 10px;
  }
  .ai-top-week__sales {
    display: none;
  }
  .ai-top-week__logo {
    width: 42px;
    height: 42px;
  }
  .ai-top-week__rank {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .ai-top-week__stats {
    font-size: 10.5px;
  }
  .ai-top-week__tag {
    font-size: 10px;
  }
}
.ai-products {
  margin-bottom: 30px;
}
.ai-products__grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ai-products__card {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid #f0ecf9;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-products__card-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.ai-products__card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}
.ai-products__card[data-gradient=purple] .ai-products__card-glow {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.01) 100%);
}
.ai-products__card[data-gradient=purple]:hover {
  border-color: #c4b5fd;
}
.ai-products__card[data-gradient=purple]:hover .ai-products__card-glow {
  opacity: 1;
}
.ai-products__card[data-gradient=purple]:hover .ai-products__card-logo {
  background: linear-gradient(135deg, #f3f0ff, #ede9fe);
}
.ai-products__card[data-gradient=purple]:hover .ai-products__card-btn {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
}
.ai-products__card[data-gradient=pink] .ai-products__card-glow {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, rgba(236, 72, 153, 0.01) 100%);
}
.ai-products__card[data-gradient=pink]:hover {
  border-color: #f9a8d4;
}
.ai-products__card[data-gradient=pink]:hover .ai-products__card-glow {
  opacity: 1;
}
.ai-products__card[data-gradient=pink]:hover .ai-products__card-logo {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
}
.ai-products__card[data-gradient=pink]:hover .ai-products__card-btn {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
}
.ai-products__card[data-gradient=blue] .ai-products__card-glow {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.01) 100%);
}
.ai-products__card[data-gradient=blue]:hover {
  border-color: #93c5fd;
}
.ai-products__card[data-gradient=blue]:hover .ai-products__card-glow {
  opacity: 1;
}
.ai-products__card[data-gradient=blue]:hover .ai-products__card-logo {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.ai-products__card[data-gradient=blue]:hover .ai-products__card-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
}
.ai-products__card[data-gradient=emerald] .ai-products__card-glow {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(16, 185, 129, 0.01) 100%);
}
.ai-products__card[data-gradient=emerald]:hover {
  border-color: #6ee7b7;
}
.ai-products__card[data-gradient=emerald]:hover .ai-products__card-glow {
  opacity: 1;
}
.ai-products__card[data-gradient=emerald]:hover .ai-products__card-logo {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.ai-products__card[data-gradient=emerald]:hover .ai-products__card-btn {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
}
.ai-products__card[data-gradient=orange] .ai-products__card-glow {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(245, 158, 11, 0.01) 100%);
}
.ai-products__card[data-gradient=orange]:hover {
  border-color: #fcd34d;
}
.ai-products__card[data-gradient=orange]:hover .ai-products__card-glow {
  opacity: 1;
}
.ai-products__card[data-gradient=orange]:hover .ai-products__card-logo {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.ai-products__card[data-gradient=orange]:hover .ai-products__card-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
.ai-products__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.ai-products__card:hover .ai-products__card-logo img {
  transform: scale(1.08) rotate(2deg);
}
.ai-products__card:hover .ai-products__card-reveal {
  max-height: 60px;
  opacity: 1;
  margin-top: 10px;
}
.ai-products__card:hover .ai-products__card-save {
  opacity: 1;
}
.ai-products__card-logo {
  flex: 0 0 140px;
  width: 140px;
  background: #f8f7fc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background 0.4s ease;
  position: relative;
  z-index: 1;
}
.ai-products__card-logo img {
  width: 90px;
  height: 90px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(15, 11, 72, 0.12);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-products__card-body {
  flex: 1;
  padding: 18px 22px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ai-products__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ai-products__card-title {
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}
.ai-products__card-desc {
  font-size: 13px;
  color: #4a4664;
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-products__card-audience {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: #faf9fe;
  border-radius: 8px;
  border: 1px solid #f0ecf9;
}
.ai-products__card-audience svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.ai-products__card-audience span {
  font-size: 11px;
  color: #4a4664;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-products__card-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
  margin-top: 0;
}
.ai-products__card-reveal p {
  font-size: 12px;
  color: #999;
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}
.ai-products__card-action {
  flex: 0 0 160px;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  position: relative;
  z-index: 1;
  border-right: 1px solid #f0ecf9;
}
.ai-products__card-save {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f8f7fc;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 0.5;
  transition: all 0.3s ease;
  text-decoration: none;
}
.ai-products__card-save svg {
  color: #bbb;
  transition: color 0.2s;
}
.ai-products__card-save:hover {
  background: #fef3c7;
}
.ai-products__card-save:hover svg {
  color: #f59e0b;
}
.ai-products__card-save.active {
  background: #fef3c7;
  opacity: 1;
}
.ai-products__card-save.active svg {
  color: #f59e0b;
  fill: #f59e0b;
}
.ai-products__card-compare {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid #ebe6f5;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  font-family: inherit;
  box-shadow: 0 2px 6px -2px rgba(15, 11, 72, 0.08);
}
.ai-products__card-compare svg {
  width: 15px;
  height: 15px;
  color: #a78bfa;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ai-products__card-compare::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%) translateY(-2px);
  padding: 4px 9px;
  background: #1a1a2e;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 6;
}
.ai-products__card-compare::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  right: 50%;
  transform: translateX(50%);
  border: 4px solid transparent;
  border-bottom-color: #1a1a2e;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 6;
}
.ai-products__card-compare:hover {
  background: linear-gradient(135deg, #f3f0ff, #ede8f8);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.3);
}
.ai-products__card-compare:hover svg {
  color: #6d28d9;
  transform: scale(1.1);
}
.ai-products__card-compare:hover::after {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}
.ai-products__card-compare:hover::before {
  opacity: 1;
}
.ai-products__card-compare.is-active {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.55);
}
.ai-products__card-compare.is-active svg {
  color: #fff;
}
.ai-products__card-compare.is-active::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 1;
  transform: none;
  border-bottom-color: #fff;
}
.ai-products__card-compare.is-active::after {
  display: none;
}
.ai-products__card.is-comparing {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 6px 24px -8px rgba(124, 58, 237, 0.3);
}
.ai-products__card-price {
  font-size: 12px;
  color: #6b6880;
  text-align: center;
  font-weight: 600;
}
.ai-products__card-price strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #0f0b48;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.ai-products__card-price small {
  font-size: 11px;
  color: #6b6880;
  font-weight: 600;
}
.ai-products__card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  background: #f0ecf9;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 4;
}
.ai-products__card-btn:hover {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}
.ai-products__tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #6d28d9;
  background: #f3f0ff;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 30px 0 40px;
  list-style: none;
  padding: 0;
}
.pagination li a.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.pagination li a.item:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #f3f0ff;
}
.pagination li a.item.active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}
.pagination li.active a.item {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}

@media (max-width: 992px) {
  .ai-products__card-logo {
    flex: 0 0 110px;
    width: 110px;
  }
  .ai-products__card-logo img {
    width: 65px;
    height: 65px;
  }
  .ai-products__card-action {
    flex: 0 0 130px;
    width: 130px;
  }
  .ai-products__card-title {
    font-size: 14px;
  }
  .ai-products__card-price strong {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .ai-products__card {
    --card-c1: #f3f0ff;
    --card-c2: rgba(243, 240, 255, 0);
    --card-edge: rgba(124, 58, 237, 0.18);
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    padding: 44px 14px 14px;
    isolation: isolate;
    position: relative;
  }
  .ai-products__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 175px;
    background: radial-gradient(circle at 50% 0%, var(--card-c1), var(--card-c2) 75%);
    z-index: 0;
    pointer-events: none;
  }
  .ai-products__card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--card-edge), transparent);
    z-index: 1;
    pointer-events: none;
  }
  .ai-products__card > .ai-products__card-logo,
.ai-products__card > .ai-products__card-body,
.ai-products__card > .ai-products__card-action {
    position: relative;
    z-index: 2;
  }
  .ai-products__card[data-gradient=purple] {
    --card-c1: rgba(139, 92, 246, 0.18);
    --card-edge: rgba(139, 92, 246, 0.35);
  }
  .ai-products__card[data-gradient=pink] {
    --card-c1: rgba(236, 72, 153, 0.16);
    --card-edge: rgba(236, 72, 153, 0.35);
  }
  .ai-products__card[data-gradient=blue] {
    --card-c1: rgba(59, 130, 246, 0.16);
    --card-edge: rgba(59, 130, 246, 0.35);
  }
  .ai-products__card[data-gradient=emerald] {
    --card-c1: rgba(16, 185, 129, 0.16);
    --card-edge: rgba(16, 185, 129, 0.35);
  }
  .ai-products__card[data-gradient=orange] {
    --card-c1: rgba(245, 158, 11, 0.18);
    --card-edge: rgba(245, 158, 11, 0.4);
  }
  .ai-products__card-compare {
    top: 12px;
    left: auto;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    z-index: 6;
  }
  .ai-products__card-save {
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    opacity: 1;
    background: #fff;
    border: 1.5px solid #ebe6f5;
    box-shadow: 0 2px 6px -2px rgba(15, 11, 72, 0.08);
    z-index: 6;
    transition: all 0.22s ease;
  }
  .ai-products__card-save svg {
    width: 15px !important;
    height: 15px !important;
    color: #b0aac8;
  }
  .ai-products__card-save:hover, .ai-products__card-save:active {
    background: #fef3c7;
    border-color: #fde68a;
    transform: scale(1.05);
  }
  .ai-products__card-save:hover svg, .ai-products__card-save:active svg {
    color: #f59e0b;
  }
  .ai-products__card-save.active, .ai-products__card-save.is-saved {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
  }
  .ai-products__card-save.active svg, .ai-products__card-save.is-saved svg {
    color: #fff;
    fill: #fff;
  }
  .ai-products__card-logo {
    flex: none;
    width: 100%;
    padding: 0;
    margin-bottom: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent !important;
    border: 0;
  }
  .ai-products__card-logo img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 16px 32px -10px rgba(124, 58, 237, 0.4);
    background: transparent;
  }
  .ai-products__card-body {
    padding: 0;
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .ai-products__card-tags {
    justify-content: center;
    gap: 5px;
    margin-bottom: 2px;
  }
  .ai-products__card-title {
    font-size: 14.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    margin: 0;
    max-width: 100%;
  }
  .ai-products__card-desc {
    font-size: 12px;
    line-height: 1.7;
    -webkit-line-clamp: 2;
    max-width: 100%;
    margin: 0;
  }
  .ai-products__card-audience {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin-top: 4px;
    padding: 7px 12px;
    gap: 6px;
    background: #faf9fe;
    border: 1px solid #ece7f7;
    border-radius: 9px;
  }
  .ai-products__card-audience svg {
    width: 13px !important;
    height: 13px !important;
    color: #8b5cf6;
    flex-shrink: 0;
  }
  .ai-products__card-audience span {
    font-size: 10.5px;
    color: #6b6880;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .ai-products__card-reveal {
    display: none;
  }
  .ai-products__card-action {
    flex: none;
    width: 100%;
    margin-top: 14px;
    padding: 12px 0 0;
    border-right: none;
    border-top: 1px dashed #ebe6f5;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ai-products__card-price {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 10.5px;
    color: #6b6880;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-products__card-price strong {
    display: inline;
    font-size: 14px;
    margin-right: 3px;
  }
  .ai-products__card-price small {
    font-size: 10px;
    margin-right: 2px;
  }
  .ai-products__card-btn {
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    padding: 0 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .ai-products__card {
    padding: 40px 12px 12px;
  }
  .ai-products__card-logo img {
    width: 84px !important;
    height: 84px !important;
    border-radius: 22px;
  }
  .ai-products__card-title {
    font-size: 13.5px;
  }
  .ai-products__card-desc {
    font-size: 11.5px;
  }
  .ai-products__card-tags {
    gap: 4px;
  }
  .ai-products__card-tag {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .ai-products__card-audience {
    padding: 6px 10px;
    gap: 5px;
  }
  .ai-products__card-audience span {
    font-size: 10px;
  }
  .ai-products__card-action {
    gap: 8px;
    padding-top: 10px;
    margin-top: 12px;
  }
  .ai-products__card-price {
    font-size: 10px;
  }
  .ai-products__card-price strong {
    font-size: 14px;
  }
  .ai-products__card-price small {
    font-size: 9.5px;
  }
  .ai-products__card-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 11.5px;
    max-width: 60%;
  }
  .ai-products__card-save {
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
    right: auto;
    border-radius: 9px;
  }
  .ai-products__card-save svg {
    width: 13px !important;
    height: 13px !important;
  }
  .ai-products__card-compare {
    top: 10px;
    right: 10px;
    left: auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .ai-products__card-compare svg {
    width: 13px !important;
    height: 13px !important;
  }
}
[data-theme=dark] .ai-products__card {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .ai-products__card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
[data-theme=dark] .ai-products__card-logo {
  background: #0d0b32;
}
[data-theme=dark] .ai-products__card-title {
  color: #e0e0ff;
}
[data-theme=dark] .ai-products__card-desc {
  color: #7b77c5;
}
[data-theme=dark] .ai-products__card-audience {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .ai-products__card-audience span {
  color: #7b77c5;
}
[data-theme=dark] .ai-products__card-audience svg {
  color: #a78bfa;
}
[data-theme=dark] .ai-products__card-reveal p {
  color: #5a5790;
}
[data-theme=dark] .ai-products__card-action {
  border-color: #1e1b4b;
}
[data-theme=dark] .ai-products__card-price {
  color: #7b77c5;
}
[data-theme=dark] .ai-products__card-price strong {
  color: #e0e0ff;
}
[data-theme=dark] .ai-products__card-price small {
  color: #5a5790;
}
[data-theme=dark] .ai-products__card-btn {
  background: #1a1550;
  color: #c4b5fd;
}
[data-theme=dark] .ai-products__card-save {
  background: #1a1550;
}
[data-theme=dark] .ai-products__card-save svg {
  color: #5a5790;
}
[data-theme=dark] .ai-products__card-save:hover {
  background: #2a1f60;
}
[data-theme=dark] .ai-products__card-save:hover svg {
  color: #f59e0b;
}
[data-theme=dark] .ai-products__tag {
  background: #1a1550;
  color: #a78bfa;
}
[data-theme=dark] .ai-products__card[data-gradient=purple]:hover {
  border-color: #7c3aed;
}
[data-theme=dark] .ai-products__card[data-gradient=purple]:hover .ai-products__card-logo {
  background: #1a1550;
}
[data-theme=dark] .ai-products__card[data-gradient=pink]:hover {
  border-color: #db2777;
}
[data-theme=dark] .ai-products__card[data-gradient=pink]:hover .ai-products__card-logo {
  background: #2a1030;
}
[data-theme=dark] .ai-products__card[data-gradient=blue]:hover {
  border-color: #1d4ed8;
}
[data-theme=dark] .ai-products__card[data-gradient=blue]:hover .ai-products__card-logo {
  background: #0f1a3a;
}
[data-theme=dark] .ai-products__card[data-gradient=emerald]:hover {
  border-color: #047857;
}
[data-theme=dark] .ai-products__card[data-gradient=emerald]:hover .ai-products__card-logo {
  background: #0a2620;
}
[data-theme=dark] .ai-products__card[data-gradient=orange]:hover {
  border-color: #d97706;
}
[data-theme=dark] .ai-products__card[data-gradient=orange]:hover .ai-products__card-logo {
  background: #2a1f10;
}
[data-theme=dark] .pagination li a.item {
  background: #110e3a;
  border-color: #1e1b4b;
  color: #7b77c5;
}
[data-theme=dark] .pagination li a.item:hover {
  border-color: #7c3aed;
  color: #c4b5fd;
}
[data-theme=dark] .pagination li a.item.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
}

.cmp-modal {
  --cmp-cols: 2;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cmp-modal[hidden] {
  display: none;
}
.cmp-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cmp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 40, 0.6);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  cursor: pointer;
}
.cmp-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  max-height: min(92vh, 92dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(15, 11, 72, 0.06);
  box-shadow: 0 36px 80px -16px rgba(124, 58, 237, 0.45), 0 12px 30px -8px rgba(15, 11, 72, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cmp-modal.is-open .cmp-modal__panel {
  transform: translateY(0) scale(1);
}
.cmp-modal__close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(15, 11, 72, 0.06);
  border: 0;
  color: rgba(15, 11, 72, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s ease;
}
.cmp-modal__close:hover {
  background: #ef4444;
  color: #fff;
  transform: rotate(90deg);
}
.cmp-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.06);
  background: radial-gradient(ellipse 100% 100% at 100% 0%, rgba(124, 58, 237, 0.08), transparent 60%), linear-gradient(180deg, rgba(124, 58, 237, 0.04), #fff 60%);
}
.cmp-modal__head-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(124, 58, 237, 0.6);
}
.cmp-modal__head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-modal__eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c3aed;
}
.cmp-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f0b48;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cmp-modal__count-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 999px;
  color: #7c3aed;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}
.cmp-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 16px;
}
.cmp-modal__body::-webkit-scrollbar {
  width: 6px;
}
.cmp-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.cmp-modal__body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.18);
  border-radius: 6px;
}
.cmp-modal__cards {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 140px repeat(var(--cmp-cols), 1fr);
  gap: 12px;
  padding: 16px 0 12px;
  background: linear-gradient(180deg, #fff 0%, #fff 80%, transparent 100%);
}
.cmp-modal__cards-spacer { /* empty cell aligning with row labels */ }
.cmp-modal__card {
  --c1: #8b5cf6;
  --c2: #6d28d9;
  text-align: center;
  padding: 16px 14px 14px;
  border-radius: 16px;
  border: 1.5px solid #ebe6f5;
  background: linear-gradient(155deg, #ffffff 0%, #faf8fe 100%);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.cmp-modal__card[data-gradient=purple] {
  --c1: #8b5cf6;
  --c2: #6d28d9;
}
.cmp-modal__card[data-gradient=pink] {
  --c1: #ec4899;
  --c2: #db2777;
}
.cmp-modal__card[data-gradient=blue] {
  --c1: #3b82f6;
  --c2: #1d4ed8;
}
.cmp-modal__card[data-gradient=emerald] {
  --c1: #10b981;
  --c2: #047857;
}
.cmp-modal__card[data-gradient=orange] {
  --c1: #f59e0b;
  --c2: #d97706;
}
.cmp-modal__card:hover {
  border-color: var(--c1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.3);
}
.cmp-modal__card-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--c1), #fff 88%), #fff);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cmp-modal__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.cmp-modal__card-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmp-modal__card-price {
  font-size: 11px;
  color: #888;
  direction: ltr;
}
.cmp-modal__card-price strong {
  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  color: #1a1a2e;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cmp-modal__card-price small {
  font-size: 10px;
  color: #999;
}
.cmp-modal__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cmp-modal__card-link:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -4px rgba(124, 58, 237, 0.5);
}
.cmp-modal__matrix {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}
.cmp-modal__row {
  display: grid;
  grid-template-columns: 140px repeat(var(--cmp-cols), 1fr);
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #faf9fe;
  border: 1px solid rgba(15, 11, 72, 0.05);
  align-items: stretch;
}
.cmp-modal__row:nth-child(odd) {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(124, 58, 237, 0.01));
}
.cmp-modal__row-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #4a4664;
}
.cmp-modal__row-label svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.cmp-modal__row-cell {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.78);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cmp-modal__row-cell.is-multiline {
  align-items: flex-start;
  text-align: right;
  line-height: 1.7;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.7);
  font-size: 11.5px;
}
.cmp-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.cmp-modal__badge svg {
  flex-shrink: 0;
}
.cmp-modal__badge--yes {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.cmp-modal__badge--no {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.cmp-modal__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.cmp-modal__chips span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.cmp-modal__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(15, 11, 72, 0.06);
  background: linear-gradient(0deg, rgba(124, 58, 237, 0.04), #fff);
}
.cmp-modal__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 20px;
  border-radius: 13px;
  border: 0;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
}
.cmp-modal__btn--ghost {
  flex: 0 0 auto;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.7);
}
.cmp-modal__btn--ghost:hover {
  background: rgba(15, 11, 72, 0.1);
  color: #0f0b48;
}
.cmp-modal__btn--primary {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 10px 22px -6px rgba(124, 58, 237, 0.5);
}
.cmp-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -6px rgba(124, 58, 237, 0.65);
}
@media (max-width: 768px) {
  .cmp-modal {
    padding: 12px;
  }
  .cmp-modal__panel {
    max-height: min(94vh, 94dvh);
    border-radius: 18px;
  }
  .cmp-modal__close {
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
  }
  .cmp-modal__head {
    padding: 18px 18px 14px;
    gap: 10px;
  }
  .cmp-modal__head-ico {
    width: 40px;
    height: 40px;
  }
  .cmp-modal__head-ico svg {
    width: 18px;
    height: 18px;
  }
  .cmp-modal__title {
    font-size: 15px;
  }
  .cmp-modal__eyebrow {
    font-size: 9.5px;
  }
  .cmp-modal__count-badge {
    font-size: 10.5px;
    padding: 4px 9px;
  }
  .cmp-modal__body {
    padding: 0 14px 12px;
  }
  .cmp-modal__cards {
    grid-template-columns: 88px repeat(var(--cmp-cols), 1fr);
    gap: 8px;
    padding: 12px 0 10px;
  }
  .cmp-modal__card {
    padding: 12px 10px 10px;
    gap: 7px;
    border-radius: 12px;
  }
  .cmp-modal__card-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .cmp-modal__card-title {
    font-size: 11.5px;
  }
  .cmp-modal__card-price strong {
    font-size: 13px;
  }
  .cmp-modal__card-price small {
    font-size: 9px;
  }
  .cmp-modal__card-link {
    height: 28px;
    font-size: 10.5px;
    padding: 0 8px;
  }
  .cmp-modal__row {
    grid-template-columns: 88px repeat(var(--cmp-cols), 1fr);
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .cmp-modal__row-label {
    font-size: 11px;
    gap: 5px;
  }
  .cmp-modal__row-label svg {
    width: 11px;
    height: 11px;
  }
  .cmp-modal__row-cell {
    font-size: 11.5px;
  }
  .cmp-modal__row-cell.is-multiline {
    font-size: 10.5px;
    line-height: 1.6;
  }
  .cmp-modal__badge {
    font-size: 10px;
    padding: 2px 7px;
  }
  .cmp-modal__chips span {
    font-size: 9.5px;
    padding: 1px 6px;
  }
  .cmp-modal__foot {
    padding: 12px 14px 14px;
    gap: 8px;
  }
  .cmp-modal__btn {
    height: 42px;
    font-size: 12.5px;
  }
  .cmp-modal__btn--ghost {
    padding: 0 16px;
  }
}
@media (max-width: 480px) {
  .cmp-modal {
    padding: 8px;
  }
  .cmp-modal__panel {
    border-radius: 14px;
  }
  .cmp-modal__head {
    padding: 16px 14px 12px;
    gap: 8px;
  }
  .cmp-modal__head-ico {
    width: 36px;
    height: 36px;
  }
  .cmp-modal__head-ico svg {
    width: 16px;
    height: 16px;
  }
  .cmp-modal__title {
    font-size: 13.5px;
  }
  .cmp-modal__body {
    padding: 0 10px 10px;
  }
  .cmp-modal__cards {
    grid-template-columns: 70px repeat(var(--cmp-cols), minmax(110px, 1fr));
    gap: 6px;
  }
  .cmp-modal__row {
    grid-template-columns: 70px repeat(var(--cmp-cols), minmax(110px, 1fr));
    gap: 6px;
    padding: 8px;
  }
  .cmp-modal__row-label {
    font-size: 10px;
  }
  .cmp-modal__row-cell {
    font-size: 10.5px;
  }
  .cmp-modal__card-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .cmp-modal__card-title {
    font-size: 10.5px;
  }
  .cmp-modal__card-price strong {
    font-size: 12px;
  }
  .cmp-modal__card-link {
    height: 26px;
    font-size: 10px;
  }
}

[data-theme=dark] .cmp-modal__panel {
  background: #110e3a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 36px 80px -16px rgba(0, 0, 0, 0.7), 0 12px 30px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
[data-theme=dark] .cmp-modal__close {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .cmp-modal__head {
  background: radial-gradient(ellipse 100% 100% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 60%), linear-gradient(180deg, rgba(124, 58, 237, 0.1), #110e3a 60%);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .cmp-modal__title {
  color: #f0ecff;
}
[data-theme=dark] .cmp-modal__eyebrow {
  color: #c4b5fd;
}
[data-theme=dark] .cmp-modal__count-badge {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.35);
  color: #c4b5fd;
}
[data-theme=dark] .cmp-modal__cards {
  background: linear-gradient(180deg, #110e3a 0%, #110e3a 80%, transparent 100%);
}
[data-theme=dark] .cmp-modal__card {
  background: linear-gradient(155deg, #15123a 0%, #110e3a 100%);
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .cmp-modal__card-logo {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .cmp-modal__card-title {
  color: #f0ecff;
}
[data-theme=dark] .cmp-modal__card-price small {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .cmp-modal__row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .cmp-modal__row:nth-child(odd) {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0.02));
}
[data-theme=dark] .cmp-modal__row-label {
  color: #b6b3d9;
}
[data-theme=dark] .cmp-modal__row-label svg {
  color: #a78bfa;
}
[data-theme=dark] .cmp-modal__row-cell {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme=dark] .cmp-modal__row-cell.is-multiline {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .cmp-modal__badge--yes {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
}
[data-theme=dark] .cmp-modal__badge--no {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.3);
}
[data-theme=dark] .cmp-modal__chips span {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}
[data-theme=dark] .cmp-modal__foot {
  background: linear-gradient(0deg, rgba(167, 139, 250, 0.1), #110e3a);
  border-top-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .cmp-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .cmp-modal__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0ecff;
}

@media (max-width: 768px) {
  [data-theme=dark] .ai-products__card[data-gradient=purple] {
    --card-c1: rgba(139, 92, 246, 0.32);
    --card-edge: rgba(167, 139, 250, 0.5);
  }
  [data-theme=dark] .ai-products__card[data-gradient=pink] {
    --card-c1: rgba(236, 72, 153, 0.28);
    --card-edge: rgba(244, 114, 182, 0.5);
  }
  [data-theme=dark] .ai-products__card[data-gradient=blue] {
    --card-c1: rgba(59, 130, 246, 0.28);
    --card-edge: rgba(96, 165, 250, 0.5);
  }
  [data-theme=dark] .ai-products__card[data-gradient=emerald] {
    --card-c1: rgba(16, 185, 129, 0.28);
    --card-edge: rgba(52, 211, 153, 0.5);
  }
  [data-theme=dark] .ai-products__card[data-gradient=orange] {
    --card-c1: rgba(245, 158, 11, 0.32);
    --card-edge: rgba(252, 211, 77, 0.5);
  }
  [data-theme=dark] .ai-products__card-title {
    color: #f0ecff;
  }
  [data-theme=dark] .ai-products__card-desc {
    color: rgba(255, 255, 255, 0.6);
  }
  [data-theme=dark] .ai-products__card-audience {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  [data-theme=dark] .ai-products__card-audience svg {
    color: #a78bfa;
  }
  [data-theme=dark] .ai-products__card-audience span {
    color: rgba(255, 255, 255, 0.7);
  }
  [data-theme=dark] .ai-products__card .ai-products__tag {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
  }
  [data-theme=dark] .ai-products__card-save {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  }
  [data-theme=dark] .ai-products__card-save svg {
    color: rgba(255, 255, 255, 0.55);
  }
  [data-theme=dark] .ai-products__card-save:hover, [data-theme=dark] .ai-products__card-save:active {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
  }
  [data-theme=dark] .ai-products__card-save:hover svg, [data-theme=dark] .ai-products__card-save:active svg {
    color: #fcd34d;
  }
  [data-theme=dark] .ai-products__card-save.active, [data-theme=dark] .ai-products__card-save.is-saved {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
  }
  [data-theme=dark] .ai-products__card-save.active svg, [data-theme=dark] .ai-products__card-save.is-saved svg {
    color: #fff;
    fill: #fff;
  }
  [data-theme=dark] .ai-products__card-compare {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  }
  [data-theme=dark] .ai-products__card-compare svg {
    color: #c4b5fd;
  }
  [data-theme=dark] .ai-products__card-compare:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(167, 139, 250, 0.45);
  }
  [data-theme=dark] .ai-products__card-compare:hover svg {
    color: #ddd6fe;
  }
  [data-theme=dark] .ai-products__card-compare.is-active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border-color: transparent;
  }
  [data-theme=dark] .ai-products__card-compare.is-active svg {
    color: #fff;
  }
  [data-theme=dark] .ai-products__card-action {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  [data-theme=dark] .ai-products__card-price {
    color: rgba(255, 255, 255, 0.55);
  }
  [data-theme=dark] .ai-products__card-price strong {
    color: #f0ecff;
  }
  [data-theme=dark] .ai-products__card-price small {
    color: rgba(255, 255, 255, 0.45);
  }
  [data-theme=dark] .ai-products__card-btn {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
  }
  [data-theme=dark] .ai-products__card-btn:hover {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
  }
}

.ai-top-cat {
  margin-bottom: 36px;
}
.ai-top-cat__item {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ai-top-cat__item__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #f0ecf9;
  position: relative;
  transition: all 0.35s ease;
  cursor: pointer;
}
.ai-top-cat__item__list > a {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.ai-top-cat__item__list:hover {
  border-color: #c4b5fd;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
}
.ai-top-cat__item__list:hover .ai-top-cat__item__list__icon {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
}
.ai-top-cat__item__list__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f3f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  transition: all 0.35s ease;
}
.ai-top-cat__item__list__title {
  text-align: center;
}
.ai-top-cat__item__list__title h3 {
  font-size: 13px;
  color: #888;
  font-weight: 500;
  margin: 0;
}
.ai-top-cat__item__list__title h3 strong {
  color: #1a1a2e;
  font-weight: 700;
}

.ai-catNew__breadcrumb {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
.ai-catNew__breadcrumb a {
  color: #7c3aed;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.ai-catNew__breadcrumb a:after {
  content: "/";
  color: #ccc;
  margin: 0 6px;
  font-size: 12px;
}
.ai-catNew__breadcrumb span {
  color: #666;
  font-size: 13px;
}
.ai-catNew__title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 0;
}
.ai-catNew__title__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #f8f7fc;
  border-radius: 14px 0 0 14px;
  flex: 1;
  height: 56px;
}
.ai-catNew__title__item h2 {
  font-size: 18px;
  color: #1a1a2e;
  margin: 0;
  font-weight: 700;
}
.ai-catNew__title__item form {
  display: flex;
}
.ai-catNew__title__item form .form-select {
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid #e9e5f5;
  background: #fff;
  display: flex;
  align-items: center;
}
.ai-catNew__title__item form select {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}
.ai-catNew__title__showFavorite {
  flex: 0 0 160px;
  max-width: 160px;
}
.ai-catNew__title__showFavorite input {
  display: none;
}
.ai-catNew__title__showFavorite input:checked + label {
  background: #7c3aed;
}
.ai-catNew__title__showFavorite label {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 0 14px 14px 0;
  font-size: 14px;
  color: #fff;
  height: 56px;
  line-height: 56px;
  display: block;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}
.ai-catNew__title__showFavorite label i:before {
  color: #fff;
}
.ai-catNew__title__showFavorite label:hover {
  opacity: 0.9;
}

@media (max-width: 1200px) {
  .ai-top-cat__item {
    grid-template-columns: repeat(3, 1fr);
  }
  .ai-catNew__title__item h2 {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .ai-top-cat__item {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ai-top-cat__item__list {
    padding: 18px 10px;
    gap: 8px;
  }
  .ai-top-cat__item__list__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .ai-catNew__title {
    flex-direction: column;
    gap: 8px;
  }
  .ai-catNew__title__item {
    border-radius: 14px;
    height: 50px;
  }
  .ai-catNew__title__item h2 {
    display: none;
  }
  .ai-catNew__title__showFavorite {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .ai-catNew__title__showFavorite label {
    border-radius: 14px;
    height: 46px;
    line-height: 46px;
  }
  .ai-catNew__breadcrumb {
    margin-top: 16px;
  }
  .ai-catNew__breadcrumb a {
    font-size: 12px;
  }
  .ai-catNew__breadcrumb span {
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  .ai-top-cat__item {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ai-catNew__title__showFavorite {
    display: none;
  }
}
[data-theme=dark] .ai-top-cat__item__list {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .ai-top-cat__item__list__icon {
  background: #1a1550;
  color: #a78bfa;
}
[data-theme=dark] .ai-top-cat__item__list__title h3 {
  color: #7b77c5;
}
[data-theme=dark] .ai-top-cat__item__list__title h3 strong {
  color: #e0e0ff;
}
[data-theme=dark] .ai-top-cat__item__list:hover {
  border-color: #7c3aed;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.15);
}
[data-theme=dark] .ai-top-cat__item__list:hover .ai-top-cat__item__list__icon {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
[data-theme=dark] .ai-catNew__breadcrumb a {
  color: #a78bfa;
}
[data-theme=dark] .ai-catNew__breadcrumb a:after {
  color: #333;
}
[data-theme=dark] .ai-catNew__breadcrumb span {
  color: #7b77c5;
}
[data-theme=dark] .ai-catNew__title__item {
  background: #110e3a;
}
[data-theme=dark] .ai-catNew__title__item h2 {
  color: #e0e0ff;
}
[data-theme=dark] .ai-catNew__title__item .form-select {
  border-color: #1e1b4b;
  background: #0d0b32;
}
[data-theme=dark] .ai-catNew__title__item select {
  color: #a78bfa;
}

.ai-cat-hero {
  position: relative;
  margin: 14px 0 22px;
  padding: 22px 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #faf8ff 60%, #f3f0ff 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.12);
  box-shadow: 0 14px 36px -16px rgba(124, 58, 237, 0.25);
  isolation: isolate;
  overflow: hidden;
}
.ai-cat-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ai-cat-hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
}
.ai-cat-hero__bg-orb--1 {
  width: 280px;
  height: 280px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 70%);
}
.ai-cat-hero__bg-orb--2 {
  width: 240px;
  height: 240px;
  bottom: -100px;
  left: -60px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 70%);
}
.ai-cat-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 80%);
}
.ai-cat-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 999px;
  margin-bottom: 18px;
}
.ai-cat-hero__breadcrumb a, .ai-cat-hero__breadcrumb span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ai-cat-hero__breadcrumb a svg, .ai-cat-hero__breadcrumb span svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.ai-cat-hero__breadcrumb a:hover {
  color: #7c3aed;
}
.ai-cat-hero__breadcrumb span {
  color: #1a1a2e;
  font-weight: 800;
}
.ai-cat-hero__breadcrumb-sep {
  color: rgba(124, 58, 237, 0.4);
  flex-shrink: 0;
}
.ai-cat-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.ai-cat-hero__main {
  flex: 1 1 380px;
  min-width: 0;
}
.ai-cat-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  background: linear-gradient(135deg, #8b5cf6, #db2777);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.5);
}
.ai-cat-hero__title {
  font-size: 24px;
  font-weight: 900;
  color: #0f0b48;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ai-cat-hero__title strong {
  background: linear-gradient(135deg, #8b5cf6 0%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-cat-hero__sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  margin: 0 0 14px;
  line-height: 1.7;
}
.ai-cat-hero__stats {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.1);
  border-radius: 12px;
}
.ai-cat-hero__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.ai-cat-hero__stat strong {
  font-size: 16px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  direction: ltr;
}
.ai-cat-hero__stat span {
  font-size: 11px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
}
.ai-cat-hero__stat-sep {
  width: 1px;
  height: 16px;
  background: rgba(124, 58, 237, 0.2);
}
.ai-cat-hero__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.ai-cat-hero__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 38px;
  height: 42px;
  background: #fff;
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-cat-hero__sort:hover {
  border-color: #7c3aed;
  box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.25);
}
.ai-cat-hero__sort > svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.ai-cat-hero__sort select {
  flex: 1;
  min-width: 140px;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1a2e;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  padding-left: 8px;
}
.ai-cat-hero__sort::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(124, 58, 237, 0.6);
  border-bottom: 2px solid rgba(124, 58, 237, 0.6);
  pointer-events: none;
}
.ai-cat-hero__fav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 42px;
  background: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  color: #b45309;
  transition: all 0.2s ease;
}
.ai-cat-hero__fav input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ai-cat-hero__fav-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.ai-cat-hero__fav:hover {
  background: linear-gradient(135deg, #fffbeb, #fde68a);
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.3);
}
input:checked ~ .ai-cat-hero__fav-box {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(245, 158, 11, 0.5);
}
@media (max-width: 768px) {
  .ai-cat-hero {
    margin: 8px 0 14px;
    padding: 14px 12px 12px;
    border-radius: 14px;
    text-align: center;
  }
  .ai-cat-hero__bg-orb--1 {
    width: 180px;
    height: 180px;
    top: -80px;
    right: -50px;
    opacity: 0.55;
  }
  .ai-cat-hero__bg-orb--2 {
    width: 160px;
    height: 160px;
    bottom: -70px;
    left: -40px;
    opacity: 0.5;
  }
  .ai-cat-hero__bg-grid {
    background-size: 22px 22px;
  }
  .ai-cat-hero__breadcrumb {
    display: inline-flex;
    padding: 4px 10px;
    margin-bottom: 12px;
    align-self: center;
  }
  .ai-cat-hero__breadcrumb a, .ai-cat-hero__breadcrumb span {
    font-size: 11px;
    gap: 4px;
  }
  .ai-cat-hero__breadcrumb a svg, .ai-cat-hero__breadcrumb span svg {
    width: 11px !important;
    height: 11px !important;
  }
  .ai-cat-hero__breadcrumb-sep {
    width: 9px !important;
    height: 9px !important;
  }
  .ai-cat-hero__row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .ai-cat-hero__main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ai-cat-hero__eyebrow {
    font-size: 9.5px;
    padding: 3px 9px;
    gap: 5px;
    margin-bottom: 7px;
  }
  .ai-cat-hero__eyebrow svg {
    width: 10px !important;
    height: 10px !important;
  }
  .ai-cat-hero__title {
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  .ai-cat-hero__sub {
    font-size: 11.5px;
    line-height: 1.65;
    margin-bottom: 10px;
  }
  .ai-cat-hero__stats {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }
  .ai-cat-hero__stat {
    flex: 1 1 auto;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .ai-cat-hero__stat strong {
    font-size: 13px;
  }
  .ai-cat-hero__stat span {
    font-size: 9.5px;
  }
  .ai-cat-hero__stat-sep {
    height: 22px;
  }
  .ai-cat-hero__actions {
    flex: 1 1 auto;
    width: 100%;
    gap: 8px;
  }
  .ai-cat-hero__fav {
    height: 38px;
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 0 14px;
    gap: 7px;
  }
  .ai-cat-hero__fav-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
  }
  .ai-cat-hero__fav-box svg {
    width: 11px !important;
    height: 11px !important;
  }
}
@media (max-width: 380px) {
  .ai-cat-hero {
    padding: 12px 10px 10px;
  }
  .ai-cat-hero__title {
    font-size: 15.5px;
  }
  .ai-cat-hero__sub {
    font-size: 11px;
  }
  .ai-cat-hero__stats {
    padding: 7px 8px;
    gap: 6px;
  }
  .ai-cat-hero__stat strong {
    font-size: 12.5px;
  }
  .ai-cat-hero__stat span {
    font-size: 9px;
  }
  .ai-cat-hero__stat-sep {
    display: none;
  }
  .ai-cat-hero__breadcrumb a, .ai-cat-hero__breadcrumb span {
    font-size: 10.5px;
  }
}

[data-theme=dark] .ai-cat-hero {
  background: linear-gradient(135deg, #110e3a 0%, #15123a 60%, #1a1648 100%);
  border-color: rgba(167, 139, 250, 0.18);
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .ai-cat-hero__breadcrumb {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(167, 139, 250, 0.18);
}
[data-theme=dark] .ai-cat-hero__breadcrumb a, [data-theme=dark] .ai-cat-hero__breadcrumb span {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .ai-cat-hero__breadcrumb a svg, [data-theme=dark] .ai-cat-hero__breadcrumb span svg {
  color: #a78bfa;
}
[data-theme=dark] .ai-cat-hero__breadcrumb a:hover {
  color: #c4b5fd;
}
[data-theme=dark] .ai-cat-hero__breadcrumb span {
  color: #f0ecff;
}
[data-theme=dark] .ai-cat-hero__breadcrumb-sep {
  color: rgba(167, 139, 250, 0.4);
}
[data-theme=dark] .ai-cat-hero__title {
  color: #f0ecff;
}
[data-theme=dark] .ai-cat-hero__title strong {
  background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .ai-cat-hero__sub {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .ai-cat-hero__stats {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(167, 139, 250, 0.18);
}
[data-theme=dark] .ai-cat-hero__stat strong {
  color: #f0ecff;
}
[data-theme=dark] .ai-cat-hero__stat span {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .ai-cat-hero__stat-sep {
  background: rgba(167, 139, 250, 0.2);
}
[data-theme=dark] .ai-cat-hero__sort {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(167, 139, 250, 0.25);
}
[data-theme=dark] .ai-cat-hero__sort select {
  color: #f0ecff;
}
[data-theme=dark] .ai-cat-hero__sort::after {
  border-color: #a78bfa;
}
[data-theme=dark] .ai-cat-hero__sort > svg {
  color: #a78bfa;
}
[data-theme=dark] .ai-cat-hero__sort:hover {
  border-color: #a78bfa;
}
[data-theme=dark] .ai-cat-hero__fav {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}
[data-theme=dark] .ai-cat-hero__fav-box {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}
[data-theme=dark] .ai-cat-hero__fav:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
}

.top-cat {
  margin-top: -46px;
  position: relative;
  margin-bottom: 60px;
}
.top-cat__share {
  position: absolute;
  top: 38px;
  left: 45px;
  display: flex;
  align-items: center;
}
.top-cat__share .share {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-left: 40px;
  display: flex;
  align-items: center;
  transition: 0.3s;
  opacity: 1;
}
.top-cat__share .share:hover {
  opacity: 0.7;
}
.top-cat__share .share i {
  font-size: 23px;
  color: #ffffff;
  margin-right: 13px;
}
.top-cat__share .favorite {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: 0.3s;
  opacity: 1;
}
.top-cat__share .favorite:hover {
  opacity: 0.7;
}
.top-cat__share .favorite i {
  font-size: 21px;
  color: #ffffff;
  margin-right: 11px;
}
.top-cat__title-en {
  position: absolute;
  bottom: 40px;
  left: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.top-cat__title-en h2 {
  text-shadow: 0 3px 5px rgba(0, 1, 1, 0.55);
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 5px;
}
.top-cat__title-en .top-cat__title-en-cat {
  text-shadow: 0 3px 5px rgba(0, 1, 1, 0.55);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}
.top-cat__logo {
  position: absolute;
  top: -26px;
  left: 50%;
  background-image: url("../img/logo-bg-top-single.svg");
  transform: translate(-50%, 0);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 100px;
}
.top-cat__info {
  display: flex;
  align-items: flex-start;
  position: absolute;
  right: 28px;
  bottom: -43px;
}
.top-cat__info .top-cat__info-logo {
  width: 141px;
  height: 181px;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 25px;
  margin-left: 35px;
  position: relative;
}
.top-cat__info .top-cat__info-logo img {
  position: relative;
  z-index: 110;
}
.top-cat__info .top-cat__info-logo:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 35px;
  background-image: linear-gradient(69deg, #6a4fa0 0%, #6a4fa0 2%, #6a4fa0 33%, #16a2bd 42%, #89c736 52%, #fcc43f 61%, #d02054 69%, #d02054 100%);
  opacity: 0.5;
  filter: blur(10px);
  border-radius: 10px;
  z-index: 90;
}
.top-cat__info .top-cat__info-logo:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  background-color: #fff;
  z-index: 100;
}
.top-cat__info .top-cat__info-title {
  margin-top: 33px;
}
.top-cat__info .top-cat__info-title .top-cat__info-title-tlt {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.top-cat__info .top-cat__info-title .top-cat__info-title-tlt .title {
  text-shadow: 0 3px 5px rgba(0, 1, 1, 0.55);
  color: #ffffff;
  font-size: 27px;
  font-weight: 400;
  margin-left: 13px;
}
.top-cat__info .top-cat__info-title .top-cat__info-title-tlt .count {
  height: 29px;
  background-color: #f01919;
  border-radius: 60px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
}
.top-cat__info .top-cat__info-title .top-cat__info-title-tlt .count__numb {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  margin-left: 4px;
}
.top-cat__info .top-cat__info-title .top-cat__info-title-cat {
  text-shadow: 0 3px 5px rgba(0, 1, 1, 0.55);
  color: #ffffff;
  font-size: 14px;
}

[data-theme=dark] .top-cat__logo {
  background-image: url(../img/logo-bg-top-single-dark.svg);
}
[data-theme=dark] .top-cat__info .top-cat__info-logo {
  background-color: #070525;
}
[data-theme=dark] .top-cat__info .top-cat__info-logo:after {
  background-color: #070525;
}

.cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
}
.cat-header__breadcrumb {
  display: flex;
  align-items: center;
}
.cat-header__breadcrumb i {
  font-size: 23px;
  color: #000000;
  margin-left: 28px;
}
.cat-header__breadcrumb a {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.cat-header__breadcrumb a:after {
  content: "...";
  color: #a2a2a2;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-right: 20px;
  position: relative;
  bottom: 2px;
}
.cat-header__breadcrumb span {
  color: #a2a2a2;
  font-size: 15px;
  font-weight: 600;
}
.cat-header__amazing {
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: 27px;
}
.cat-header__amazing .cat-header__amazing-title {
  color: #606060;
  font-size: 12px;
  font-weight: 600;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cat-header__amazing .cat-header__amazing-title i {
  font-size: 25px;
  color: #f01919;
}
.cat-header__amazing .cat-header__amazing-button {
  width: 33px;
  height: 53px;
}
.cat-header__amazing .cat-header__amazing-button label {
  width: 100%;
  height: 100%;
  background-color: rgb(215, 215, 215);
  border-radius: 60px;
  position: relative;
  cursor: pointer;
}
.cat-header__amazing .cat-header__amazing-button label:after {
  content: "";
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 60px;
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translate(-50%, 0);
  transition: 0.3s;
}
.cat-header__amazing .cat-header__amazing-button input {
  display: none;
}
.cat-header__amazing .cat-header__amazing-button input:checked + label:after {
  top: calc(100% - 30px);
  background-color: #f01919;
}
.cat-header__sort .bootstrap-select .dropdown-toggle {
  border: 1px solid #d7d7d7;
  padding-right: 60px;
  padding-left: 55px;
  border-radius: 30px;
  font-size: 13px;
}
.cat-header__sort .bootstrap-select .dropdown-toggle:after {
  content: "مشاهده";
  color: #a1a1a1;
  font-size: 13px;
  font-weight: 600;
  display: block;
  position: absolute;
  right: 15px;
  top: 0;
  line-height: 40px;
  border: unset;
}
.cat-header__sort .bootstrap-select .dropdown-toggle:before {
  left: 0;
  width: 40px;
  text-align: center;
  line-height: 38px;
  border-right: 1px solid #d7d7d7;
}

[data-theme=dark] .cat-header__breadcrumb i {
  color: #c7c5ee;
}
[data-theme=dark] .cat-header__breadcrumb a {
  color: #c7c5ee;
}
[data-theme=dark] .cat-header__breadcrumb span {
  color: #908dd3;
}
[data-theme=dark] .cat-header__amazing .cat-header__amazing-title {
  color: #908dd3;
}
[data-theme=dark] .cat-header__amazing .cat-header__amazing-button label {
  background-color: #110f3f;
}
[data-theme=dark] .cat-header__amazing .cat-header__amazing-button label::after {
  background-color: #c7c5ee;
}
[data-theme=dark] .cat-header__sort .bootstrap-select .dropdown-toggle {
  border: 1px solid #110f3f;
}
[data-theme=dark] .cat-header__sort .bootstrap-select .dropdown-toggle::before {
  border-right: 1px solid #110f3f;
}
[data-theme=dark] .cat-header__sort .bootstrap-select .dropdown-toggle::after {
  color: #908dd3;
}
[data-theme=dark] .cat-header__sort .bootstrap-select .dropdown-toggle .filter-option {
  color: #c7c5ee;
}
[data-theme=dark] .cat-header__sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  border-radius: 5px;
  border: 1px solid #110f3f;
  background-color: #070525;
}

.cat-products {
  margin-bottom: 13px;
}
.cat-products__title {
  text-align: center;
  margin: 30px 0px 50px 0px;
}
.cat-products__title h1, .cat-products__title h2, .cat-products__title h3, .cat-products__title h4 {
  font-size: 35.09px;
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
}
.cat-products__title h1:before, .cat-products__title h2:before, .cat-products__title h3:before, .cat-products__title h4:before {
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  height: 6px;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
  border-radius: 100%;
  content: "";
}
.cat-products__title h1:after, .cat-products__title h2:after, .cat-products__title h3:after, .cat-products__title h4:after {
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  height: 9px;
  background-color: #a2a2a2;
  background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
  -webkit-filter: blur(12px);
  filter: blur(12px);
  opacity: 0.5;
  content: "";
}
.cat-products_paginate {
  margin: 50px 0;
}
.cat-products__item {
  margin-top: 57px;
}
.cat-products__item__list {
  max-width: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.36);
  border-radius: 13px;
  margin: 0 auto;
  min-height: 236px;
}
.cat-products__item .cat-products__item-img {
  max-width: 174px;
  max-height: 174px;
  margin: 0 auto;
}
.cat-products__item .cat-products__item-img figure {
  position: relative;
}
.cat-products__item .cat-products__item-img figure img {
  position: relative;
  z-index: 100;
  border-radius: 30px;
  margin-top: -57px;
}
.cat-products__item .cat-products__item-title {
  text-align: center;
  padding: 0px 7px;
  padding: 0px 7px;
  max-height: 71px;
  height: 71px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-bottom: 2px solid #e4e4e4;
}
.cat-products__item .cat-products__item-title h4 {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.cat-products__item .cat-products__item-title h4 a {
  display: block;
}
.cat-products__item .cat-products__item-title h4 span {
  display: none;
}
.cat-products__item .cat-products__item-footer ul {
  display: none;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-icon {
  align-items: center;
  padding: 7px;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-icon a {
  background-color: #68509e;
  border-radius: 0px 0px 25px 25px;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 34px;
  font-size: 17px;
  font-weight: 600;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-icon a i {
  margin-left: 5px;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-price {
  display: flex;
  align-items: center;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-price .price {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.38px;
  margin-left: 4px;
}
.cat-products__item .cat-products__item-footer .cat-products__item-footer-price .unit {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}
.cat-products__item .cat-products__item-range {
  width: 100%;
  padding: 0 21px;
}
.cat-products__item .cat-products__item-range .cat-products__range-title {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cat-products__item .cat-products__item-range .cat-products__range-title .range-discount {
  height: 17px;
  background-color: #ef473a;
  border-radius: 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.cat-products__item .cat-products__item-range .cat-products__range-title .range-discount i {
  font-size: 9px;
  color: #ffffff;
  margin-right: 2px;
}
.cat-products__item .cat-products__item-range .cat-products__range-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 60px 0 60px 60px;
  background-image: linear-gradient(to right, #f1fff1 0%, #fff6f5 100%);
}
.cat-products__item .cat-products__item-range .cat-products__range-content .min {
  display: flex;
  align-items: center;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .min ins {
  color: #ef473a;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .min .unit {
  color: #ef473a;
  font-size: 13px;
  font-weight: 600;
  margin-right: 5px;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .to {
  color: #000000;
  font-size: 17px;
  font-weight: 600;
  margin-right: 14px;
  margin-left: 14px;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .max {
  display: flex;
  align-items: center;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .max ins {
  color: #2b8728;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.cat-products__item .cat-products__item-range .cat-products__range-content .max .unit {
  color: #2b8728;
  font-size: 13px;
  font-weight: 600;
  margin-right: 5px;
}
.cat-products__item:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 30px;
  border-left: 1px solid #e1e1e1;
}
.cat-products .row > [class*=col-]:nth-of-type(4n + 1) .cat-products__item {
  justify-content: flex-start;
}
.cat-products .row > [class*=col-]:nth-of-type(4n) .cat-products__item {
  justify-content: flex-start;
}
.cat-products .row > [class*=col-]:nth-of-type(4n) .cat-products__item:before {
  display: none;
}
.cat-products__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.cat-products__list__item {
  width: 252px;
  max-width: 252px;
  border-left: 8px solid #e4e4e4;
  padding-top: 30px;
  padding-bottom: 20px;
}
.cat-products__list__item:nth-child(4n) {
  border-left: none;
}
.cat-products__list__item:nth-child(1), .cat-products__list__item:nth-child(2), .cat-products__list__item:nth-child(3), .cat-products__list__item:nth-child(4) {
  padding-top: 0px !important;
}

[data-theme=dark] .cat-products__title h1, [data-theme=dark] .cat-products__title h2, [data-theme=dark] .cat-products__title h3, [data-theme=dark] .cat-products__title h4 {
  color: #fff;
}
[data-theme=dark] .cat-products__item__list {
  background-color: #3b426b;
}
[data-theme=dark] .cat-products__item .cat-products__item-title {
  border-bottom: 2px solid #1f1c50;
}
[data-theme=dark] .cat-products__item .cat-products__item-title h4 {
  color: #fff;
}
[data-theme=dark] .cat-products__item .cat-products__item-range .cat-products__range-title {
  color: #c7c5ee;
}
[data-theme=dark] .cat-products__item .cat-products__item-footer .cat-products__item-footer-icon {
  color: #c7c5ee;
}
[data-theme=dark] .cat-products__item .cat-products__item-footer .cat-products__item-footer-icon i {
  color: #c7c5ee;
}
[data-theme=dark] .cat-products__item .cat-products__item-footer .cat-products__item-footer-price .price {
  color: #c7c5ee;
}
[data-theme=dark] .cat-products__item .cat-products__item-footer .cat-products__item-footer-price .unit {
  color: #c7c5ee;
}
[data-theme=dark] .cat-products__list__item {
  border-color: #1f1c50 !important;
}

.cat-info {
  background-color: #373737;
  margin-bottom: 79px;
  height: 406px;
  position: relative;
}
.cat-info__img {
  height: 100%;
}
.cat-info__img figure {
  height: 100%;
}
.cat-info__img figure img {
  height: 100%;
}
.cat-info__wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.cat-info__wrapper .wrapper {
  display: flex;
  padding-top: 50px;
}
.cat-info__wrapper .cat-info__information {
  flex-grow: 1;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 24px;
  margin-bottom: 21px;
  margin-top: -8px;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate {
  display: flex;
  align-items: center;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item__name {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.6;
  margin-left: 9px;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item__value {
  display: flex;
  align-items: center;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item__value-full {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item__value-rate {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item:nth-last-of-type(1) {
  margin-left: 0;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-title .title {
  color: #ffffff;
  font-size: 33px;
  font-weight: 600;
}
.cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-title .cat {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-top: -6px;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main {
  display: flex;
  justify-content: space-between;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item {
  display: flex;
  flex-direction: column;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item .item {
  margin-bottom: 3px;
  display: inline-block;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item .item__title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item .item__value {
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item .item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item--fa {
  max-width: 309px;
  width: 100%;
}
.cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item--en {
  max-width: 348px;
  width: 100%;
  direction: ltr;
  text-align: left;
}
.cat-info__wrapper .cat-info__thumbnail {
  margin-right: 37px;
}

[data-theme=dark] .cat-info {
  background-color: transparent;
}
[data-theme=dark] .cart-info__btns__right {
  background-color: #4a4781;
}

/* blog */
.header-blog {
  margin-bottom: 61px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.header-blog h2 {
  color: #000000;
  font-size: 25px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 28px;
}
.header-blog__cat {
  display: flex;
  align-items: center;
  margin-left: 21px;
}
.header-blog__cat .header-blog__cat-item {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  min-width: 111px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  margin-left: 11px;
  transition: 0.3s;
}
.header-blog__cat .header-blog__cat-item:hover {
  background-color: #d7d7d7;
}
.header-blog__cat .header-blog__cat-item:nth-last-of-type(1) {
  margin-left: 0;
}
.header-blog__search {
  flex-grow: 1;
}
.header-blog__search form {
  position: relative;
}
.header-blog__search form input {
  height: 50px;
  background-color: #efefef;
  border-radius: 8px;
  width: 100%;
  padding-right: 15px;
  padding-left: 40px;
}
.header-blog__search form button {
  position: absolute;
  display: flex;
  padding: 0;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}
.header-blog__search form button i {
  font-size: 17px;
  color: #000000;
}

[data-theme=dark] .header-blog h2 {
  color: #c7c5ee;
}
[data-theme=dark] .header-blog__search form input {
  background-color: transparent;
  border: 1px solid #1b1939;
  color: #c7c5ee;
}
[data-theme=dark] .header-blog__search form button {
  background-color: #070525;
}
[data-theme=dark] .header-blog__search form button i {
  color: #c7c5ee;
}
[data-theme=dark] .header-blog .header-blog__cat .header-blog__cat-item {
  color: #c7c5ee;
  border-color: #1b1939;
  background-color: #070525;
}

.slider-blog {
  overflow: hidden;
  margin-bottom: 61px;
}
.slider-blog__swiper {
  overflow: visible;
}
.slider-blog__item {
  position: relative;
  border-radius: 10px;
}
.slider-blog__item .slider-blog__item-info {
  position: absolute;
  right: 49px;
  bottom: 51px;
}
.slider-blog__item .slider-blog__item-info .slider-blog__item-info-title {
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 22px;
}
.slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta {
  display: flex;
  align-items: center;
}
.slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta .item {
  display: flex;
  align-items: center;
  margin-left: 22px;
}
.slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta .item i {
  font-size: 17px;
  color: #ffffff;
  margin-left: 9px;
}
.slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta .item__value {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
.slider-blog__item:before {
  content: "";
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 14%, transparent 85%);
  border-radius: 23px;
  transition: 0.3s;
  pointer-events: none;
}
.slider-blog__item:hover:before {
  top: 0;
}

.single-blog__content {
  font-size: 15px;
  line-height: 35px;
  text-align: justify;
}
.single-blog__content video,
.single-blog__content img,
.single-blog__content iframe {
  max-width: 100%;
}

.article-blog {
  margin-bottom: 50px;
}
.article-blog__header {
  display: flex;
  align-content: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 30px;
}
.article-blog__header .article-blog__header-title {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
}
.article-blog__header .article-blog__header-sort {
  display: flex;
  align-items: center;
}
.article-blog__header .article-blog__header-sort:before {
  content: "مشاهده";
  margin-left: 10px;
  font-weight: 600;
  color: #a1a1a1;
  font-size: 13px;
}
.article-blog__header .article-blog__header-sort .bootstrap-select .dropdown-toggle {
  border: none;
  padding-right: 0;
  padding-left: 25px;
  font-size: 13px;
}
.article-blog__header .article-blog__header-sort .bootstrap-select .dropdown-toggle:before {
  left: 0;
}
.article-blog__article .article-blog__article-footer {
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: flex-end;
}
.article-blog__article .article-blog__article-footer .article-blog__article-show {
  width: 251px;
  height: 50px;
  background-color: #f01919;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}
.article-blog__article .article-blog__article-footer .article-blog__article-pagination {
  display: flex;
  align-items: center;
}
.article-blog__article .article-blog__article-footer .article-blog__article-pagination .item {
  color: #000000;
  font-size: 17px;
  font-weight: 600;
  margin-left: 40px;
  transition: 0.3s;
}
.article-blog__article .article-blog__article-footer .article-blog__article-pagination .item:hover {
  color: #f01919;
}
.article-blog__article .article-blog__article-footer .article-blog__article-pagination .item.active {
  color: #f01919;
}
.article-blog__article .article-blog__article-footer .article-blog__article-pagination .item:nth-last-of-type(1) {
  margin-left: 0;
}

[data-theme=dark] .article-blog .article-blog__header-title {
  color: #c7c5ee;
}
[data-theme=dark] .article-blog__header {
  border-color: #1b1939;
}
[data-theme=dark] .article-blog__header .article-blog__header-sort:before {
  color: #44426e;
}
[data-theme=dark] .article-blog__header .article-blog__header-sort .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #c7c5ee;
}
[data-theme=dark] .article-blog__header .article-blog__header-sort .bootstrap-select .dropdown-toggle:before {
  color: #c7c5ee;
}
[data-theme=dark] .article-blog__article .article-blog__article-footer .article-blog__article-pagination .item {
  color: #c7c5ee;
}

/* news */
.aside-new {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}
.aside-new__img {
  margin-bottom: 47px;
}
.aside-new__img figure {
  position: relative;
}
.aside-new__img figure > img {
  position: relative;
  z-index: 100;
}
.aside-new__img figure .shadow {
  position: absolute;
  top: 13px;
  bottom: 0;
  right: 10px;
  left: 11px;
  z-index: 90;
  filter: blur(10px);
}
.aside-new__title {
  margin-bottom: 53px;
}
.aside-new__title h2 {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
}
.aside-new__info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 51px;
}
.aside-new__info-grid {
  flex: 1 0 50%;
}
.aside-new__info-grid:nth-of-type(1) {
  padding-left: 26px;
  border-left: 1px solid #e6e6e6;
}
.aside-new__info-grid:nth-of-type(2) {
  padding-right: 26px;
}
.aside-new__info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 31px;
}
.aside-new__info-item .name {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
}
.aside-new__info-item i {
  color: #000000;
  width: 20px;
  display: flex;
  justify-content: center;
}
.aside-new__info-item i.icon-profile {
  font-size: 17px;
}
.aside-new__info-item i.icon-hour {
  font-size: 19px;
}
.aside-new__info-item i.icon-statistics {
  font-size: 15px;
}
.aside-new__info-item i.icon-calender {
  font-size: 19px;
}
.aside-new__info-item i.icon-cat {
  font-size: 16px;
}
.aside-new__info-item:nth-last-of-type(1) {
  margin-bottom: 0;
}
.aside-new__rates {
  background-color: #17a404;
  border-radius: 10px;
  padding: 0 30px;
  padding-top: 31px;
  padding-bottom: 32px;
  margin-bottom: 40px;
}
.aside-new__rates .aside-new__rates-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-rating {
  display: flex;
  align-items: center;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-rating .item {
  margin-left: 21px;
  cursor: pointer;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-rating .item i {
  font-size: 25px;
  color: #ffffff;
  transition: 0.3s;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-rating .item:nth-last-of-type(1) {
  margin-left: 0;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-rating .item:hover i {
  color: #cbffc4;
}
.aside-new__rates .aside-new__rates-rate .aside-new__rates-numb {
  color: #ffffff;
  font-size: 42px;
  font-weight: 600;
  line-height: 40px;
}
.aside-new__rates .aside-new__rates-vote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.aside-new__rates .aside-new__rates-vote .title {
  color: #cbffc4;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 100;
  background-color: #17a404;
  padding-left: 19px;
}
.aside-new__rates .aside-new__rates-vote .vote {
  color: #cbffc4;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  z-index: 100;
  background-color: #17a404;
  padding-right: 17px;
}
.aside-new__rates .aside-new__rates-vote .vote__numb {
  color: #ffffff;
}
.aside-new__rates .aside-new__rates-vote:before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 90;
}
.aside-new__famous-title {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: #eeeeee;
  border-radius: 20px 20px 0 0;
}
.aside-new__famous-title .title {
  color: #000000;
  font-size: 18.5px;
  font-weight: 600;
  margin-bottom: 0px;
  line-height: 45px;
}
.aside-new__famous-info {
  margin-bottom: 20px;
}
.aside-new__famous-info ul {
  background-color: #f6f6f6;
  padding: 15px 25px;
  border-radius: 0 0 20px 20px;
}
.aside-new__famous-info ul li {
  line-height: 40px;
}
.aside-new__famous-info ul li a {
  font-size: 14px;
  font-weight: 600;
}
.aside-new__related {
  padding-bottom: 20px;
}
.aside-new__related-title {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: #eeeeee;
  border-radius: 20px 20px 0 0;
}
.aside-new__related-title .title {
  color: #000000;
  font-size: 18.5px;
  font-weight: 600;
  margin-bottom: 0px;
  line-height: 45px;
}
.aside-new__related-info {
  margin-bottom: 20px;
}
.aside-new__related-info__img {
  width: 121px;
  height: 78px;
  margin-left: 10px;
  border-radius: 15px 15px 0 15px;
}
.aside-new__related-info__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 15px;
}
.aside-new__related-info__title {
  flex: 0 0 50%;
  max-width: 50%;
}
.aside-new__related-info__title h3 {
  font-size: 14px;
  font-weight: 600;
}
.aside-new__related-info__title h3 a {
  line-height: 25px;
  display: block;
}
.aside-new__related-info ul {
  background-color: #f6f6f6;
  padding: 15px 25px;
  border-radius: 0 0 20px 20px;
}
.aside-new__related-info ul li {
  line-height: 40px;
  display: flex;
  border-bottom: 1px solid #eeeeee;
  padding: 15px 0;
}
.aside-new__related-info ul li:last-child {
  border-bottom: none;
}
.aside-new__related-info ul li > a {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

[data-theme=dark] .aside-new__info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 51px;
}
[data-theme=dark] .aside-new__info-grid {
  flex: 1 0 50%;
}
[data-theme=dark] .aside-new__info-grid:nth-of-type(1) {
  padding-left: 26px;
  border-left: 1px solid #e6e6e6;
}
[data-theme=dark] .aside-new__info-grid:nth-of-type(2) {
  padding-right: 26px;
}
[data-theme=dark] .aside-new__info-item .name {
  color: #a9a7ce;
}
[data-theme=dark] .aside-new__info-item i {
  color: #a9a7ce;
}
[data-theme=dark] .aside-new__famous-title {
  background-color: #171154;
}
[data-theme=dark] .aside-new__famous-title .title {
  color: #ffffff;
}
[data-theme=dark] .aside-new__famous-info {
  margin-bottom: 20px;
}
[data-theme=dark] .aside-new__famous-info ul {
  background-color: #0f0b3c;
}
[data-theme=dark] .aside-new__famous-info ul li a {
  color: #ffffff;
}
[data-theme=dark] .aside-new__related {
  padding-bottom: 20px;
}
[data-theme=dark] .aside-new__related-title {
  background-color: #171154;
}
[data-theme=dark] .aside-new__related-title .title {
  color: #ffffff;
}
[data-theme=dark] .aside-new__related-info {
  margin-bottom: 20px;
}
[data-theme=dark] .aside-new__related-info__img {
  width: 121px;
  height: 78px;
  margin-left: 10px;
  border-radius: 15px 15px 0 15px;
}
[data-theme=dark] .aside-new__related-info__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px 15px 0 15px;
}
[data-theme=dark] .aside-new__related-info__title {
  flex: 0 0 50%;
  max-width: 50%;
}
[data-theme=dark] .aside-new__related-info__title h3 {
  font-size: 14px;
  font-weight: 600;
}
[data-theme=dark] .aside-new__related-info__title h3 a {
  line-height: 25px;
  display: block;
  color: #fff;
}
[data-theme=dark] .aside-new__related-info ul {
  background-color: #0f0b3c;
}
[data-theme=dark] .aside-new__related-info ul li {
  border-color: #191259;
}
[data-theme=dark] .aside-new__related-info ul li > a {
  color: #fff;
}

/* contactus */
.contactus {
  display: none;
}

.content__title {
  display: none;
}

.cu-page {
  max-width: 800px;
  margin: 0 auto;
}

.cu-hero {
  text-align: center;
  margin-bottom: 32px;
  padding: 20px 0;
}
.cu-hero__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.2);
}
.cu-hero h1 {
  font-size: 24px;
  font-weight: 900;
  color: #111;
  margin: 0 0 8px;
}
.cu-hero p {
  font-size: 14px;
  color: #888;
  margin: 0;
}

.cu-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.cu-card {
  text-align: center;
  padding: 22px 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
}
.cu-card[data-color=purple] {
  background: #f5f3ff;
  border: 1.5px solid #ede9fe;
}
.cu-card[data-color=purple] .cu-card__icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.cu-card[data-color=purple]:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}
.cu-card[data-color=green] {
  background: #ecfdf5;
  border: 1.5px solid #d1fae5;
}
.cu-card[data-color=green] .cu-card__icon {
  background: linear-gradient(135deg, #10b981, #059669);
}
.cu-card[data-color=green]:hover {
  border-color: #6ee7b7;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}
.cu-card[data-color=blue] {
  background: #eff6ff;
  border: 1.5px solid #dbeafe;
}
.cu-card[data-color=blue] .cu-card__icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.cu-card[data-color=blue]:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}
.cu-card:hover {
  transform: translateY(-3px);
}
.cu-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cu-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin: 0 0 6px;
}
.cu-card strong {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  display: block;
  margin-bottom: 2px;
  direction: ltr;
}
.cu-card small {
  font-size: 11px;
  color: #999;
}

.cu-social {
  text-align: center;
  margin-bottom: 28px;
  padding: 22px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
}
.cu-social h3 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
}
.cu-social__links {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.cu-social__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
}
.cu-social__link i {
  font-size: 18px;
}
.cu-social__link--telegram {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.cu-social__link--telegram:hover {
  background: #bae6fd;
}
.cu-social__link--instagram {
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
.cu-social__link--instagram:hover {
  background: #fbcfe8;
}
.cu-social__link--linkedin {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.cu-social__link--linkedin:hover {
  background: #dbeafe;
}

.cu-form {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 18px;
  padding: 28px;
}
.cu-form h2 {
  font-size: 16px;
  font-weight: 800;
  color: #111;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cu-form h2 svg {
  color: #7c3aed;
}
.cu-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.cu-form__field {
  margin-bottom: 14px;
}
.cu-form__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 6px;
}
.cu-form__field input, .cu-form__field textarea {
  width: 100%;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #222;
  transition: all 0.25s;
}
.cu-form__field input::placeholder, .cu-form__field textarea::placeholder {
  color: #bbb;
}
.cu-form__field input:focus, .cu-form__field textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.cu-form__field input {
  height: 48px;
}
.cu-form__field textarea {
  min-height: 120px;
  resize: vertical;
}
.cu-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.2);
}
.cu-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.3);
}

@media (max-width: 768px) {
  .cu-page {
    padding: 0 4px;
  }
  .cu-hero {
    padding: 16px 0;
    margin-bottom: 22px;
  }
  .cu-hero__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    margin-bottom: 12px;
  }
  .cu-hero__icon svg {
    width: 26px;
    height: 26px;
  }
  .cu-hero h1 {
    font-size: 20px;
  }
  .cu-hero p {
    font-size: 13px;
  }
  .cu-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .cu-card {
    padding: 18px 12px;
  }
  .cu-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 10px;
  }
  .cu-card__icon svg {
    width: 18px;
    height: 18px;
  }
  .cu-card h3 {
    font-size: 13px;
  }
  .cu-card strong {
    font-size: 13.5px;
  }
  .cu-social {
    padding: 16px;
    margin-bottom: 18px;
  }
  .cu-social h3 {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .cu-social__links {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cu-social__link {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
  }
  .cu-social__link i {
    font-size: 16px;
  }
  .cu-form {
    padding: 20px 16px;
    border-radius: 14px;
  }
  .cu-form h2 {
    font-size: 15px;
    margin-bottom: 16px;
  }
  .cu-form__grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }
  .cu-form__field {
    margin-bottom: 12px;
  }
  .cu-form__field label {
    font-size: 11.5px;
  }
  .cu-form__field input, .cu-form__field textarea {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .cu-form__field input {
    height: 44px;
  }
  .cu-form__field textarea {
    min-height: 100px;
  }
  .cu-form__submit {
    height: 46px;
    font-size: 14px;
    border-radius: 12px;
  }
}
@media (max-width: 480px) {
  .cu-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cu-card {
    padding: 16px 12px;
  }
  .cu-card:hover {
    transform: none;
  }
  .cu-hero h1 {
    font-size: 18px;
  }
  .cu-social__links {
    flex-direction: column;
    align-items: stretch;
  }
  .cu-social__links .cu-social__link {
    justify-content: center;
  }
  .cu-form {
    padding: 16px 14px;
  }
}
[data-theme=dark] .cu-hero h1 {
  color: #e0e0ff;
}
[data-theme=dark] .cu-hero p {
  color: #5a5790;
}
[data-theme=dark] .cu-hero__icon {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .cu-card[data-color=purple] {
  background: #1a1550;
  border-color: #2a2060;
}
[data-theme=dark] .cu-card[data-color=green] {
  background: #0a2620;
  border-color: #0f3d2e;
}
[data-theme=dark] .cu-card[data-color=blue] {
  background: #0f1a3a;
  border-color: #1e3a5f;
}
[data-theme=dark] .cu-card h3 {
  color: #e0e0ff;
}
[data-theme=dark] .cu-card strong {
  color: #e0e0ff;
}
[data-theme=dark] .cu-card small {
  color: #5a5790;
}
[data-theme=dark] .cu-social {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .cu-social h3 {
  color: #e0e0ff;
}
[data-theme=dark] .cu-social__link--telegram {
  background: #0f1a3a;
  border-color: #1e3a5f;
  color: #93c5fd;
}
[data-theme=dark] .cu-social__link--instagram {
  background: #1a1020;
  border-color: #2a1530;
  color: #f9a8d4;
}
[data-theme=dark] .cu-social__link--linkedin {
  background: #0f1a3a;
  border-color: #1e3a5f;
  color: #93c5fd;
}
[data-theme=dark] .cu-form {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .cu-form h2 {
  color: #e0e0ff;
}
[data-theme=dark] .cu-form__field label {
  color: #5a5790;
}
[data-theme=dark] .cu-form__field input, [data-theme=dark] .cu-form__field textarea {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .cu-form__field input::placeholder, [data-theme=dark] .cu-form__field textarea::placeholder {
  color: #5a5790;
}

/* faq */
.faq {
  display: none;
}

.help {
  display: none;
}

.faq-hero {
  background: linear-gradient(135deg, #4a2d8a 0%, #6b44b8 30%, #8b5cf6 60%, #7c3aed 100%);
  border-radius: 22px;
  padding: 48px 40px;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -15%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}
.faq-hero__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}
.faq-hero h1 {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.faq-hero p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
}
.faq-hero__search {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.faq-hero__search input {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 0 48px 0 18px;
  font-size: 14px;
  color: #fff;
  backdrop-filter: blur(10px);
}
.faq-hero__search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.faq-hero__search input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
}
.faq-hero__search svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
}

.faq-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.faq-cards__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border-radius: 18px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}
.faq-cards__item[data-color=purple] {
  background: #f5f3ff;
  border: 1.5px solid #ede9fe;
}
.faq-cards__item[data-color=purple] .faq-cards__icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.faq-cards__item[data-color=purple]:hover {
  border-color: #c4b5fd;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.1);
}
.faq-cards__item[data-color=green] {
  background: #ecfdf5;
  border: 1.5px solid #d1fae5;
}
.faq-cards__item[data-color=green] .faq-cards__icon {
  background: linear-gradient(135deg, #10b981, #059669);
}
.faq-cards__item[data-color=green]:hover {
  border-color: #6ee7b7;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1);
}
.faq-cards__item[data-color=blue] {
  background: #eff6ff;
  border: 1.5px solid #dbeafe;
}
.faq-cards__item[data-color=blue] .faq-cards__icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.faq-cards__item[data-color=blue]:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
}
.faq-cards__item:hover {
  transform: translateY(-3px);
}
.faq-cards__item:hover .faq-cards__arrow svg {
  transform: translateX(-4px);
}
.faq-cards__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.faq-cards__item h3 {
  font-size: 15px;
  font-weight: 800;
  color: #222;
  margin: 0;
}
.faq-cards__item p {
  font-size: 12px;
  color: #888;
  margin: 0;
}
.faq-cards__arrow svg {
  color: #bbb;
  transition: transform 0.2s;
}

.faq-list {
  margin-bottom: 40px;
}
.faq-list__title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.faq-list__title svg {
  color: #7c3aed;
}
.faq-list__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s;
}
.faq-item:hover {
  border-color: #e0daf5;
}
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: right;
}
.faq-item__question span {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  flex: 1;
}
.faq-item__question svg {
  color: #c4b5fd;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item__answer p {
  padding: 0 20px 18px;
  font-size: 14px;
  color: #555;
  line-height: 2;
  margin: 0;
  text-align: justify;
}
.faq-item.is-open {
  border-color: #c4b5fd;
}
.faq-item.is-open .faq-item__question svg {
  transform: rotate(180deg);
}
.faq-item.is-open .faq-item__answer {
  max-height: 300px;
}

@media (max-width: 768px) {
  .faq-hero {
    padding: 32px 20px;
    border-radius: 16px;
    margin-bottom: 18px;
  }
  .faq-hero h1 {
    font-size: 20px;
    gap: 8px;
  }
  .faq-hero h1 svg {
    width: 22px;
    height: 22px;
  }
  .faq-hero p {
    font-size: 13px;
    margin-bottom: 18px;
  }
  .faq-hero__search input {
    height: 46px;
    font-size: 13px;
  }
  .faq-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
  }
  .faq-cards__item {
    flex-direction: row;
    text-align: right;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
  }
  .faq-cards__item h3 {
    font-size: 14px;
  }
  .faq-cards__item p {
    font-size: 11.5px;
  }
  .faq-cards__item:hover {
    transform: none;
  }
  .faq-cards__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
  }
  .faq-cards__icon svg {
    width: 20px;
    height: 20px;
  }
  .faq-cards__arrow {
    margin-right: auto;
  }
  .faq-list {
    margin-bottom: 28px;
  }
  .faq-list__title {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .faq-item {
    border-radius: 12px;
  }
  .faq-item__question {
    padding: 14px 16px;
    gap: 10px;
  }
  .faq-item__question span {
    font-size: 13.5px;
  }
  .faq-item__question svg {
    width: 15px;
    height: 15px;
  }
  .faq-item__answer p {
    padding: 0 16px 14px;
    font-size: 13px;
    line-height: 1.9;
  }
}
@media (max-width: 480px) {
  .faq-hero {
    padding: 24px 16px;
    border-radius: 14px;
  }
  .faq-hero h1 {
    font-size: 17px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .faq-hero p {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .faq-hero__search input {
    height: 42px;
    font-size: 12.5px;
    border-radius: 11px;
  }
  .faq-cards {
    gap: 8px;
  }
  .faq-cards__item {
    padding: 13px 14px;
    gap: 11px;
  }
  .faq-cards__icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
  }
  .faq-cards__icon svg {
    width: 18px;
    height: 18px;
  }
  .faq-item__question {
    padding: 12px 14px;
  }
  .faq-item__question span {
    font-size: 13px;
  }
  .faq-item__answer p {
    padding: 0 14px 12px;
    font-size: 12.5px;
  }
}
[data-theme=dark] .faq-hero {
  background: linear-gradient(135deg, #0a0630, #1a1550, #2d1f6e);
}
[data-theme=dark] .faq-cards__item[data-color=purple] {
  background: #1a1550;
  border-color: #2a2060;
}
[data-theme=dark] .faq-cards__item[data-color=green] {
  background: #0a2620;
  border-color: #0f3d2e;
}
[data-theme=dark] .faq-cards__item[data-color=blue] {
  background: #0f1a3a;
  border-color: #1e3a5f;
}
[data-theme=dark] .faq-cards__item h3 {
  color: #e0e0ff;
}
[data-theme=dark] .faq-cards__item p {
  color: #5a5790;
}
[data-theme=dark] .faq-list__title {
  color: #e0e0ff;
}
[data-theme=dark] .faq-item {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .faq-item:hover {
  border-color: #2a2060;
}
[data-theme=dark] .faq-item__question span {
  color: #e0e0ff;
}
[data-theme=dark] .faq-item__answer p {
  color: #7b77c5;
}
[data-theme=dark] .faq-item.is-open {
  border-color: #7c3aed;
}

/* login */
@keyframes float-bg {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -15px) scale(1.03);
  }
}
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3ff;
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}
.login-page__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.login-page__bg-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.login-page__bg-circle--1 {
  width: 500px;
  height: 500px;
  background: rgba(139, 92, 246, 0.12);
  top: -15%;
  right: -10%;
  animation: float-bg 14s ease-in-out infinite;
}
.login-page__bg-circle--2 {
  width: 400px;
  height: 400px;
  background: rgba(236, 72, 153, 0.08);
  bottom: -10%;
  left: -10%;
  animation: float-bg 18s ease-in-out infinite 4s;
}

.login {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.login__card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 4px 40px rgba(109, 40, 217, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0ecf9;
}
.login__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.login__header img {
  width: 36px;
  height: auto;
}
.login__brand {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0;
}
.login__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.login__step {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: #e9e5f5;
  transition: all 0.4s ease;
}
.login__step.is-active {
  width: 44px;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}
.login__step.is-done {
  background: #10b981;
}
.login__desc {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.login__desc-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #f3f0ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
}
.login__desc-icon--success {
  background: #ecfdf5;
  color: #059669;
}
.login__desc .login__desc-title {
  color: #1a1a2e;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.login__desc .login__desc-description {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}
.login__desc .login__desc-description strong, .login__desc .login__desc-description span {
  color: #7c3aed;
  font-weight: 600;
}
.login__field {
  margin-bottom: 16px;
}
.login__field--referral {
  display: none;
}
.login__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
  padding-right: 2px;
}
.login__input {
  position: relative;
}
.login__input input {
  width: 100%;
  height: 50px;
  background: #f8f7fc;
  border: 1.5px solid #e9e5f5;
  border-radius: 12px;
  color: #1a1a2e;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px 0 16px;
  padding-right: 44px;
  transition: all 0.25s ease;
}
.login__input input::placeholder {
  color: #bbb;
  font-weight: 400;
}
.login__input input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.login__input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4b5fd;
  pointer-events: none;
}
.login__otp {
  display: flex;
  gap: 12px;
  direction: ltr;
  margin-bottom: 20px;
}
.login__otp input {
  flex: 1;
  height: 60px;
  background: #f8f7fc;
  border: 1.5px solid #e9e5f5;
  border-radius: 14px;
  color: #1a1a2e;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  transition: all 0.25s ease;
  caret-color: #8b5cf6;
}
.login__otp input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  transform: scale(1.04);
}
.login__btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}
.login__btn svg {
  transition: transform 0.3s ease;
}
.login__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}
.login__btn:hover svg {
  transform: translateX(-3px);
}
.login__btn:active {
  transform: translateY(0);
}
.login__divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.login__divider::before, .login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}
.login__divider span {
  padding: 0 14px;
  font-size: 12px;
  color: #bbb;
  font-weight: 500;
  white-space: nowrap;
}
.login__social {
  display: flex;
  gap: 10px;
}
.login__social-btn {
  flex: 1;
  height: 46px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.login__social-btn:hover {
  border-color: #ddd;
  background: #fafafa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.login__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.login__footer--center {
  justify-content: center;
}
.login__footer .login__footer-item {
  flex: 1;
  height: 44px;
  background: #f8f7fc;
  border: 1px solid #eee;
  border-radius: 10px;
  color: #777;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.login__footer .login__footer-item svg {
  opacity: 0.5;
}
.login__footer .login__footer-item:hover {
  background: #f3f0ff;
  border-color: #ddd4f3;
  color: #7c3aed;
}
.login__footer .login__footer-item:hover svg {
  opacity: 1;
}
.login__footer .login__footer-item--timer {
  flex: none;
  background: none;
  border: none;
  color: #999;
  font-size: 13px;
  gap: 4px;
}
.login__footer .login__footer-item--timer .time {
  color: #7c3aed;
  font-weight: 700;
  direction: ltr;
  display: inline-flex;
}
.login__footer .login__footer-item--timer:hover {
  background: none;
  border: none;
  color: #666;
}
.login--password .login__input input {
  font-size: 18px;
  letter-spacing: 8px;
}
.login--password .login__input input::placeholder {
  letter-spacing: 0;
  font-size: 14px;
}
.login .check {
  margin-bottom: 12px;
}
.login .check__item label {
  color: #888;
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 576px) {
  .login__card {
    padding: 28px 22px;
    border-radius: 20px;
  }
  .login__header img {
    width: 30px;
  }
  .login__brand {
    font-size: 17px;
  }
  .login__otp {
    gap: 8px;
  }
  .login__otp input {
    height: 52px;
    font-size: 20px;
    border-radius: 10px;
  }
  .login__footer {
    flex-direction: column;
    gap: 8px;
  }
  .login__footer .login__footer-item {
    width: 100%;
  }
}
[data-theme=dark] .login-page {
  background: #0a0820;
}
[data-theme=dark] .login__card {
  background: #110e3a;
  border-color: #1e1b4b;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .login__brand {
  color: #e0e0ff;
}
[data-theme=dark] .login__step {
  background: #1e1b4b;
}
[data-theme=dark] .login__desc-icon {
  background: #1a1550;
  color: #a78bfa;
}
[data-theme=dark] .login__desc-icon--success {
  background: #0d3b2e;
  color: #34d399;
}
[data-theme=dark] .login__desc-title {
  color: #e0e0ff;
}
[data-theme=dark] .login__desc-description {
  color: #7b77c5;
}
[data-theme=dark] .login__desc-description strong, [data-theme=dark] .login__desc-description span {
  color: #c4b5fd;
}
[data-theme=dark] .login__label {
  color: #7b77c5;
}
[data-theme=dark] .login__input input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .login__input input::placeholder {
  color: #4a4580;
}
[data-theme=dark] .login__input input:focus {
  border-color: #7c3aed;
  background: #13103f;
}
[data-theme=dark] .login__input-icon {
  color: #4a4580;
}
[data-theme=dark] .login__otp input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .login__otp input:focus {
  border-color: #7c3aed;
  background: #13103f;
}
[data-theme=dark] .login__divider::before, [data-theme=dark] .login__divider::after {
  background: #1e1b4b;
}
[data-theme=dark] .login__divider span {
  color: #4a4580;
}
[data-theme=dark] .login__social-btn {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #c7c5ee;
}
[data-theme=dark] .login__social-btn:hover {
  background: #13103f;
  border-color: #2a2560;
}
[data-theme=dark] .login__footer-item {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #7b77c5;
}
[data-theme=dark] .login__footer-item:hover {
  background: #1a1550;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .login .check__item label {
  color: #7b77c5;
}

/* tournament */
.special-tournament {
  margin-bottom: 66px;
}
.special-tournament__title-tournament {
  margin-bottom: 30px;
}
.special-tournament__title-tournament__title {
  position: relative;
}
.special-tournament__title-tournament__title h3 {
  color: #000000;
  font-size: 23px;
  font-weight: 700;
  padding-left: 21px;
  padding-right: 36px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.special-tournament__title-tournament__title h3::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ec3237;
  color: #ec3237;
  top: 4px;
  right: 2px;
}
.special-tournament__title-tournament__title::after {
  content: "";
  position: absolute;
  background-color: #d9d9d9;
  height: 1px;
  width: 100%;
  top: 13px;
  right: 0px;
  left: 0px;
  z-index: -1;
}
.special-tournament__special-banner__img {
  height: 400px;
  position: relative;
}
.special-tournament__special-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}
.special-tournament__special-banner__img__context {
  position: absolute;
  display: flex;
  z-index: 2;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 0;
}
.special-tournament__special-banner__img__context__right {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 294px;
  top: 134px;
}
.special-tournament__special-banner__img__context__right__total__time__date span {
  color: #fff;
  font-weight: 600;
  font-size: 17px;
}
.special-tournament__special-banner__img__context__right__total__time__prize span {
  color: #c4f424;
  font-weight: 600;
  font-size: 16px;
}
.special-tournament__special-banner__img__context__right__total__time__expense span {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.special-tournament__special-banner__img__context__right__total__time__capacit {
  text-align: center;
  margin: 0 auto;
}
.special-tournament__special-banner__img__context__right__total__time__capacit span {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.special-tournament__special-banner__img__context__right__total__remaining {
  display: flex;
  flex-direction: column;
}
.special-tournament__special-banner__img__context__right__total__remaining__top__date {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  padding: 6px 14px 2px 11px;
  margin-bottom: 3px;
  width: 184px;
  justify-content: center;
}
.special-tournament__special-banner__img__context__right__total__remaining__top__date span {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom {
  display: flex;
  padding-left: 3px;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number {
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  padding: 10px 14px 2px 11px;
  flex: 0 0 50%;
  max-width: 50%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number:first-child {
  margin-left: 3px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number:first-child span {
  color: #c4f424;
  font-size: 30px;
  font-weight: 600;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number:last-child {
  padding: 15px 14px 2px 11px;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number:last-child span {
  display: flex;
  flex-direction: column;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
  line-height: 17px;
}
.special-tournament__special-banner__img__context__right__total__remaining__bottom__number:last-child span span {
  font-size: 12px;
  font-weight: 600;
}
.special-tournament__special-banner__img__context__right__logo {
  width: 205px;
  margin-bottom: 10px;
}
.special-tournament__special-banner__img__context__right__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.special-tournament__special-banner__img__context__right__number-capacit span {
  display: flex;
  flex-direction: column;
}
.special-tournament__special-banner__img__context__right ul > li {
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  padding: 4px 11px 4px 30px;
  margin-bottom: 3px;
  display: flex;
}
.special-tournament__special-banner__img__context__right ul > li span {
  font-size: 15px;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(1) span {
  color: #fff;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(2) span {
  color: #c4f424;
  font-weight: 600;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(3) {
  margin-bottom: 5px;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(3) span {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(4) {
  justify-content: center;
  padding: 10px 14px 6px 11px;
  margin-bottom: 3px;
}
.special-tournament__special-banner__img__context__right ul > li:nth-child(4) span {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.special-tournament__special-banner__img__context__right ul > li:last-child {
  background: none;
  display: flex;
  padding: 0 0 2px 5px;
}
.special-tournament__special-banner__img__context__right ul > li:last-child > span {
  flex: 0 0 50%;
  max-width: 50%;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.special-tournament__special-banner__img__context__right ul > li:last-child > span:first-child {
  margin-left: 5px;
  color: #c4f424;
  font-weight: 600;
  font-size: 33px;
  padding: 3px 0;
}
.special-tournament__special-banner__img__context__right ul > li:last-child > span:last-child {
  color: #fff;
  font-weight: 600;
  font-size: 30px;
  padding-top: 9px;
  line-height: 18px;
}
.special-tournament__special-banner__img__context__right ul > li:last-child > span:last-child a {
  font-size: 11px;
  font-weight: 500;
}
.special-tournament__special-banner__img__context__left {
  position: absolute;
  top: 56px;
  left: 57px;
  margin-right: 23px;
  text-align: center;
}
.special-tournament__special-banner__img__context__left__title {
  margin-bottom: 34px;
  max-width: 210px;
}
.special-tournament__special-banner__img__context__left__title h2 {
  color: #3c3c3c;
  font-size: 33px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  line-height: 38px;
  min-height: 54px;
}
.special-tournament__special-banner__img__context__left__time-none {
  display: none;
  background: rgba(255, 255, 255, 0.2);
  text-align: center;
  margin-bottom: 15px;
  padding: 4px 0 1px 0;
}
.special-tournament__special-banner__img__context__left__time-none span {
  font-weight: 600;
  font-size: 19px;
  color: #000;
}
.special-tournament__special-banner__img__context__left__timer {
  text-align: center;
  justify-content: center;
  display: flex;
  margin-bottom: 14px;
}
.special-tournament__special-banner__img__context__left__timer--list-tournament {
  margin-bottom: 4px;
}
.special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span {
  background-color: #110e47;
  background: #110e47;
}
.special-tournament__special-banner__img__context__left__timer .timer {
  display: flex;
  margin-left: 2px;
}
.special-tournament__special-banner__img__context__left__timer .timer .div-total {
  display: flex;
}
.special-tournament__special-banner__img__context__left__timer .timer .div-total > span {
  color: #fff;
  display: flex;
  font-size: 64px;
  margin: -20px 2px 0 2px;
}
.special-tournament__special-banner__img__context__left__timer .timer .div-total .div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.special-tournament__special-banner__img__context__left__timer .timer .div-total .div > span {
  display: flex;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  padding: 2px 11px 0px 11px;
  margin-bottom: 5px;
}
.special-tournament__special-banner__img__context__left__timer .timer .div-total .div > span:last-child {
  background: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.special-tournament__special-banner__img__context__left__timer .timer-one {
  display: flex;
  margin-left: 2px;
}
.special-tournament__special-banner__img__context__left__timer .timer-one .div-total {
  display: flex;
}
.special-tournament__special-banner__img__context__left__timer .timer-one .div-total > span {
  color: #fff;
  display: flex;
  font-size: 64px;
  margin: -20px 2px 0 2px;
}
.special-tournament__special-banner__img__context__left__timer .timer-one .div-total .div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.special-tournament__special-banner__img__context__left__timer .timer-one .div-total .div > span {
  display: flex;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  padding: 2px 11px 0px 11px;
  margin-bottom: 5px;
}
.special-tournament__special-banner__img__context__left__timer .timer-one .div-total .div > span:last-child {
  background: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.special-tournament__special-banner__img__context__left__button a {
  color: #110d47;
  background-color: #c4f424;
  font-size: 25px;
  font-weight: 700;
  border-radius: 40px;
  padding: 8px 50px 5px 50px;
}
.special-tournament__special-banner__img__context__left__button a i {
  display: none;
}
.special-tournament__special-banner__responsive {
  display: none;
}

[data-theme=dark] .special-tournament__title-tournament__title h3 {
  background-color: #070525;
  color: #fff;
}
[data-theme=dark] .special-tournament__title-tournament__title::after {
  background-color: #292945;
}

@media (max-width: 1200px) {
  .special-tournament__special-banner__img__context__left {
    top: 125px;
    left: 28px;
    margin-right: 0;
  }
  .special-tournament__special-banner__img__context__left__title {
    margin-bottom: 22px;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 36px;
    font-size: 30px;
  }
  .special-tournament__special-banner__img__context__left__timer {
    margin-bottom: 5px;
  }
  .special-tournament__special-banner__img__context__right {
    left: 264px;
    top: 146px;
  }
}
@media (max-width: 992px) {
  .special-tournament__special-banner__img {
    margin-bottom: 7px;
  }
  .special-tournament__special-banner__img__context {
    left: 15px;
  }
  .special-tournament__special-banner__img__context__left {
    top: 122px;
    left: 40px;
  }
  .special-tournament__special-banner__img__context__left__title {
    margin-bottom: 32px;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 35px;
    font-size: 31px;
  }
  .special-tournament__special-banner__img__context__left__timer {
    margin-bottom: 4px;
  }
  .special-tournament__special-banner__img__context__right__total {
    display: none;
  }
  .special-tournament__special-banner__img__context__right__logo {
    width: 160px;
  }
  .special-tournament__special-banner__img__context__right ul li {
    background: rgba(0, 0, 0, 0.6);
  }
  .special-tournament__special-banner__img__context__right ul li:last-child span {
    background: rgba(0, 0, 0, 0.6);
  }
  .special-tournament__special-banner__responsive {
    display: block;
  }
  .special-tournament__special-banner__responsive__row {
    display: flex;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  .special-tournament__special-banner__responsive__row__col-capacity {
    flex: 0 0 36%;
    max-width: 36%;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title {
    background-color: #525066;
    margin-bottom: 0%;
    padding: 17px 0 14px 0;
    margin-bottom: 4px;
    text-align: center;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title h4 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul {
    display: flex;
    margin: 0 -2px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li {
    background-color: #525066;
    flex: 0 0 calc(50% - 4px);
    max-width: 50%;
    margin: 0 2px;
    margin-bottom: 0px;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    padding-top: 8px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:first-child span {
    color: #c4f424;
    font-size: 30px;
    font-weight: 600;
    position: relative;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span {
    display: flex;
    flex-direction: column;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    line-height: 17px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span span {
    font-size: 11px;
  }
  .special-tournament__special-banner__responsive__row__col-register {
    flex: 0 0 calc(64% - 4px);
    max-width: 64%;
    margin-right: 4px;
    padding-top: 0;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li {
    background-color: #525066;
    margin-bottom: 0%;
    padding: 12px 0 9px 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li span {
    color: #fff;
    font-weight: 600;
    font-size: 21px;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li:first-child span {
    color: #c4f424;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .special-tournament {
    margin-bottom: 50px;
  }
  .special-tournament__special-banner__img__context__left {
    left: -5px;
    margin-right: 0;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 33px;
    font-size: 27px;
  }
}
@media (max-width: 576px) {
  .special-tournament__title-tournament {
    margin-bottom: 20px;
  }
  .special-tournament__title-tournament__title h3 {
    font-size: 19px;
    padding-left: 8px;
    padding-right: 28px;
  }
  .special-tournament__title-tournament__title h3::before {
    width: 16px;
    height: 16px;
  }
  .special-tournament__special-banner__img {
    height: 350px;
    margin-bottom: 10px;
  }
  .special-tournament__special-banner__img img {
    object-fit: unset;
  }
  .special-tournament__special-banner__img__context {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .special-tournament__special-banner__img__context__right {
    position: absolute;
    bottom: -7px;
    right: 8px;
  }
  .special-tournament__special-banner__img__context__right__total {
    display: none;
  }
  .special-tournament__special-banner__img__context__right__logo {
    position: unset;
    width: 140px;
  }
  .special-tournament__special-banner__img__context__left {
    position: absolute;
    top: 36px;
    left: 25px;
  }
  .special-tournament__special-banner__img__context__left__title {
    margin-bottom: 35px;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 34px;
    font-size: 27px;
  }
  .special-tournament__special-banner__img__context__left__time-none {
    display: inline-block;
  }
  .special-tournament__special-banner__img__context__left__time-none span {
    font-size: 21px;
    color: #fff;
    padding: 0 6px;
  }
  .special-tournament__special-banner__img__context__left__timer {
    text-align: center;
    justify-content: center;
    display: flex;
    margin-bottom: 14px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament {
    margin-bottom: 4px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total > span {
    font-size: 20px;
    margin: 0 2px 0 2px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span {
    height: 31px !important;
    font-size: 18px;
    padding: 2px 4px 0px 4px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span:first-child {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span:last-child {
    background: none;
  }
  .special-tournament__special-banner__img__context__left__timer .timer .div-total .div > span {
    font-size: 29px;
    font-weight: 700;
    padding: 0 5px 0px 6px;
    height: 41px;
    align-items: center;
    margin-bottom: 0;
  }
  .special-tournament__special-banner__img__context__left__timer .timer .div-total .div > span:last-child {
    font-size: 12px;
    margin-top: -5px;
  }
  .special-tournament__special-banner__img__context__left__button a {
    padding: 7px 35px 6px 35px;
    display: flex;
    justify-content: center;
    font-size: 22px;
  }
  .special-tournament__special-banner__img__context__left__button a i {
    display: block;
    font-size: 12px;
    transform: rotate(90deg);
    color: #b00000;
  }
  .special-tournament__special-banner__responsive {
    display: block;
  }
  .special-tournament__special-banner__responsive__row {
    display: flex;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  .special-tournament__special-banner__responsive__row__col-capacity {
    flex: 0 0 36%;
    max-width: 36%;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title {
    background-color: #525066;
    margin-bottom: 0%;
    padding: 17px 0 14px 0;
    margin-bottom: 4px;
    text-align: center;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title h4 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul {
    display: flex;
    margin: 0 -2px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li {
    background-color: #525066;
    flex: 0 0 calc(50% - 4px);
    max-width: 50%;
    margin: 0 2px;
    margin-bottom: 0px;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    padding-top: 8px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:first-child span {
    color: #c4f424;
    font-size: 30px;
    font-weight: 600;
    position: relative;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span {
    display: flex;
    flex-direction: column;
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    line-height: 17px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span span {
    font-size: 11px;
  }
  .special-tournament__special-banner__responsive__row__col-register {
    flex: 0 0 calc(64% - 4px);
    max-width: 64%;
    margin-right: 4px;
    padding-top: 0;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li {
    background-color: #525066;
    margin-bottom: 0%;
    padding: 12px 0 9px 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li span {
    color: #fff;
    font-weight: 600;
    font-size: 21px;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li:first-child span {
    color: #c4f424;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 450px) {
  .special-tournament__special-banner__img__context__left {
    margin-right: 0;
    top: 36px;
    left: 10px;
  }
  .special-tournament__special-banner__img__context__left__title {
    margin-bottom: 25px;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 27px;
    font-size: 22px;
  }
  .special-tournament__special-banner__img__context__left__time-none span {
    font-size: 19.5px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title {
    padding: 14px 0 11px 0;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title h4 {
    font-size: 16px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li {
    padding-top: 6px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:first-child span {
    font-size: 26px;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li {
    padding: 8px 0 7px 0;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li span {
    font-size: 19px;
  }
}
@media (max-width: 400px) {
  .special-tournament__special-banner__responsive__row__col-capacity__title {
    margin-bottom: 5px;
    padding: 13px 0 10px 0;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__title h4 {
    font-size: 13px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li {
    padding-top: 6px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span {
    font-size: 21px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:last-child span span {
    font-size: 8px;
  }
  .special-tournament__special-banner__responsive__row__col-capacity__number ul li:first-child span {
    font-size: 21px;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li {
    padding: 8px 0 6px 0;
  }
  .special-tournament__special-banner__responsive__row__col-register ul li span {
    font-size: 15px;
  }
  .special-tournament__special-banner__img__context__right {
    position: absolute;
    bottom: 3px;
    right: 6px;
  }
  .special-tournament__special-banner__img__context__right__logo {
    width: 105px;
  }
  .special-tournament__special-banner__img__context__left {
    left: 8px;
  }
  .special-tournament__special-banner__img__context__left__timer {
    text-align: center;
    justify-content: center;
    display: flex;
    margin-bottom: 6px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament {
    margin-bottom: 2px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total > span {
    font-size: 20px;
    margin: 0 2px 0 2px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span {
    height: 27px !important;
    font-size: 18px;
    padding: 2px 4px 0px 4px;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span:first-child {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .special-tournament__special-banner__img__context__left__timer--list-tournament .timer .div-total .div > span:last-child {
    background: none;
  }
  .special-tournament__special-banner__img__context__left__title h2 {
    line-height: 24px;
    font-size: 19px;
  }
  .special-tournament__special-banner__img__context__left__button a {
    padding: 7px 32px 6px 31px;
    font-size: 17px;
  }
}
.list-tournament__content {
  border-radius: 20px;
}
.list-tournament__content__row {
  display: flex;
  border-bottom: 1px solid #b7b7b7;
  padding-bottom: 56px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.list-tournament__content__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 66px;
}
.list-tournament__content__row__col-img {
  flex: 0 0 447px;
  max-width: 447px;
  margin-left: 8px;
}
.list-tournament__content__row__col-img__img {
  height: 277px;
}
.list-tournament__content__row__col-img__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 19px 19px 0;
}
.list-tournament__content__row__col-time {
  flex: 0 0 251px;
  max-width: 251px;
  margin-left: 8px;
  background-color: #110e47;
}
.list-tournament__content__row__col-time__menu {
  padding: 39px 14px 0 24px;
}
.list-tournament__content__row__col-time__menu ul li {
  border-bottom: 1px solid #605e84;
  padding-right: 31px;
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.list-tournament__content__row__col-time__menu ul li:last-child {
  border-bottom: none;
}
.list-tournament__content__row__col-time__menu ul li:first-child span {
  font-size: 18px;
}
.list-tournament__content__row__col-time__menu ul li span {
  position: relative;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
}
.list-tournament__content__row__col-time__menu ul li span::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #ed1c24;
  top: 6px;
  right: -25px;
  border-radius: 50%;
}
.list-tournament__content__row__col-capacity {
  flex: 0 0 180px;
  max-width: 180px;
  margin-left: 8px;
  background-color: #110e47;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 33px;
}
.list-tournament__content__row__col-capacity__title {
  margin-bottom: 53px;
}
.list-tournament__content__row__col-capacity__title h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}
.list-tournament__content__row__col-capacity__number ul li:first-child {
  margin-bottom: 28px;
}
.list-tournament__content__row__col-capacity__number ul li:first-child span {
  color: #c4f424;
  font-size: 33px;
  font-weight: 600;
  position: relative;
}
.list-tournament__content__row__col-capacity__number ul li:first-child span::before {
  content: "";
  position: absolute;
  left: -68px;
  right: -19px;
  top: 57px;
  height: 1px;
  width: 87px;
  color: #706e91;
  background-color: #706e91;
}
.list-tournament__content__row__col-capacity__number ul li:last-child span {
  display: flex;
  flex-direction: column;
  font-size: 35px;
  font-weight: 600;
  color: #fff;
  line-height: 24px;
}
.list-tournament__content__row__col-capacity__number ul li:last-child span span {
  font-size: 11px;
  font-weight: 500;
}
.list-tournament__content__row__col-register {
  flex: 0 0 268px;
  max-width: 268px;
  border-radius: 19px 0 0 19px;
  background-color: #110e47;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 42px;
}
.list-tournament__content__row__col-register__total {
  display: flex;
  flex-direction: column;
}
.list-tournament__content__row__col-register__total__title {
  margin-bottom: 30px;
}
.list-tournament__content__row__col-register__total__title h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}
.list-tournament__content__row__col-register__tag a {
  color: #110d47;
  background-color: #c4f424;
  font-size: 21px;
  font-weight: 700;
  border-radius: 40px;
  padding: 5px 44px 3px 44px;
}
.list-tournament__content__row__col-register__tag a i {
  display: none;
}

@media (max-width: 1200px) {
  .list-tournament__content__row__col-img {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    margin-left: 0;
    margin-bottom: 7px;
    border-radius: 0 19px 0 0;
  }
  .list-tournament__content__row__col-img img {
    border-radius: 0 19px 0 0;
  }
  .list-tournament__content__row__col-time {
    flex: 0 0 50%;
    max-width: 50%;
    border-radius: 19px 0 0 0;
    margin-left: 0;
    margin-bottom: 7px;
  }
  .list-tournament__content__row__col-capacity {
    flex: 0 0 49%;
    max-width: 49%;
    border-radius: 0 0 19px 0;
    margin-left: 9px;
    padding-top: 30px;
    padding-bottom: 28px;
  }
  .list-tournament__content__row__col-capacity__title {
    margin-bottom: 34px;
  }
  .list-tournament__content__row__col-register {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 30px;
    border-radius: 0 0 0 19px;
  }
  .list-tournament__content__row__col-register__total__title {
    margin-bottom: 20px;
  }
}
@media (max-width: 992px) {
  .list-tournament__content__row__col-img {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    margin-left: 0;
    margin-bottom: 7px;
  }
  .list-tournament__content__row__col-time {
    flex: 0 0 50%;
    max-width: 50%;
    border-radius: 19px 0 0 0;
    margin-left: 0;
    margin-bottom: 7px;
  }
  .list-tournament__content__row__col-capacity {
    flex: 0 0 49%;
    max-width: 49%;
    border-radius: 0 0 19px 0;
    margin-left: 7px;
    padding-top: 30px;
    padding-bottom: 28px;
  }
  .list-tournament__content__row__col-capacity__title {
    margin-bottom: 34px;
  }
  .list-tournament__content__row__col-register {
    flex: 0 0 50%;
    max-width: 50%;
    padding-top: 30px;
  }
  .list-tournament__content__row__col-register__total__title {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .list-tournament__content__row {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .list-tournament__content__row__col-capacity {
    flex: 0 0 48%;
    max-width: 48%;
    margin-left: 10px;
  }
  .list-tournament__content__row__col-img {
    padding-left: 11px;
  }
  .list-tournament__content__row:last-child {
    margin-bottom: 50px;
  }
}
@media (max-width: 576px) {
  .list-tournament__content__row__col-img {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    margin-bottom: 4px;
  }
  .list-tournament__content__row__col-img__img img {
    border-radius: 19px 19px 0 0;
  }
  .list-tournament__content__row__col-time {
    flex: 0 0 100%;
    max-width: 100%;
    border-radius: 0;
    background-color: unset;
    margin-bottom: 2px;
  }
  .list-tournament__content__row__col-time__menu {
    padding: 0;
  }
  .list-tournament__content__row__col-time__menu ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -2px;
  }
  .list-tournament__content__row__col-time__menu ul li {
    background-color: #110e47;
    flex: 0 0 calc(55% - 4px);
    max-width: 55%;
    margin: 0 2px 4px 2px;
    text-align: center;
    padding: 7px 0 5px 0;
  }
  .list-tournament__content__row__col-time__menu ul li span::before {
    top: 4px;
  }
  .list-tournament__content__row__col-time__menu ul li:first-child {
    flex: 0 0 calc(45% - 4px);
    max-width: 45%;
  }
  .list-tournament__content__row__col-time__menu ul li:first-child span {
    font-size: 15px;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(2) span {
    font-size: 15px;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(3) {
    flex: 0 0 calc(45% - 4px);
    max-width: 45%;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(3) span {
    color: #c4f424;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(3) span::before {
    display: none;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(4) span::before {
    display: none;
  }
  .list-tournament__content__row__col-capacity {
    flex: 0 0 34%;
    max-width: 34%;
    margin-left: 0;
    background-color: unset;
    padding-top: 0;
    padding-bottom: 0;
  }
  .list-tournament__content__row__col-capacity__title {
    background-color: #525066;
    margin-bottom: 0%;
    padding: 12px 0 9px 0;
    margin-bottom: 4px;
  }
  .list-tournament__content__row__col-capacity__title h4 {
    font-size: 16px;
  }
  .list-tournament__content__row__col-capacity__number ul {
    display: flex;
    margin: 0 -2px;
  }
  .list-tournament__content__row__col-capacity__number ul li {
    background-color: #525066;
    flex: 0 0 calc(50% - 4px);
    max-width: 50%;
    margin: 0 2px;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    padding-top: 8px;
  }
  .list-tournament__content__row__col-capacity__number ul li:first-child {
    margin-bottom: 0;
  }
  .list-tournament__content__row__col-capacity__number ul li:first-child span {
    font-size: 30px;
  }
  .list-tournament__content__row__col-capacity__number ul li:first-child span::before {
    display: none;
  }
  .list-tournament__content__row__col-capacity__number ul li:last-child span {
    line-height: 17px;
    font-size: 28px;
  }
  .list-tournament__content__row__col-register {
    flex: 0 0 calc(66% - 4px);
    max-width: 66%;
    margin-right: 4px;
    background-color: #525066;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 0;
    align-items: center;
  }
  .list-tournament__content__row__col-register__total {
    padding-top: 12px;
  }
  .list-tournament__content__row__col-register__total__title {
    margin-bottom: 4px;
  }
  .list-tournament__content__row__col-register__tag {
    padding-top: 0;
  }
  .list-tournament__content__row__col-register__tag a {
    display: flex;
    justify-content: center;
    padding: 15px 18px 13px 18px;
    border-radius: 18px;
    font-size: 19px;
  }
  .list-tournament__content__row__col-register__tag a i {
    display: block;
    font-size: 12px;
    transform: rotate(90deg);
    color: #b00000;
  }
}
@media (max-width: 450px) {
  .list-tournament__content__row__col-register__tag a {
    padding: 15px 15px 13px 15px;
    font-size: 14px;
  }
  .list-tournament__content__row__col-register__total__title h4 {
    font-size: 15px;
  }
  .list-tournament__content__row__col-capacity__number ul li:first-child span {
    font-size: 28px;
  }
}
@media (max-width: 400px) {
  .list-tournament__content__row {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  .list-tournament__content__row__col-time__menu ul li span {
    font-size: 13px;
  }
  .list-tournament__content__row__col-time__menu ul li span::before {
    width: 11px;
    height: 11px;
    right: -15px;
    top: 5px;
  }
  .list-tournament__content__row__col-time__menu ul li:first-child span {
    font-size: 13px;
  }
  .list-tournament__content__row__col-time__menu ul li:nth-child(2) span {
    font-size: 13px;
  }
  .list-tournament__content__row__col-capacity {
    flex: 0 0 29%;
    max-width: 29%;
  }
  .list-tournament__content__row__col-capacity__title h4 {
    font-size: 14px;
  }
  .list-tournament__content__row__col-capacity__number ul li:first-child span {
    font-size: 22px;
  }
  .list-tournament__content__row__col-capacity__number ul li:last-child span {
    font-size: 20px;
  }
  .list-tournament__content__row__col-capacity__number ul li:last-child span span {
    font-size: 8px;
  }
  .list-tournament__content__row__col-register {
    flex: 0 0 calc(71% - 4px);
    max-width: 71%;
    padding-top: 0;
  }
  .list-tournament__content__row__col-register__tag a {
    padding: 13px 10px 11px 10px;
  }
  .list-tournament__content__row__col-register__total__title h4 {
    font-size: 14px;
  }
}
.player-tournament {
  margin-bottom: 66px;
}
.player-tournament__table {
  padding-right: 36px;
}
.player-tournament__table table {
  border-collapse: collapse;
  width: 100%;
}
.player-tournament__table table td {
  border: 6px solid #060525;
  padding: 9px 8px;
  text-align: center;
}
.player-tournament__table table td > a svg {
  height: 30px;
}
.player-tournament__table table th {
  border: 6px solid #060525;
  padding: 17px 8px;
  text-align: left;
  background-color: #c4f424;
  color: #0c065e;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}
.player-tournament__table table tr {
  text-align: center;
  background-color: #110e47;
  color: #fff;
}
.player-tournament__table table tr td {
  font-size: 18px;
}

@media (max-width: 992px) {
  .player-tournament__table table th {
    padding: 11px 8px;
  }
  .player-tournament__table table tr td {
    padding: 5px 8px;
  }
  .player-tournament__table table tr td svg {
    height: 30px;
  }
}
@media (max-width: 768px) {
  .player-tournament {
    margin-bottom: 50px;
  }
  .player-tournament__table table th {
    padding: 4px 9px;
    font-size: 15px;
  }
  .player-tournament__table table tr td svg {
    height: 25px;
  }
}
@media (max-width: 576px) {
  .player-tournament__table {
    padding-right: 0;
  }
}
@media (max-width: 400px) {
  .player-tournament__table table th {
    font-size: 12px;
  }
  .player-tournament__table table tr td {
    padding: 2px 8px;
    font-size: 14px;
  }
  .player-tournament__table table tr td svg {
    height: 21px;
  }
}
.rules-tournament {
  margin-bottom: 100px;
}
.rules-tournament__content {
  padding-right: 15px;
}
.rules-tournament__content p {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  line-height: 41px;
  text-align: justify;
}
.rules-tournament__content h4 {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  padding-top: 45px;
  padding-bottom: 5px;
}
.rules-tournament__content__tik__checkt {
  display: flex;
  align-items: center;
  padding-top: 40px;
}
.rules-tournament__content__tik__checkt form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rules-tournament__content__tik__checkt__item {
  display: flex;
  align-items: center;
}
.rules-tournament__content__tik__checkt__item__checked {
  width: 28px;
  height: 28px;
  border: 3px solid #cdcdcd;
  border-radius: 8px;
  margin-left: 11px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.rules-tournament__content__tik__checkt__item__checked:before {
  content: "\e90a";
  font-family: "icomoon";
  font-size: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 0.3s;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  color: #c6c6c6;
}
.rules-tournament__content__tik__checkt__item label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.rules-tournament__content__tik__checkt__item label em {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.rules-tournament__content__tik__checkt__item input {
  display: none;
}
.rules-tournament__content__tik__checkt__item input:checked + label .rules-tournament__content__tik__checkt__item__checked {
  border-color: #17a404;
  background-color: #17a404;
}
.rules-tournament__content__tik__checkt__item input:checked + label .rules-tournament__content__tik__checkt__item__checked:before {
  transform: scale(1);
  color: #ffffff;
}
.rules-tournament__content__tik__checkt__input {
  margin-right: 99px;
}
.rules-tournament__content__tik__checkt__input input {
  background: none;
  display: block;
  color: #fff;
  background-color: #cdcdcd;
  font-size: 18px;
  width: 270px;
  border: 1px solid #959595;
  border-radius: 10px;
  padding: 10px;
}
.rules-tournament__content__tik__checkt__input input::placeholder {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.8;
}
.rules-tournament__content__tik__tag {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 0;
}
.rules-tournament__content__tik__tag button {
  color: #fff;
  background-color: #00a651;
  font-weight: 600;
  font-size: 18px;
  border-radius: 10px;
  text-align: center;
  width: 270px;
  max-width: 100%;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-theme=dark] .rules-tournament__content p {
  color: #fff;
}
[data-theme=dark] .rules-tournament__content h4 {
  color: #fff;
}
[data-theme=dark] .rules-tournament__content__tik__checkt__item__checked {
  border: 3px solid #fff;
}
[data-theme=dark] .rules-tournament__content__tik__checkt__item label {
  display: flex;
  align-items: center;
}
[data-theme=dark] .rules-tournament__content__tik__checkt__item label em {
  color: #fff;
  background-color: #0f0b4d;
  border-radius: 6px;
  padding: 8px 14px 6px 36px;
}

@media (max-width: 1200px) {
  .rules-tournament__content__tik__checkt__input {
    margin-right: 11px;
  }
}
@media (max-width: 992px) {
  .rules-tournament__content__tik__checkt form {
    flex-direction: column;
  }
  .rules-tournament__content__tik__checkt__item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
  }
  .rules-tournament__content__tik__checkt__input {
    margin-right: 0;
  }
  .rules-tournament__content__tik__tag {
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .rules-tournament__content__tik__checkt {
    flex-direction: column;
  }
  .rules-tournament__content__tik__checkt__item {
    margin-left: 0;
    margin-bottom: 15px;
    flex-direction: column;
    align-items: center;
  }
  .rules-tournament__content__tik__checkt__input {
    padding-top: 20px;
  }
  .rules-tournament__content__tik__tag {
    padding-top: 18px;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .rules-tournament__content {
    padding-right: 0;
  }
  .rules-tournament__content p {
    line-height: 30px;
  }
}
@media (max-width: 480px) {
  .rules-tournament {
    margin-bottom: 60px;
  }
  .rules-tournament__content__tik__checkt__item label em {
    font-size: 15px;
  }
}
.forms-tournament {
  margin-bottom: 100px;
}
.forms-tournament__total {
  background-color: #0c093c;
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  padding: 25px 25px 35px 25px;
  margin: 0 auto;
}
.forms-tournament__total__head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
}
.forms-tournament__total__head__icon {
  margin-left: 10px;
  width: 30px;
}
.forms-tournament__total__head__icon img {
  width: 100%;
  height: 100%;
}
.forms-tournament__total__head__title h3 {
  color: #fff;
  font-size: 23px;
  font-weight: 700;
}
.forms-tournament__total__form {
  padding: 0 12px;
}
.forms-tournament__total__form form {
  width: 100%;
}
.forms-tournament__total__form form input {
  background: none;
  color: #fff;
  font-size: 18px;
  width: 100%;
  border: 2px solid #2e3192;
  border-radius: 10px;
  padding: 12px 10px;
}
.forms-tournament__total__form form input::placeholder {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  opacity: 0.8;
}
.forms-tournament__total__form form .form-group {
  margin-bottom: 20px;
}
.forms-tournament__total__form form button {
  background-color: #00a651;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  border-radius: 10px;
  width: 100%;
  line-height: 70px;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .forms-tournament__total {
    padding: 25px 10px 20px 10px;
  }
  .forms-tournament__total__form {
    padding: 0;
  }
  .forms-tournament__total__form form button {
    font-size: 19px;
    line-height: 50px;
  }
  .forms-tournament__total__head__title h3 {
    font-size: 20px;
  }
}
.ticket-tournament {
  padding-bottom: 90px;
}
.ticket-tournament__total {
  background-color: #0c093c;
  margin: 0 auto;
  max-width: 580px;
  border-radius: 20px;
  padding-right: 0;
  margin-bottom: 20px;
}
.ticket-tournament__total__head {
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
  background-color: #ed1c24;
  padding: 6px 25px;
  border-radius: 20px 20px 0 0;
}
.ticket-tournament__total__head__icon {
  margin-left: 10px;
  width: 30px;
}
.ticket-tournament__total__head__icon img {
  width: 100%;
  height: 100%;
}
.ticket-tournament__total__head__title h3 {
  color: #fff;
  font-size: 23px;
  font-weight: 700;
}
.ticket-tournament__total__head__icon-color {
  display: none;
  margin-left: 10px;
  width: 30px;
}
.ticket-tournament__total__head__icon-color img {
  width: 100%;
  height: 100%;
}
.ticket-tournament__total__content {
  padding: 0 46px 0 55px;
}
.ticket-tournament__total__content__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.ticket-tournament__total__content__code__right h4 {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}
.ticket-tournament__total__content__code__left {
  width: 100%;
  max-width: 178px;
}
.ticket-tournament__total__content__code__left span {
  background-color: #39b54a;
  border-radius: 10px;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 9px 0 2px 0;
}
.ticket-tournament__total__content__form {
  margin-bottom: 22px;
}
.ticket-tournament__total__content__form--border {
  border-bottom: 1px solid #6a679b;
  margin-bottom: 21px;
  padding-bottom: 13px;
}
.ticket-tournament__total__content__form__label {
  margin-bottom: 6px;
}
.ticket-tournament__total__content__form__label--margin {
  margin-bottom: 0;
}
.ticket-tournament__total__content__form__label span {
  color: #6a679b;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 22px;
  font-weight: 600;
}
.ticket-tournament__total__content__form__label span::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #00a651;
  right: 0;
}
.ticket-tournament__total__content__form__input {
  border-radius: 10px;
  background-color: #110d52;
  margin-bottom: 10px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 11px 0 5px 0;
}
.ticket-tournament__total__content__form__input--date {
  justify-content: left;
  text-align: left;
  padding-left: 20px;
}
.ticket-tournament__total__content__form__input--back {
  background: none;
  margin-bottom: 10px;
  padding: 0;
}
.ticket-tournament__total__content__form__input span {
  color: #fff;
  font-size: 19px;
  font-weight: 600;
}
.ticket-tournament__total__content__data {
  display: flex;
  justify-content: space-between;
}
.ticket-tournament__total__content__data--border {
  border-bottom: 1px solid #6a679b;
  margin-bottom: 17px;
  padding-bottom: 3px;
}
.ticket-tournament__total__content__tag {
  text-align: center;
  justify-content: center;
  display: flex;
  padding-bottom: 15px;
}
.ticket-tournament__total__content__tag span {
  color: #5e5b8e;
  font-size: 17px;
  font-weight: 600;
}
.ticket-tournament__total__content .mybox {
  max-width: 800px;
  margin: 10px auto;
  background-color: #fff;
  text-align: center;
  padding: 10px;
  box-shadow: 2px 5px 30px rgba(0, 0, 0, 0.1);
}
.ticket-tournament__footer {
  margin: 0 auto;
  max-width: 580px;
}
.ticket-tournament__footer a {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 21px;
  font-weight: 600;
}
.ticket-tournament__footer a img {
  margin-left: 7px;
}

[data-theme=dark] .ticket-tournament__footer a {
  color: #fff;
}

@media (max-width: 576px) {
  .ticket-tournament__total__content {
    padding: 0 15px;
  }
  .ticket-tournament__total__content__code {
    flex-direction: column;
  }
  .ticket-tournament__total__content__code__right {
    margin-bottom: 10px;
  }
  .ticket-tournament__total__content__data {
    flex-direction: column;
  }
  .ticket-tournament__total__content__form__input span {
    font-size: 17px;
  }
  .ticket-tournament__footer a {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .ticket-tournament__total__head__title h3 {
    font-size: 20px;
  }
}
@media print {
  @page {
    size: A4;
    margin: 0 auto;
  }
  * {
    box-sizing: border-box;
  }
  .ticket-tournament {
    padding-bottom: 90px;
  }
  .ticket-tournament__total {
    max-width: 580px;
    margin: 0 auto;
    border-radius: 20px;
    padding-right: 0;
    margin-bottom: 20px;
  }
  .ticket-tournament__total__head {
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
    background-color: #ed1c24;
    padding: 20px 25px;
    border-radius: 20px 20px 0 0;
    border-bottom: 2px solid #ed1c24;
  }
  .ticket-tournament__total__head__icon {
    margin-left: 10px;
    width: 30px;
    display: none;
  }
  .ticket-tournament__total__head__icon img {
    width: 100%;
    height: 100%;
  }
  .ticket-tournament__total__head__icon-color {
    display: block;
    margin-left: 10px;
    width: 30px;
    height: 43px;
  }
  .ticket-tournament__total__head__icon-color img {
    width: 100%;
    height: 100%;
  }
  .ticket-tournament__total__head__title h3 {
    color: #fff;
    font-size: 23px;
    font-weight: 700;
  }
  .ticket-tournament__total__content__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 2px solid #39b54a;
  }
  .ticket-tournament__total__content__code__right h4 {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
  }
  .ticket-tournament__total__content__code__left {
    width: 100%;
    max-width: 178px;
  }
  .ticket-tournament__total__content__code__left span {
    background-color: #39b54a;
    border-radius: 10px;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 9px 0 2px 0;
  }
  .ticket-tournament__total__content__form {
    margin-bottom: 22px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 2px dashed #000;
  }
  .ticket-tournament__total__content__form--border {
    border-bottom: 1px solid #6a679b;
    margin-bottom: 21px;
    padding-bottom: 13px;
  }
  .ticket-tournament__total__content__form__label {
    margin-bottom: 6px;
  }
  .ticket-tournament__total__content__form__label--margin {
    margin-bottom: 0;
  }
  .ticket-tournament__total__content__form__label span {
    color: #6a679b;
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 22px;
    font-weight: 600;
  }
  .ticket-tournament__total__content__form__label span::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #00a651;
    right: 0;
  }
  .ticket-tournament__total__content__form__input {
    border-radius: 10px;
    background-color: #110d52;
    margin-bottom: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 11px 0 5px 0;
  }
  .ticket-tournament__total__content__form__input--date {
    justify-content: left;
    text-align: left;
    padding-left: 20px;
  }
  .ticket-tournament__total__content__form__input--back {
    background: none;
    margin-bottom: 10px;
    padding: 0;
  }
  .ticket-tournament__total__content__form__input span {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
  }
  .ticket-tournament__total__content__data {
    display: flex;
    justify-content: space-between;
    border: 2px dashed #000;
    margin-bottom: 22px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .ticket-tournament__total__content__data--border {
    margin-bottom: 17px;
    padding-bottom: 3px;
  }
  .ticket-tournament__total__content__tag {
    text-align: center;
    justify-content: center;
    display: flex;
    padding-bottom: 15px;
  }
  .ticket-tournament__total__content__tag span {
    color: #5e5b8e;
    font-size: 17px;
    font-weight: 600;
  }
  .ticket-tournament__total__content .mybox {
    max-width: 800px;
    margin: 10px auto;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    box-shadow: 2px 5px 30px rgba(0, 0, 0, 0.1);
  }
  .ticket-tournament__footer {
    display: none;
  }
}
/* landing */
.landing {
  display: none;
}

@keyframes lp-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.lp {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0a2e 0%, #1a1145 30%, #251a5e 60%, #1e1250 100%);
  position: relative;
  overflow: hidden;
  padding: 40px 0;
}
.lp__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.lp__bg-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.lp__bg-circle--1 {
  width: 400px;
  height: 400px;
  background: rgba(139, 92, 246, 0.15);
  top: -15%;
  right: -10%;
}
.lp__bg-circle--2 {
  width: 300px;
  height: 300px;
  background: rgba(236, 72, 153, 0.08);
  bottom: -10%;
  left: -5%;
}
.lp__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}
.lp__logo {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  animation: lp-float 4s ease-in-out infinite;
}
.lp__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.lp__title {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.6;
}
.lp__title span {
  display: inline-block;
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
}
.lp__desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 32px;
}
.lp__categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.lp__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
}
.lp__cat svg {
  color: rgba(255, 255, 255, 0.4);
}
.lp__cat:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #fff;
}
.lp__cat:hover svg {
  color: #a78bfa;
}
.lp__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
  opacity: 0.4;
}
.lp__brands img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}
.lp__enter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 36px;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.3);
  margin-bottom: 24px;
}
.lp__enter svg {
  transition: transform 0.3s;
}
.lp__enter:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(124, 58, 237, 0.4);
  color: #fff;
}
.lp__enter:hover svg {
  transform: translateX(-4px);
}
.lp__url {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  direction: ltr;
  letter-spacing: 1px;
}

@media (max-width: 576px) {
  .lp__title {
    font-size: 20px;
  }
  .lp__title span {
    font-size: 24px;
  }
  .lp__categories {
    gap: 6px;
  }
  .lp__cat {
    padding: 8px 14px;
    font-size: 12px;
  }
  .lp__enter {
    font-size: 14px;
    padding: 12px 28px;
  }
  .lp__brands img {
    height: 22px;
  }
}
/* footer */
.site-footer {
  position: relative;
}
.site-footer__top-bar {
  background: linear-gradient(135deg, #4a2d8a 0%, #6b44b8 30%, #8b5cf6 60%, #7c3aed 100%);
  padding: 0;
}
.site-footer__top-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.site-footer__top-bar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}
.site-footer__top-bar__item:last-child {
  border-left: none;
}
.site-footer__top-bar__item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.site-footer__top-bar__icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.site-footer__top-bar__text {
  display: flex;
  flex-direction: column;
}
.site-footer__top-bar__label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  margin-bottom: 2px;
}
.site-footer__top-bar__text strong {
  font-size: 13.5px;
  color: #fff;
  font-weight: 700;
}
.site-footer__main {
  background: #1a1a2e;
  padding: 50px 0 40px;
}
.site-footer__main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.site-footer__main-col--about {
  padding-left: 30px;
}
.site-footer__logo {
  margin-bottom: 18px;
}
.site-footer__logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.site-footer__about-text {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 22px;
  text-align: justify;
}
.site-footer__social {
  display: flex;
  gap: 10px;
}
.site-footer__social-link {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}
.site-footer__social-link:hover {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
  transform: translateY(-2px);
}
.site-footer__col-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
  padding-bottom: 12px;
  position: relative;
}
.site-footer__col-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6);
  border-radius: 2px;
}
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__links li {
  margin-bottom: 10px;
}
.site-footer__links li:last-child {
  margin-bottom: 0;
}
.site-footer__links li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.site-footer__links li a::before {
  content: "";
  width: 0;
  height: 2px;
  background: #8b5cf6;
  border-radius: 2px;
  transition: width 0.25s ease;
}
.site-footer__links li a:hover {
  color: #c4b5fd;
}
.site-footer__links li a:hover::before {
  width: 14px;
}
.site-footer__enamad {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.site-footer__enamad-item {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: all 0.3s ease;
}
.site-footer__enamad-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.site-footer__enamad-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-footer__bottom {
  background: #141425;
  padding: 16px 0;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer__copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.site-footer__designer {
  transition: all 0.3s ease;
  opacity: 0.4;
}
.site-footer__designer i {
  font-size: 28px;
  color: #fff;
}
.site-footer__designer:hover {
  opacity: 0.7;
}

.report-bug {
  position: fixed;
  left: 30px;
  bottom: 10px;
  z-index: 9999999;
}
.report-bug a {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #0f0b3c;
}
.report-bug a i {
  height: 50px;
  width: 50px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f31212;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eee, 0 0 0 8px #fff, 0 0 0 9px #f5f5f5;
  font-size: 21px;
  color: #fdfdfd;
  transition: 0.2s;
  transform: rotate(180deg);
}
.report-bug a:hover i {
  font-size: 27px;
}

.alert {
  position: fixed;
  right: 30px;
  bottom: 10px;
  z-index: 9999999;
}
.alert a {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #0f0b3c;
}
.alert a i {
  margin-left: 15px;
  height: 50px;
  width: 50px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f31212;
  animation: shake 0.5s infinite;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #eee, 0 0 0 8px #fff, 0 0 0 9px #f5f5f5;
  font-size: 21px;
  color: #fdfdfd;
  transition: 0.2s;
  transform: rotate(180deg);
}
.alert a:hover i {
  font-size: 27px;
}

@keyframes shake {
  0% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(5deg);
  }
  30% {
    transform: rotate(-5deg);
  }
  45% {
    transform: rotate(4deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(2deg);
  }
  85% {
    transform: rotate(-2deg);
  }
  92% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0);
  }
}
#drag-btn {
  position: relative;
}

#mydiv {
  position: absolute;
  z-index: 9;
}
#mydiv.active {
  transition: 0.3s;
}

#mydivheader {
  cursor: move;
  z-index: 10;
}

@media (max-width: 1200px) {
  .site-footer__top-bar__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__top-bar__item:nth-child(2) {
    border-left: none;
  }
  .site-footer__main-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
  }
  .site-footer__main-col--trust {
    grid-column: 1/-1;
  }
  .site-footer__enamad {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .site-footer__top-bar {
    padding: 10px 0;
  }
  .site-footer__top-bar__inner {
    display: flex !important;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 15px 6px;
    margin: 0 -15px;
    scrollbar-width: none;
  }
  .site-footer__top-bar__inner::-webkit-scrollbar {
    display: none;
  }
  .site-footer__top-bar__item {
    flex: 0 0 auto;
    border: none !important;
    background: rgba(255, 255, 255, 0.08);
    padding: 9px 14px;
    gap: 8px;
    border-radius: 12px;
    scroll-snap-align: start;
    backdrop-filter: blur(8px);
  }
  .site-footer__top-bar__item:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  .site-footer__top-bar__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
  }
  .site-footer__top-bar__icon svg {
    width: 15px;
    height: 15px;
  }
  .site-footer__top-bar__label {
    font-size: 9.5px;
    margin-bottom: 1px;
  }
  .site-footer__top-bar__text strong {
    font-size: 11.5px;
    font-weight: 700;
  }
  .site-footer__main {
    padding: 22px 0 18px;
  }
  .site-footer__main-grid {
    display: block;
    gap: 0;
  }
  .site-footer__main-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .site-footer__main-col--about {
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
    text-align: center;
  }
  .site-footer__main-col:not(.site-footer__main-col--about):not(.site-footer__main-col--trust) .site-footer__col-title {
    cursor: pointer;
    user-select: none;
    margin: 0;
    padding: 13px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }
  .site-footer__main-col:not(.site-footer__main-col--about):not(.site-footer__main-col--trust) .site-footer__col-title::after {
    content: "";
    position: relative;
    right: auto;
    bottom: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    background: transparent;
    border-radius: 0;
    margin-left: 4px;
    opacity: 0.6;
  }
  .site-footer__main-col:not(.site-footer__main-col--about):not(.site-footer__main-col--trust) .site-footer__links {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.35s ease;
  }
  .site-footer__main-col:not(.site-footer__main-col--about):not(.site-footer__main-col--trust).is-open .site-footer__col-title::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  .site-footer__main-col:not(.site-footer__main-col--about):not(.site-footer__main-col--trust).is-open .site-footer__links {
    max-height: 600px;
    padding: 4px 4px 12px;
  }
  .site-footer__main-col--trust {
    border-bottom: none;
    padding-top: 14px;
  }
  .site-footer__main-col--trust .site-footer__col-title {
    font-size: 13px;
    margin-bottom: 12px;
    text-align: center;
  }
  .site-footer__main-col--trust .site-footer__col-title::after {
    right: 50%;
    transform: translateX(50%);
    bottom: -6px;
  }
  .site-footer__main-col--trust .site-footer__enamad {
    justify-content: center !important;
    gap: 10px;
    flex-wrap: wrap;
  }
  .site-footer__main-col--trust .site-footer__enamad .site-footer__enamad-item {
    width: 72px;
    height: 72px;
  }
  .site-footer__main-col--trust .site-footer__enamad .site-footer__enamad-item img {
    max-width: 56px;
    max-height: 56px;
  }
  .site-footer__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  .site-footer__logo img {
    height: 28px;
  }
  .site-footer__about-text {
    font-size: 11.5px;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: center;
  }
  .site-footer__social {
    justify-content: center;
    gap: 8px;
  }
  .site-footer__social-link {
    width: 34px;
    height: 34px;
  }
  .site-footer__social-link i {
    font-size: 14px;
  }
  .site-footer__col-title {
    font-size: 13px;
  }
  .site-footer__links li {
    margin-bottom: 6px;
  }
  .site-footer__links li a {
    font-size: 12px;
  }
  .site-footer__bottom {
    padding: 10px 0;
  }
  .site-footer__bottom-inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .site-footer__copyright {
    font-size: 10.5px;
    line-height: 1.6;
  }
  .site-footer__designer i {
    font-size: 16px;
  }
}
@media (max-width: 1500px) {
  .report-bug a span,
.alert a span {
    display: none;
  }
}
[data-theme=dark] .site-footer__top-bar {
  background: linear-gradient(135deg, #1e0f4a 0%, #2d1b69 50%, #3b2680 100%);
}
[data-theme=dark] .site-footer__main {
  background: #070525;
}
[data-theme=dark] .site-footer__bottom {
  background: #050418;
}
[data-theme=dark] .site-footer__about-text {
  color: rgba(199, 197, 238, 0.6);
}
[data-theme=dark] .site-footer__links li a {
  color: rgba(199, 197, 238, 0.5);
}
[data-theme=dark] .site-footer__links li a:hover {
  color: #c4b5fd;
}
[data-theme=dark] .site-footer__col-title {
  color: #c7c5ee;
}
[data-theme=dark] .site-footer__copyright {
  color: rgba(199, 197, 238, 0.4);
}
[data-theme=dark] .site-footer__enamad-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .site-footer__social-link {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #7b77c5;
}
[data-theme=dark] .site-footer__social-link:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
[data-theme=dark] .report-bug a {
  color: #fff;
}
[data-theme=dark] .report-bug a i {
  box-shadow: 0 0 0 4px #070525, 0 0 0 5px #1f1c53, 0 0 0 8px #070525, 0 0 0 9px #1f1c53;
}
[data-theme=dark] .alert a {
  color: #fff;
}
[data-theme=dark] .alert a i {
  box-shadow: 0 0 0 4px #070525, 0 0 0 5px #1f1c53, 0 0 0 8px #070525, 0 0 0 9px #1f1c53;
}

/* extra style */
.license-page__header {
  margin-bottom: 20px;
}
.license-page__header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.license-page__header h2 svg {
  color: #7c3aed;
}
.license-page__filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  margin-bottom: 16px;
}
.license-page__filter {
  flex: 1;
}
.license-page__filter label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
}
.license-page__filter select, .license-page__filter input {
  width: 100%;
  height: 40px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: #333;
}
.license-page__filter select:focus, .license-page__filter input:focus {
  outline: none;
  border-color: #8b5cf6;
}
.license-page__filter select::placeholder, .license-page__filter input::placeholder {
  color: #bbb;
}
.license-page__filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15);
}
.license-page__filter-btn:hover {
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.license-page__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.license-page__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.license-page__pg {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}
.license-page__pg:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
}
.license-page__pg.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #7c3aed;
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.2);
}

.license-card {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.license-card:hover {
  border-color: #e0daf5;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.04);
}
.license-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.license-card__img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #f0ecf9;
}
.license-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.license-card__info {
  flex: 1;
  min-width: 0;
}
.license-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.license-card__order {
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #f3f0ff;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace;
}
.license-card__date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #bbb;
}
.license-card__date svg {
  color: #ddd;
}
.license-card__info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin: 0 0 2px;
}
.license-card__package {
  font-size: 12px;
  color: #888;
}
.license-card__actions-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.license-card__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3f0ff;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.2s;
}
.license-card__toggle svg {
  transition: transform 0.3s;
}
.license-card__toggle:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}
.license-card__delete {
  width: 36px;
  height: 36px;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  transition: all 0.2s;
}
.license-card__delete:hover {
  background: #fee2e2;
}
.license-card__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 20px;
  border-top: 0 solid #f0ecf9;
}
.license-card.is-open .license-card__details {
  max-height: 400px;
  padding: 16px 20px;
  border-top-width: 1px;
}
.license-card.is-open .license-card__toggle svg {
  transform: rotate(180deg);
}
.license-card__credentials {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.license-card__cred {
  flex: 1;
}
.license-card__cred label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
}
.license-card__cred-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 4px 6px 4px 6px;
}
.license-card__cred-field input {
  flex: 1;
  height: 36px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  font-family: monospace;
  padding: 0 8px;
}
.license-card__cred-field input:focus {
  outline: none;
}
.license-card__cred-eye, .license-card__cred-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid #f0ecf9;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.license-card__cred-eye:hover, .license-card__cred-copy:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #f3f0ff;
}
.license-card__cred-copy {
  color: #7c3aed;
}
.license-card__quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.license-card__qa {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
}
.license-card__qa--green {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.license-card__qa--green:hover {
  background: #d1fae5;
}
.license-card__qa--purple {
  background: #f3f0ff;
  color: #7c3aed;
  border: 1px solid #ddd4f3;
}
.license-card__qa--purple:hover {
  background: #ede9fe;
}
.license-card__qa--blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.license-card__qa--blue:hover {
  background: #dbeafe;
}

@media (max-width: 768px) {
  .license-page__filters {
    flex-direction: column;
    gap: 10px;
  }
  .license-page__filter-btn {
    width: 100%;
    justify-content: center;
  }
  .license-card__row {
    flex-wrap: wrap;
  }
  .license-card__actions-top {
    width: 100%;
    justify-content: flex-end;
  }
  .license-card__credentials {
    flex-direction: column;
  }
}
[data-theme=dark] .license-page__header h2 {
  color: #e0e0ff;
}
[data-theme=dark] .license-page__filters {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .license-page__filter label {
  color: #5a5790;
}
[data-theme=dark] .license-page__filter select, [data-theme=dark] .license-page__filter input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .license-page__pg {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #5a5790;
}
[data-theme=dark] .license-page__pg:hover {
  border-color: #7c3aed;
  color: #c4b5fd;
}
[data-theme=dark] .license-page__pg.is-active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
}
[data-theme=dark] .license-card {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .license-card__info h4 {
  color: #e0e0ff;
}
[data-theme=dark] .license-card__package {
  color: #5a5790;
}
[data-theme=dark] .license-card__order {
  background: #1a1550;
  color: #a78bfa;
}
[data-theme=dark] .license-card__toggle {
  background: #1a1550;
  border-color: #1e1b4b;
  color: #a78bfa;
}
[data-theme=dark] .license-card__toggle:hover {
  background: #2a2060;
}
[data-theme=dark] .license-card__delete {
  background: #1a1020;
  border-color: #2a1530;
}
[data-theme=dark] .license-card__details {
  border-color: #1e1b4b;
}
[data-theme=dark] .license-card__cred-field {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .license-card__cred-field input {
  color: #e0e0ff;
}
[data-theme=dark] .license-card__cred-eye, [data-theme=dark] .license-card__cred-copy {
  border-color: #1e1b4b;
  color: #5a5790;
}
[data-theme=dark] .license-card__cred-eye:hover, [data-theme=dark] .license-card__cred-copy:hover {
  background: #1a1550;
  border-color: #7c3aed;
  color: #c4b5fd;
}
[data-theme=dark] .license-card__qa--green {
  background: #0a2620;
  border-color: #0f3d2e;
  color: #34d399;
}
[data-theme=dark] .license-card__qa--purple {
  background: #1a1550;
  border-color: #2a2060;
  color: #c4b5fd;
}
[data-theme=dark] .license-card__qa--blue {
  background: #0f1a3a;
  border-color: #1e3a5f;
  color: #93c5fd;
}

.px-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.px-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
}
.px-alert__icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.px-alert__text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.px-alert__close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.px-alert--success {
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
}
.px-alert--success .px-alert__icon {
  background: #10b981;
  color: #fff;
}
.px-alert--success .px-alert__text {
  color: #047857;
}
.px-alert--success .px-alert__close {
  color: #059669;
}
.px-alert--success .px-alert__close:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.px-alert--warning {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
}
.px-alert--warning .px-alert__icon {
  background: #f59e0b;
  color: #fff;
}
.px-alert--warning .px-alert__text {
  color: #92400e;
}
.px-alert--warning .px-alert__close {
  color: #d97706;
}
.px-alert--warning .px-alert__close:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}
.px-alert--info {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
}
.px-alert--info .px-alert__icon {
  background: #3b82f6;
  color: #fff;
}
.px-alert--info .px-alert__text {
  color: #1e40af;
}
.px-alert--info .px-alert__close {
  color: #2563eb;
}
.px-alert--info .px-alert__close:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.px-alert--danger {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
}
.px-alert--danger .px-alert__icon {
  background: #ef4444;
  color: #fff;
}
.px-alert--danger .px-alert__text {
  color: #991b1b;
}
.px-alert--danger .px-alert__close {
  color: #ef4444;
}
.px-alert--danger .px-alert__close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.px-components {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.px-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0ecf9;
}
.px-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.px-section__title {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.px-section__title svg {
  color: #7c3aed;
}

.px-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .px-grid {
    grid-template-columns: 1fr;
  }
}
.px-field {
  margin-bottom: 0;
}

.px-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
}

.px-select {
  width: 100%;
  height: 44px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.px-select:focus {
  outline: none;
  border-color: #8b5cf6;
}

.px-input {
  position: relative;
}
.px-input input {
  width: 100%;
  height: 44px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 0 14px;
  padding-right: 38px;
  font-size: 13px;
  color: #333;
}
.px-input input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.px-input input::placeholder {
  color: #bbb;
}
.px-input svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c4b5fd;
}
.px-input__suffix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #999;
  font-weight: 600;
}

.px-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.px-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.px-btn--primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15);
}
.px-btn--primary:hover {
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.25);
  color: #fff;
}
.px-btn--success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.15);
}
.px-btn--success:hover {
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.25);
  color: #fff;
}
.px-btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
}
.px-btn--danger:hover {
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.25);
  color: #fff;
}
.px-btn--outline {
  background: none;
  border: 1.5px solid #e5e5e5;
  color: #666;
}
.px-btn--outline:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
}
.px-btn--ghost {
  background: #f8f7fc;
  border: none;
  color: #7c3aed;
}
.px-btn--ghost:hover {
  background: #f3f0ff;
}

.px-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  border: 2px dashed #e0daf5;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.px-upload__dropzone p {
  font-size: 14px;
  color: #666;
  margin: 0;
}
.px-upload__dropzone p strong {
  color: #7c3aed;
}
.px-upload__dropzone small {
  font-size: 11px;
  color: #bbb;
}
.px-upload__dropzone svg {
  color: #c4b5fd;
}
.px-upload__dropzone input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
.px-upload__dropzone:hover {
  border-color: #8b5cf6;
  background: #faf9fe;
}

.px-otp-section {
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  padding: 20px;
}

.px-otp-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.px-otp-phone__label {
  font-size: 13px;
  color: #999;
}
.px-otp-phone strong {
  font-size: 15px;
  color: #111;
  direction: ltr;
  font-family: monospace;
}
.px-otp-phone__verified {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  padding: 3px 10px;
  border-radius: 6px;
  margin-right: auto;
}

.px-otp-inputs {
  display: flex;
  gap: 10px;
  direction: ltr;
  margin-bottom: 16px;
}
.px-otp-inputs input {
  flex: 1;
  height: 56px;
  max-width: 70px;
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #111;
}
.px-otp-inputs input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}

.px-otp-actions {
  display: flex;
  gap: 8px;
}

.px-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.px-stat-card {
  padding: 18px;
  border-radius: 16px;
  border: 1.5px solid #f0ecf9;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.25s;
}
.px-stat-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.px-stat-card__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.px-stat-card__info {
  flex: 1;
}
.px-stat-card__info strong {
  font-size: 18px;
  font-weight: 900;
  color: #111;
  display: block;
}
.px-stat-card__info strong small {
  font-size: 11px;
  font-weight: 400;
  color: #bbb;
}
.px-stat-card__info span {
  font-size: 12px;
  color: #888;
}
.px-stat-card__action {
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
  background: #f3f0ff;
  padding: 4px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.px-stat-card__action:hover {
  background: #ede9fe;
}
.px-stat-card[data-color=purple] {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}
.px-stat-card[data-color=purple] .px-stat-card__icon {
  background: #8b5cf6;
  color: #fff;
}
.px-stat-card[data-color=green] {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.px-stat-card[data-color=green] .px-stat-card__icon {
  background: #10b981;
  color: #fff;
}
.px-stat-card[data-color=orange] {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
}
.px-stat-card[data-color=orange] .px-stat-card__icon {
  background: #f59e0b;
  color: #fff;
}

@media (max-width: 768px) {
  .px-stats {
    grid-template-columns: 1fr;
  }
}
.px-referral {
  background: #fff;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
}
.px-referral__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.px-referral__header svg {
  color: #7c3aed;
}
.px-referral__header h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin: 0;
}
.px-referral__copy {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 4px 4px 4px 14px;
}
.px-referral__link {
  flex: 1;
  font-size: 13px;
  color: #7c3aed;
  font-weight: 600;
  direction: ltr;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.px-referral__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s;
}
.px-referral__btn:hover {
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.px-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a1a2e, #2d1f6e);
  border-radius: 18px;
  padding: 24px 28px;
}
.px-wallet__info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.px-wallet__info small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 2px;
}
.px-wallet__info strong {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}
.px-wallet__info strong span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.px-wallet__icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
}
.px-wallet__actions {
  display: flex;
  gap: 8px;
}
.px-wallet__actions .px-btn--success {
  color: #fff;
}
.px-wallet__actions .px-btn--outline {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.px-wallet__actions .px-btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

@media (max-width: 768px) {
  .px-wallet {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .px-wallet__actions {
    width: 100%;
  }
  .px-wallet__actions .px-btn {
    flex: 1;
    justify-content: center;
  }
}
[data-theme=dark] .px-components {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .px-section__title {
  color: #e0e0ff;
}
[data-theme=dark] .px-label {
  color: #5a5790;
}
[data-theme=dark] .px-select, [data-theme=dark] .px-input input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .px-upload__dropzone {
  border-color: #1e1b4b;
}
[data-theme=dark] .px-upload__dropzone:hover {
  border-color: #7c3aed;
  background: #13103f;
}
[data-theme=dark] .px-upload__dropzone p {
  color: #7b77c5;
}
[data-theme=dark] .px-otp-section {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .px-otp-phone strong {
  color: #e0e0ff;
}
[data-theme=dark] .px-otp-inputs input {
  background: #110e3a;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .px-stat-card {
  border-color: #1e1b4b;
}
[data-theme=dark] .px-stat-card__info strong {
  color: #e0e0ff;
}
[data-theme=dark] .px-stat-card__info span {
  color: #5a5790;
}
[data-theme=dark] .px-stat-card[data-color=purple] {
  background: linear-gradient(135deg, #1a1550, #13103f);
}
[data-theme=dark] .px-stat-card[data-color=green] {
  background: linear-gradient(135deg, #0a2620, #071f1a);
}
[data-theme=dark] .px-stat-card[data-color=orange] {
  background: linear-gradient(135deg, #2a1f10, #1f170a);
}
[data-theme=dark] .px-referral {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .px-referral__header h4 {
  color: #e0e0ff;
}
[data-theme=dark] .px-referral__copy {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .px-referral__link {
  color: #a78bfa;
}
[data-theme=dark] .px-wallet {
  background: linear-gradient(135deg, #0a0820, #1a1550);
}
[data-theme=dark] .px-btn--outline {
  border-color: #1e1b4b;
  color: #7b77c5;
}
[data-theme=dark] .px-btn--outline:hover {
  border-color: #7c3aed;
  color: #c4b5fd;
}
[data-theme=dark] .px-btn--ghost {
  background: #1a1550;
  color: #c4b5fd;
}

.btns {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

.select-box .selectize-input {
  border: 1px solid #d9d9d9;
  box-shadow: none;
  border-radius: 8px;
  padding: 15px 17px;
}
.select-box .selectize-input > input {
  color: #717171;
  font-size: 14px;
  font-weight: 600;
}
.select-box .selectize-input:after {
  content: "\e902" !important;
  font-family: "icomoon" !important;
  width: 9px !important;
  height: 9px !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  left: 25px !important;
  font-size: 8px;
  color: #494949;
  transform: translate(0, -50%);
  transition: 0.3s;
}
.select-box .selectize-input.dropdown-active {
  border-radius: 8px 8px 0 0;
}
.select-box .selectize-input.dropdown-active:after {
  transform: rotateX(180deg);
}
.select-box .selectize-dropdown {
  box-shadow: none;
}
.select-box .selectize-dropdown .option {
  color: #717171;
  font-size: 13px;
  font-weight: 600;
  transition: 0.3s;
  height: 49px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px 16px;
  cursor: pointer;
}
.select-box .selectize-dropdown .option:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 5px;
  left: 5px;
  border-bottom: 0.8px solid #dedede;
}
.select-box .selectize-dropdown .option.active {
  background-color: #f6f6f6;
  color: #000000;
}
.select-box .selectize-dropdown .option:nth-last-of-type(1):after {
  border-bottom: none;
}

.input {
  position: relative;
  margin-bottom: 28px;
}
.input input {
  width: 100%;
  height: 53px;
  border: 1px solid #d9d9d9;
  color: #717171;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  display: block;
  padding: 0 17px 0 40px;
}
.input input::placeholder {
  color: #717171;
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}
.input i {
  position: absolute;
  transform: translate(0, -50%);
  left: 22px;
  top: 50%;
  font-size: 16px;
  color: #b7b7b7;
}
.input.required:before {
  content: "";
  position: absolute;
  bottom: -4.6px;
  right: 16px;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  background-color: #f01919;
  border-radius: 60px;
}
.input--success input {
  border-color: #c2dabf;
  color: #168207;
}
.input--success i {
  color: #17a404;
}
.input--currency:before {
  content: "ریال";
  position: absolute;
  color: #717171;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  top: 7px;
  bottom: 7px;
  padding-right: 19px;
  border-right: 1px solid #f0f0f0;
  left: 22px;
}

.button {
  width: 128px;
  height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  padding: 0 21px;
  border-radius: 8px;
  margin-left: 50px;
  margin-bottom: 28px;
}
.button i {
  font-size: 13px;
  position: relative;
  right: 0;
  transition: 0.3s;
}
.button:hover i {
  right: 10px;
}
.button--style-1 {
  background-color: #17a404;
  color: #ffffff;
}
.button--style-1 i {
  color: #ffffff;
}
.button--style-2 {
  background-color: #797979;
  color: #ffffff;
}
.button--style-2 i {
  color: #ffffff;
}
.button--style-3 {
  border: 1px solid #d9d9d9;
  color: #000000;
}
.button--style-3 i {
  color: #17a404;
}
.button--style-4 {
  border: 1px solid #d9d9d9;
  color: #797979;
}
.button--style-4 i {
  color: #797979;
}
.button--style-5 {
  color: #000000;
  box-shadow: 0 8px 12px rgba(0, 1, 1, 0.11);
}
.button--style-5 i {
  color: #17a404;
}
.button--style-6 {
  color: #000000;
  box-shadow: 0 8px 12px rgba(0, 1, 1, 0.11);
}
.button--style-6 i {
  color: #17a404;
}
.button--style-7 {
  background-color: #17a404;
  box-shadow: 0 2px 4px rgba(0, 1, 1, 0.38);
  color: #ffffff;
}
.button--style-7 i {
  color: #ffffff;
}
.button--style-8 {
  background-color: #797979;
  box-shadow: 0 2px 4px rgba(0, 1, 1, 0.38);
  color: #ffffff;
}
.button--style-8 i {
  color: #ffffff;
}
.button--style-9 {
  background-color: #f6f6f6;
  color: #b4b4b4;
}
.button--style-9 i {
  color: #b5b5b5;
}

.radio {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.radio__item {
  display: flex;
  margin-left: 20px;
}
.radio label {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.radio label .radio__check {
  width: 22px;
  height: 22px;
  border: 1px solid #cdcdcd;
  border-radius: 60px;
  margin-left: 11px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.radio input {
  display: none;
}
.radio input:checked + label .radio__check {
  border-color: #17a404;
  border-width: 7px;
}
.radio input:checked + label .radio__check:before {
  top: 35%;
  bottom: 35%;
  right: 35%;
  left: 35%;
}

.check {
  display: flex;
  align-items: center;
}
.check__item {
  display: flex;
  margin-left: 20px;
}
.check label {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.check label .check__check {
  width: 22px;
  height: 22px;
  border: 1px solid #cdcdcd;
  border-radius: 8px;
  margin-left: 11px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.check label .check__check:before {
  content: "\e90a";
  font-family: "icomoon";
  font-size: 9px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: 0.3s;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  color: #c6c6c6;
}
.check input {
  display: none;
}
.check input:checked + label .check__check {
  border-color: #17a404;
  background-color: #17a404;
}
.check input:checked + label .check__check:before {
  transform: scale(1);
  color: #ffffff;
}

.file {
  display: flex;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  margin-bottom: 38px;
  min-height: 115px;
}
.file__img {
  max-width: 138px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.file__img i {
  font-size: 20px;
  color: #000000;
}
.file__img img {
  max-height: 100px;
}
.file__img .file__img-remove {
  position: absolute;
  right: 23px;
  background-color: #f01919;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  height: 19px;
  padding: 0 7px;
  border-radius: 20px;
  cursor: pointer;
}
.file__img .file__img-remove i {
  font-size: 9px;
  color: #ffffff;
  margin-left: 5px;
}
.file__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.file__info .file__info-title {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.file__info .file__info-desc {
  display: flex;
  align-items: center;
  color: #b1b1b1;
  font-size: 13px;
  font-weight: 600;
}
.file__status {
  margin-right: auto;
  border-right: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 10px 15px;
  max-width: 250px;
}
.file__status span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  line-height: 30px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 15px;
}
.file__status span i {
  margin-left: 10px;
  font-size: 14px;
}
.file__status span.red {
  background-color: rgba(164, 4, 4, 0.1);
  color: #f01919;
}
.file__status span.green {
  background-color: rgba(23, 164, 4, 0.1);
  color: #168207;
}
.file__status p {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  background-color: rgba(164, 4, 4, 0.1);
  color: #f01919;
}
.file__choose {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 160px;
  width: 100%;
  border-right: 1px solid #d9d9d9;
  position: relative;
}
.file__choose > i {
  font-size: 19px;
  color: #000000;
  margin-right: 29px;
  position: relative;
}
.file__choose > i i {
  position: absolute;
  font-size: 11px;
  color: #ffffff;
  width: 18px;
  height: 18px;
  border-radius: 60px;
  background-color: #17a404;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1px;
  right: 11px;
}
.file__choose input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.file__choose--last {
  margin-right: auto;
}

.information {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.information > i {
  font-size: 21px;
  margin-left: 27px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.information__desc {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}
.information__close {
  color: #000000;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  opacity: 1;
}
.information__close i {
  font-size: 9px;
  color: #000000;
  margin-right: 10px;
}
.information__close:hover {
  opacity: 0.6;
}
.information--wrning > i {
  color: #ce8b34;
}
.information--info > i {
  color: #5daf91;
}
.information--danger > i {
  color: #dd5757;
}
.information--news > i {
  color: #e47431;
}
.information--ask > i {
  color: #a6a6a6;
}
.information--time > i {
  color: #4fb9c2;
}
.information--success > i {
  color: #17a404;
}

.send-code {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
.send-code__input {
  display: flex;
  align-items: center;
  flex-grow: 1;
  border: 1px solid #d9d9d9;
  padding-right: 31px;
  height: 83px;
  border-radius: 8px;
  margin-left: 18px;
}
.send-code__input > input {
  color: #717171;
  font-size: 14px;
  font-weight: 600;
}
.send-code__input > input::placeholder {
  opacity: 1;
}
.send-code__input .send-code__input-sample {
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: 36px;
}
.send-code__input .send-code__input-sample .phone {
  display: flex;
  align-items: center;
  color: #c2c2c2;
  font-size: 18px;
  font-weight: 600;
}
.send-code__input .send-code__input-sample .phone__pre {
  margin-right: 9px;
}
.send-code__input .send-code__input-sample i {
  font-size: 23px;
  color: #b6b6b6;
  margin-right: 29px;
}
.send-code__btn {
  height: 83px;
  box-shadow: 0 2px 4px rgba(0, 1, 1, 0.38);
  background-color: #17a404;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  width: 142px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.send-code__btn:hover {
  box-shadow: 0 2px 10px rgba(0, 1, 1, 0.38);
}
.send-code--again .send-code__input {
  border-color: #c2dabf;
}
.send-code--again .send-code__input > input {
  color: #168207;
}
.send-code--again .send-code__input .send-code__input-sample .phone {
  color: #168207;
}
.send-code--again .send-code__input .send-code__input-sample i {
  color: #168207;
}
.send-code--again .send-code__btn {
  border: 1px solid #c2dabf;
  background-color: transparent;
  color: #63a45a;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.get-code {
  display: flex;
  align-items: center;
  border: 1px solid #f6f6f6;
  background-color: #f0faef;
  padding: 35px 46px;
  border-radius: 10px;
  margin-bottom: 39px;
}
.get-code__time {
  flex-grow: 1;
}
.get-code__time .get-code__time-numb {
  color: #1c7e0f;
  font-size: 27px;
  font-weight: 600;
}
.get-code__time .get-code__time-title {
  color: #1c7e0f;
  font-size: 13px;
  font-weight: 600;
}
.get-code__inputs {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.get-code__inputs input {
  width: 71px;
  height: 74px;
  line-height: 74px;
  background-color: #e5f4e4;
  border-radius: 5px;
  text-align: center;
  margin-left: 20px;
  color: #1c7e0f;
  font-size: 30px;
  font-weight: 600;
}
.get-code__inputs input:nth-of-type(1) {
  margin-left: 0;
}

.change-number {
  display: flex;
  align-items: center;
}
.change-number__input {
  display: flex;
  align-items: center;
  flex-grow: 1;
  border: 1px solid #c2dabf;
  padding: 27px 0;
  border-radius: 10px;
  padding-right: 31px;
  padding-left: 36px;
}
.change-number__input input {
  color: #168207;
  font-size: 14px;
  font-weight: 600;
}
.change-number__input input::placeholder {
  opacity: 1;
}
.change-number__input .change-number__input-verify {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.change-number__input .change-number__input-verify .verify {
  background-color: rgba(23, 164, 4, 0.1);
  display: flex;
  align-items: center;
  color: #168207;
  font-size: 11px;
  font-weight: 600;
  height: 18px;
  padding: 0 6px;
  border-radius: 20px;
  margin-left: 14px;
}
.change-number__input .change-number__input-verify .verify i {
  font-size: 8px;
  color: #17a404;
  margin-left: 6px;
}
.change-number__input .change-number__input-verify .phone {
  display: flex;
  align-items: center;
  color: #168207;
  font-size: 18px;
  font-weight: 600;
}
.change-number__input .change-number__input-verify .phone__pre {
  margin-right: 6px;
}
.change-number__input .change-number__input-verify > i {
  font-size: 23px;
  color: #17a404;
  margin-right: 29px;
}
.change-number__btn {
  width: 142px;
  height: 83px;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 10px;
  color: #000000;
  font-size: 13px;
  font-weight: 600;
}

.submited-number {
  border: 1px solid #c2dabf;
  padding: 27px 0;
  border-radius: 10px;
  padding-right: 31px;
  padding-left: 36px;
}
.submited-number__verify {
  display: flex;
  align-items: center;
}
.submited-number__verify .verify {
  background-color: rgba(23, 164, 4, 0.1);
  display: flex;
  align-items: center;
  color: #168207;
  font-size: 11px;
  font-weight: 600;
  height: 18px;
  padding: 0 6px;
  border-radius: 20px;
  margin-left: 14px;
}
.submited-number__verify .verify i {
  font-size: 8px;
  color: #17a404;
  margin-left: 6px;
}
.submited-number__verify .phone {
  display: flex;
  align-items: center;
  color: #168207;
  font-size: 18px;
  font-weight: 600;
}
.submited-number__verify .phone__pre {
  margin-right: 6px;
}
.submited-number__verify > i {
  font-size: 23px;
  color: #17a404;
  margin-right: auto;
}

.info-panel {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}
.info-panel__header {
  display: flex;
  align-items: center;
}
.info-panel__image {
  background-color: #0690cf;
  width: 218px;
  border-radius: 21px;
  padding: 12px 10px 15px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.info-panel__image img {
  width: 53px;
  height: 53px;
}
.info-panel__item {
  border-radius: 21px;
  box-shadow: 0px 0px 10.4px 2.6px rgba(0, 0, 0, 0.11);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  padding-bottom: 4px;
  height: 80px;
  margin-right: -160px;
  z-index: 1;
  background-color: #fff;
  width: 218px;
}
.info-panel__item .info-panel__item-head {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.info-panel__item .info-panel__item-head i {
  font-size: 21px;
  color: #000000;
}
.info-panel__item .info-panel__item-head .info-panel__item-val {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.info-panel__item .info-panel__item-head .info-panel__item-val .value {
  color: #000000;
  font-size: 30px;
  font-weight: 600;
  margin-left: 0px;
  margin-top: 10px;
  width: 24px;
  text-align: center;
}
.info-panel__item .info-panel__item-head .info-panel__item-val .title {
  color: #000000;
  font-size: 15px;
  font-weight: 600;
}
.info-panel__item .info-panel__item-desc {
  color: #858484;
  font-size: 16px;
  font-weight: 600;
}
.info-panel__item--check .info-panel__item-head > i {
  color: #17a404;
}
.info-panel__item--check .info-panel__item-desc {
  display: flex;
  align-items: center;
  width: 100%;
}
.info-panel__item--check .info-panel__item-desc a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  height: 25px;
  box-shadow: 0 2px 4px rgba(0, 1, 1, 0.38);
  background-color: #17a404;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 0 10px;
  margin-right: auto;
}

.intro-link {
  margin-bottom: 37px;
}
.intro-link__title {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 21px;
}
.intro-link__copy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  width: 100%;
}
.intro-link__copy .intro-link__copy-input {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  padding-left: 24px;
}
.intro-link__copy .intro-link__copy-btn {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-right: 1px solid #d9d9d9;
  padding: 18px 22px;
  cursor: pointer;
}
.intro-link__copy .intro-link__copy-btn i {
  font-size: 17px;
  color: #000000;
  margin-right: 22px;
}

.wallet {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 41px 58px 41px 46px;
  border-radius: 10px;
}
.wallet__right {
  display: flex;
  align-items: center;
}
.wallet__right .wallet__right-img {
  position: relative;
  margin-left: 73px;
}
.wallet__right .wallet__right-img .avatar {
  position: absolute;
  top: 35px;
  left: -23px;
}
.wallet__right .wallet__right-price .title {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}
.wallet__right .wallet__right-price .price {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -2.16px;
}
.wallet__right .wallet__right-price .price__unit {
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  margin-right: 9px;
  letter-spacing: 0;
}
.wallet__left {
  margin-right: auto;
}
.wallet__left .wallet__left-link {
  box-shadow: 0 1px 2px rgba(0, 1, 1, 0.25);
  background-color: #ffffff;
  border-radius: 8px;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  transition: 0.3s;
  margin-bottom: 21px;
}
.wallet__left .wallet__left-link i {
  font-size: 11px;
  color: #ffffff;
  background-color: #17a404;
  border-radius: 60px;
  padding: 3px 3px;
  margin-left: 21px;
}
.wallet__left .wallet__left-link:hover {
  box-shadow: 0 1px 10px rgba(0, 1, 1, 0.25);
}
.wallet__left .wallet__left-back {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
}
.wallet__left .wallet__left-back i {
  font-size: 15px;
  color: #000000;
}

.help__item {
  position: relative;
  box-shadow: 0 10px 23px rgba(0, 1, 1, 0.06);
  background-color: #ffffff;
  height: 306px;
  display: flex;
  flex-direction: column;
  padding: 0 36px;
  padding-bottom: 33px;
  border-radius: 15px;
}
.help__item > i {
  position: absolute;
  font-size: 23px;
  color: #b0084f;
  top: 35px;
  right: 32px;
}
.help__item .help__item-title {
  margin-top: auto;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 23px;
  margin-bottom: 24px;
}
.help__item .help__item-title .title {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 13px;
}
.help__item .help__item-title .desc {
  color: #656565;
  font-size: 12px;
  font-weight: 600;
  line-height: 25px;
}
.help__item .help__item-footer a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
}
.help__item .help__item-footer a i {
  font-size: 13px;
  color: #000000;
  margin-right: 12px;
  transition: 0.3s;
}
.help__item .help__item-footer a:hover {
  color: #b0084f;
}
.help__item .help__item-footer a:hover i {
  color: #b0084f;
}
.help__item--adviser {
  position: relative;
  padding: 0;
  background-color: transparent;
  box-shadow: 0 10px 23px rgba(0, 1, 1, 0.06);
}
.help__item--adviser .help__item-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  top: 0;
  bottom: 52px;
  left: 57px;
  right: 0;
}
.help__item--adviser .help__item-info .help__item-info-title {
  text-shadow: 0 1px 3px rgba(0, 1, 1, 0.94);
  color: #ffffff;
  font-size: 19px;
  font-weight: 400;
  margin-bottom: -5px;
  margin-top: auto;
}
.help__item--adviser .help__item-info .help__item-info-phone {
  display: flex;
  align-items: center;
  text-shadow: 0 3px 5px rgba(0, 1, 1, 0.75);
  color: #ffffff;
  font-size: 56px;
  margin-bottom: 11px;
}
.help__item--adviser .help__item-info .help__item-info-phone .phone-numb {
  font-weight: 600;
}
.help__item--adviser .help__item-info .help__item-info-phone .phone-pre {
  font-weight: 400;
  margin-right: 11px;
}
.help__item--adviser .help__item-info .help__item-info-social {
  display: flex;
  align-items: center;
}
.help__item--adviser .help__item-info .help__item-info-social > a {
  margin-left: 20px;
}
.help__item--adviser .help__item-info .help__item-info-social > a:last-child {
  margin-left: 0;
}

[data-theme=dark] .help__item {
  background-color: #03021a;
  box-shadow: 0 10px 23px rgba(10, 7, 54, 0.8);
}
[data-theme=dark] .help__item .help__item-title {
  border-bottom: 1px solid #110f3f;
}
[data-theme=dark] .help__item .help__item-title .title {
  color: #908dd3;
}
[data-theme=dark] .help__item .help__item-title .desc {
  color: #c7c5ee;
}
[data-theme=dark] .help__item .help__item-footer a {
  color: #c7c5ee;
}
[data-theme=dark] .help__item .help__item-footer i {
  color: #c7c5ee;
}
[data-theme=dark] .check label {
  color: #c7c5ee;
}
[data-theme=dark] .check label .check__check {
  border: 3px solid #fff;
}
[data-theme=dark] .input input {
  color: #c7c5ee;
  background-color: #18164d;
}
[data-theme=dark] .input input::placeholder {
  color: #c7c5ee;
}
[data-theme=dark] .input i {
  color: #c7c5ee;
}
[data-theme=dark] .input--currency:before {
  color: #c7c5ee;
  border-right: 1px solid #18164d;
}
[data-theme=dark] .button--style-3 {
  border: 1px solid #2b2950;
  color: #c7c5ee;
  background-color: #13113f;
}
[data-theme=dark] .button--style-3 i {
  color: #c7c5ee;
}
[data-theme=dark] .button--style-3:hover i {
  color: #17a404;
  transition: 0.3s;
}
[data-theme=dark] .button--style-5 {
  border: 1px solid #2b2950;
  color: #c7c5ee;
  background-color: #13113f;
}
[data-theme=dark] .button--style-5 i {
  color: #c7c5ee;
}
[data-theme=dark] .button--style-5:hover i {
  color: #17a404;
  transition: 0.3s;
}
[data-theme=dark] .button--style-6 {
  border: 1px solid #2b2950;
  color: #c7c5ee;
  background-color: #13113f;
}
[data-theme=dark] .button--style-6 i {
  color: #c7c5ee;
}
[data-theme=dark] .button--style-6:hover i {
  color: #17a404;
  transition: 0.3s;
}
[data-theme=dark] .button--style-2 {
  border: 1px solid transparent;
  color: #fff;
  background-color: #201e56;
}
[data-theme=dark] .button--style-2 i {
  color: #fff;
}
[data-theme=dark] .button--style-4 {
  border: 1px solid transparent;
  color: #fff;
  background-color: #201e56;
}
[data-theme=dark] .button--style-4 i {
  color: #fff;
}
[data-theme=dark] .button--style-8 {
  border: 1px solid transparent;
  color: #fff;
  background-color: #201e56;
}
[data-theme=dark] .button--style-8 i {
  color: #fff;
}
[data-theme=dark] .button--style-9 {
  border: 1px solid transparent;
  color: #fff;
  background-color: #201e56;
}
[data-theme=dark] .button--style-9 i {
  color: #fff;
}
[data-theme=dark] .button--style-9 .radio label .radio__check {
  border: 1px solid #c7c5ee;
}
[data-theme=dark] .button--style-9 .check label {
  color: #908dd3;
}
[data-theme=dark] .file {
  border: 1px solid #18164d;
  background-color: #0d0b32;
}
[data-theme=dark] .file__info .file__info-title {
  color: #c7c5ee;
}
[data-theme=dark] .file__info .file__info-desc {
  color: #8a87d6;
}
[data-theme=dark] .file__img i {
  color: #c7c5ee;
}
[data-theme=dark] .file__status {
  border-right: 1px solid #18164d;
}
[data-theme=dark] .file__choose {
  border-right: 1px solid #18164d;
  color: #8a87d6;
}
[data-theme=dark] .file__choose > i {
  color: #8a87d6;
}
[data-theme=dark] .file__choose > i i {
  background-color: #8a87d6;
}
[data-theme=dark] .file__choose > i .icon-pluse2 {
  background-color: #17a404;
}
[data-theme=dark] .information__desc {
  color: #c7c5ee;
}
[data-theme=dark] .information__close {
  color: #c7c5ee;
}
[data-theme=dark] .information__close i {
  color: #c7c5ee;
}
[data-theme=dark] .send-code__input {
  background-color: #0d0b32;
  border: 1px solid #18164d;
}
[data-theme=dark] .send-code__input > input {
  background-color: #0d0b32;
}
[data-theme=dark] .send-code__input > input::placeholder {
  color: #8a87d6;
}
[data-theme=dark] .send-code__input .send-code__input-sample .phone {
  color: #c7c5ee;
}
[data-theme=dark] .send-code__input .send-code__input-sample i {
  color: #c7c5ee;
}
[data-theme=dark] .send-code--again .send-code__btn {
  background-color: #15124b;
  border: none;
  color: #c7c5ee;
}
[data-theme=dark] .send-code--again .send-code__btn:hover {
  color: #63a45a;
}
[data-theme=dark] .send-code--again .send-code__input > input {
  background-color: #0d0b32;
}
[data-theme=dark] .get-code {
  border: 1px solid #3ded67;
  background-color: #0d0b32;
}
[data-theme=dark] .get-code__time .get-code__time-numb {
  color: #3ded67;
}
[data-theme=dark] .get-code__time .get-code__time-title {
  color: #3ded67;
}
[data-theme=dark] .get-code .get-code__inputs input {
  color: #3ded67;
  background-color: #1d1b57;
}
[data-theme=dark] .change-number__input {
  background-color: #18164d;
  border-color: transparent;
}
[data-theme=dark] .change-number__input input {
  background-color: #18164d;
}
[data-theme=dark] .change-number__input input::placeholder {
  color: #3ded67;
}
[data-theme=dark] .change-number__input .change-number__input-verify .verify {
  color: #3ded67;
}
[data-theme=dark] .change-number__input .change-number__input-verify .verify i {
  color: #3ded67;
}
[data-theme=dark] .change-number__input .change-number__input-verify .phone {
  color: #3ded67;
}
[data-theme=dark] .change-number__input .change-number__input-verify .phone i {
  color: #3ded67;
}
[data-theme=dark] .change-number__input .change-number__input-verify i {
  color: #3ded67;
}
[data-theme=dark] .change-number .change-number {
  background-color: #18164d;
}
[data-theme=dark] .change-number .change-number__btn {
  border-color: #18164d;
  background-color: #18164d;
  color: #c7c5ee;
}
[data-theme=dark] .submited-number {
  background-color: #18164d;
  border-color: transparent;
}
[data-theme=dark] .submited-number__verify .verify {
  color: #3ded67;
}
[data-theme=dark] .submited-number__verify .verify i {
  color: #3ded67;
}
[data-theme=dark] .submited-number__verify .phone {
  color: #3ded67;
}
[data-theme=dark] .submited-number__verify > i {
  color: #3ded67;
}
[data-theme=dark] .info-panel {
  background-color: #0d0b32;
}
[data-theme=dark] .info-panel__item {
  background-color: #0d0b32;
}
[data-theme=dark] .info-panel__item .info-panel__item-head i {
  color: #c7c5ee;
}
[data-theme=dark] .info-panel__item .info-panel__item-val .value {
  color: #c7c5ee;
}
[data-theme=dark] .info-panel__item .info-panel__item-val .title {
  color: #c7c5ee;
}
[data-theme=dark] .info-panel__item .info-panel__item-desc {
  color: #8a87d6;
}
[data-theme=dark] .btns {
  background-color: #0d0b32;
}
[data-theme=dark] .my-buy__info table .item__copy {
  border: 1px solid #18164d;
}
[data-theme=dark] .my-buy__info table .item__copy-code {
  color: #c7c5ee;
}
[data-theme=dark] .my-buy__info table .item__copy-icon {
  border-right: 1px solid #18164d;
  background-color: #18164d;
}
[data-theme=dark] .my-buy__info table .item__copy-icon i {
  color: #c7c5ee;
}
[data-theme=dark] .wallet {
  background-color: #18164d;
}
[data-theme=dark] .wallet__right .wallet__right-price .title {
  color: #c7c5ee;
}
[data-theme=dark] .wallet__right .wallet__right-price .price {
  color: #c7c5ee;
}
[data-theme=dark] .wallet__right .wallet__right-price .price__unit {
  color: #c7c5ee;
}
[data-theme=dark] .wallet__left .wallet__left-link {
  color: #c7c5ee;
  background-color: #13113f;
  border-bottom: 1px solid #343267;
}
[data-theme=dark] .wallet__left .wallet__left-back {
  color: #c7c5ee;
}
[data-theme=dark] .wallet__left .wallet__left-back i {
  color: #c7c5ee;
}
[data-theme=dark] .intro-link__title {
  color: #c7c5ee;
}
[data-theme=dark] .intro-link__copy {
  border-color: #18164d;
}
[data-theme=dark] .intro-link__copy .intro-link__copy-input {
  color: #c7c5ee;
}
[data-theme=dark] .intro-link__copy .intro-link__copy-btn {
  color: #c7c5ee;
  border-color: #18164d;
}
[data-theme=dark] .intro-link__copy .intro-link__copy-btn i {
  color: #c7c5ee;
}
[data-theme=dark] .radio label {
  color: #c7c5ee;
}

/* modal */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999999999999;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 15px;
}
.modal.active {
  opacity: 1;
  visibility: visible;
}
.modal.active .modal__content {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal__close {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 18px;
  left: 18px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 10px;
  padding: 7px 16px 7px 12px;
  cursor: pointer;
  z-index: 15;
  transition: all 0.25s ease;
  font-size: 12px;
  font-weight: 600;
  color: #999;
}
.modal__close i {
  font-size: 10px;
  color: #bbb;
  transition: color 0.2s;
}
.modal__close::after {
  content: "بستن";
}
.modal__close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}
.modal__close:hover i {
  color: #ef4444;
}
.modal__content {
  background: #fff;
  border-radius: 22px;
  padding: 28px;
  padding-top: 58px;
  width: calc(100% - 30px);
  max-width: 520px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
  position: relative;
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: auto;
}
.modal__content.game-select {
  max-width: 800px;
}
.modal__content.game-select .modal__close {
  position: absolute;
  top: 20px;
  left: 20px;
}
.modal__content--report-bug {
  max-width: 420px;
}
.modal__content__search {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0ecf9;
}
.modal__content__search input {
  width: 100%;
  height: 48px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  padding: 0 44px 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  transition: all 0.25s ease;
}
.modal__content__search input::placeholder {
  color: #bbb;
}
.modal__content__search input:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.modal__content__search i {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #c4b5fd;
  font-size: 16px;
}
.modal__content__search h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}
.modal__content__radio {
  overflow: auto;
  overflow-x: hidden;
  margin-bottom: 20px;
  max-height: 50vh;
  padding-left: 4px;
}
.modal__content__radio::-webkit-scrollbar {
  width: 4px;
}
.modal__content__radio::-webkit-scrollbar-track {
  background: transparent;
}
.modal__content__radio::-webkit-scrollbar-thumb {
  background: #e9e5f5;
  border-radius: 4px;
}
.modal__content__radio__item {
  margin-bottom: 10px;
}
.modal__content__radio__item input {
  display: none;
}
.modal__content__radio__item input:checked + label {
  border-color: #8b5cf6;
  background: #f8f5ff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.modal__content__radio__item input:checked + label::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.modal__content__radio__item label {
  border: 1.5px solid #f0ecf9;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  background: #fff;
}
.modal__content__radio__item label:before {
  display: none;
}
.modal__content__radio__item label:hover {
  border-color: #c4b5fd;
  background: #faf9fe;
}
.modal__content__radio__item label img {
  flex: 0 0 50px;
  max-width: 50px;
  height: 50px;
  object-fit: contain;
  margin-left: 14px;
  background: #f8f7fc;
  border-radius: 12px;
  padding: 6px;
}
.modal__content__radio__item label ul {
  flex: 1;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid #f0ecf9;
  margin: 0;
  list-style: none;
}
.modal__content__radio__item label ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #f8f7fc;
}
.modal__content__radio__item label ul li:last-child {
  border-bottom: none;
}
.modal__content__radio__item label ul li span {
  font-size: 13px;
  font-weight: 500;
  color: #999;
}
.modal__content__radio__item label ul li span:last-child {
  color: #1a1a2e;
  font-weight: 600;
  direction: ltr;
  text-align: left;
  font-family: monospace, "Yekan Bakh";
}
.modal__content__radio__item:last-child {
  margin-bottom: 0;
}
.modal__content__radio__item.no-result {
  display: none;
}
.modal__content__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #f0ecf9;
}
.modal__content__more a {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #7c3aed;
  transition: all 0.25s ease;
}
.modal__content__more a i {
  font-size: 14px;
}
.modal__content__more a:hover {
  color: #6d28d9;
}
.modal__content__more a.btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  padding: 10px 22px;
  border-radius: 12px;
  flex-direction: row-reverse;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.2);
}
.modal__content__more a.btn i {
  margin-right: 6px;
  margin-left: 0;
}
.modal__content__more a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
  color: #fff;
}
.modal__content__add {
  border-bottom: 1px solid #f0ecf9;
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.modal__content__add__title {
  margin-bottom: 12px;
}
.modal__content__add__title a {
  background: #ecfdf5;
  color: #059669;
  padding: 10px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.modal__content__add__title a:hover {
  background: #d1fae5;
}
.modal__content__add__content {
  display: none;
  margin-bottom: 12px;
}
.modal__content__input {
  margin-bottom: 14px;
}
.modal__content__input--donate {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.modal__content__input--donate .donate-tournament {
  width: 80% !important;
  margin-right: auto;
}
.modal__content__input input:not([type=checkbox]), .modal__content__input textarea {
  width: 100%;
  height: 48px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  transition: all 0.25s ease;
}
.modal__content__input input:not([type=checkbox])::placeholder, .modal__content__input textarea::placeholder {
  color: #bbb;
}
.modal__content__input input:not([type=checkbox]):focus, .modal__content__input textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08);
}
.modal__content__input textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 16px;
}
.modal__content__input label {
  color: #666;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.modal__content__input label.file-label {
  height: 48px;
  padding: 0 16px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.modal__content__input label.file-label span:nth-child(2) {
  font-weight: 600;
  color: #1a1a2e;
}
.modal__content__input label.file-label input {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
}
.modal__content__title {
  margin-bottom: 16px;
}
.modal__content__title span, .modal__content__title h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
}
.modal__content__text {
  margin-bottom: 16px;
  color: #777;
  line-height: 1.8;
  text-align: justify;
  font-size: 13px;
  font-weight: 500;
}
.modal__content__btn--donat {
  display: flex;
  gap: 10px;
}
.modal__content__btn--donat button:first-child {
  background: #c4f424;
  color: #000;
}
.modal__content__btn a, .modal__content__btn button {
  height: 50px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: none;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}
.modal__content__btn a:hover, .modal__content__btn button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
}
.modal__content__item__image {
  padding: 16px 0;
  margin-bottom: 12px;
}
.modal__content__item__image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
}
.modal__content__text-name {
  margin-bottom: 16px;
  text-align: center;
  padding-top: 12px;
}
.modal__content__text-name p {
  font-size: 15px;
  font-weight: 600;
  color: #666;
}
.modal__content__text-name p span {
  color: #1a1a2e;
  font-weight: 700;
  padding: 0 3px;
}

@media (max-width: 576px) {
  .modal {
    padding: 20px 10px;
  }
  .modal__content {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .modal__content__radio__item label ul li.license {
    flex-wrap: wrap;
  }
  .modal__content__radio__item label ul li.license a {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .modal__close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    top: 12px;
    left: 12px;
  }
}
.acc-modal {
  padding: 28px 14px;
}
.acc-modal .acc-modal__content {
  width: calc(100% - 28px);
  max-width: 460px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.08), transparent 50%), #fff;
  box-shadow: 0 30px 80px -20px rgba(15, 11, 72, 0.35), 0 0 0 1px rgba(15, 11, 72, 0.04);
}
.acc-modal__close {
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acc-modal__close::after {
  content: none;
}
.acc-modal__close i {
  display: none;
}
.acc-modal__close svg {
  display: block;
}
.acc-modal__close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}
.acc-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 44px 16px 0;
  margin-bottom: 14px;
  border-bottom: 1px solid #ece7f7;
}
.acc-modal__head-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.5);
}
.acc-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acc-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  line-height: 1.3;
}
.acc-modal__subtitle {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  line-height: 1.4;
}
.acc-modal__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #f7f5fc;
  border: 1.5px solid #ece7f7;
  border-radius: 12px;
  height: 42px;
  margin-bottom: 14px;
  transition: border-color 0.2s, background 0.2s;
}
.acc-modal__search:focus-within {
  border-color: #7c3aed;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.acc-modal__search > svg {
  color: rgba(15, 11, 72, 0.45);
  flex-shrink: 0;
}
.acc-modal__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  font-weight: 500;
  color: #0f0b48;
}
.acc-modal__search input::placeholder {
  color: rgba(15, 11, 72, 0.35);
}
.acc-modal__search-clear {
  display: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: rgba(15, 11, 72, 0.08);
  border-radius: 50%;
}
.acc-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-left: 2px;
}
.acc-modal__list::-webkit-scrollbar {
  width: 4px;
}
.acc-modal__list::-webkit-scrollbar-track {
  background: transparent;
}
.acc-modal__list::-webkit-scrollbar-thumb {
  background: rgba(15, 11, 72, 0.12);
  border-radius: 4px;
}
.acc-modal__item {
  display: block;
  cursor: pointer;
}
.acc-modal__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acc-modal__item-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: #fff;
  border: 1.5px solid #ece7f7;
  border-radius: 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.acc-modal__item:hover .acc-modal__item-card {
  border-color: rgba(124, 58, 237, 0.35);
  background: #faf8ff;
  transform: translateY(-1px);
}
input:checked + .acc-modal__item-card {
  border-color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
  box-shadow: 0 4px 16px -6px rgba(124, 58, 237, 0.35);
}
input:checked + .acc-modal__item-card .acc-modal__item-check {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: #7c3aed;
  color: #fff;
  opacity: 1;
  transform: scale(1);
}
.acc-modal__item-logo {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  background: #f7f5fc;
  border: 1px solid #ece7f7;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acc-modal__item-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.acc-modal__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 28px;
}
.acc-modal__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  line-height: 1.3;
}
.acc-modal__item-key {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.acc-modal__item-val {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  direction: ltr;
  text-align: left;
  font-family: "SF Mono", "Menlo", monospace, "Yekan Bakh";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-modal__item-val--mask {
  letter-spacing: 0.05em;
}
.acc-modal__item-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.acc-modal__item-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.acc-modal__item-tag--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.acc-modal__item-tag--green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.acc-modal__item-tag--purple {
  background: #f3f0ff;
  color: #7c3aed;
  border: 1px solid #ddd4f3;
}
.acc-modal__item-tag--orange {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.acc-modal__item-check {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid #ece7f7;
  color: rgba(15, 11, 72, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transform: scale(0.85);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.acc-modal__add-wrap {
  margin-bottom: 14px;
}
.acc-modal__add {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), rgba(16, 185, 129, 0.02));
  border: 1.5px dashed rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, border-radius 0.2s;
}
.acc-modal__add:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
  border-color: rgba(16, 185, 129, 0.6);
  transform: translateY(-1px);
  color: inherit;
}
.acc-modal__add[aria-expanded=true] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.7);
  border-style: solid;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  transform: none;
}
.acc-modal__add[aria-expanded=true] .acc-modal__add-chev {
  transform: rotate(180deg);
}
.acc-modal__add-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 12px -4px rgba(16, 185, 129, 0.45);
}
.acc-modal__add-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acc-modal__add-body strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  line-height: 1.3;
}
.acc-modal__add-body small {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.55);
  line-height: 1.4;
}
.acc-modal__add-chev {
  color: rgba(15, 11, 72, 0.4);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.acc-modal__add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid rgba(16, 185, 129, 0.7);
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  animation: acc-modal-slide-down 0.25s ease;
}
.acc-modal__add-form[hidden] {
  display: none;
}
@keyframes acc-modal-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.acc-modal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.acc-modal__field-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.7);
}
.acc-modal__field-label svg {
  color: #7c3aed;
  flex-shrink: 0;
}
.acc-modal__field-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f5fc;
  border: 1.5px solid #ece7f7;
  border-radius: 11px;
  height: 42px;
  padding: 0 12px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.acc-modal__field-input:focus-within {
  border-color: #7c3aed;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.acc-modal__field-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f0b48;
}
.acc-modal__field-input input::placeholder {
  color: rgba(15, 11, 72, 0.3);
}
.acc-modal__field-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 7px;
  color: rgba(15, 11, 72, 0.45);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.acc-modal__field-eye:hover {
  background: rgba(15, 11, 72, 0.06);
  color: #7c3aed;
}
.acc-modal__field-eye.is-visible {
  color: #7c3aed;
}
.acc-modal__field-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.acc-modal__field-cancel {
  flex: 0 0 auto;
  padding: 0 16px;
  height: 38px;
  border: 0;
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.7);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.acc-modal__field-cancel:hover {
  background: rgba(15, 11, 72, 0.1);
  color: #0f0b48;
}
.acc-modal__field-save {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 0;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 14px -5px rgba(16, 185, 129, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.acc-modal__field-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -5px rgba(16, 185, 129, 0.6);
}
.acc-modal__field-save svg {
  flex-shrink: 0;
}
.acc-modal__foot {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #ece7f7;
}
.acc-modal__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.acc-modal__btn--ghost {
  background: rgba(15, 11, 72, 0.05);
  color: rgba(15, 11, 72, 0.7);
}
.acc-modal__btn--ghost:hover {
  background: rgba(15, 11, 72, 0.1);
  color: #0f0b48;
}
.acc-modal__btn--primary {
  flex: 2;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.5);
}
.acc-modal__btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -6px rgba(124, 58, 237, 0.6);
}
@media (max-width: 575px) {
  .acc-modal {
    padding: 16px 10px;
  }
  .acc-modal .acc-modal__content {
    width: calc(100% - 20px);
    padding: 18px 16px 14px;
    border-radius: 18px;
  }
  .acc-modal__close {
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
  }
  .acc-modal__head {
    padding: 0 38px 12px 0;
    margin-bottom: 12px;
    gap: 10px;
  }
  .acc-modal__head-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .acc-modal__head-ico svg {
    width: 17px;
    height: 17px;
  }
  .acc-modal__title {
    font-size: 14.5px;
  }
  .acc-modal__subtitle {
    font-size: 10.5px;
  }
  .acc-modal__search {
    height: 38px;
    border-radius: 11px;
    margin-bottom: 12px;
  }
  .acc-modal__search input {
    font-size: 12px;
  }
  .acc-modal__list {
    max-height: 50vh;
    gap: 7px;
  }
  .acc-modal__item-card {
    padding: 9px 10px;
    gap: 10px;
    border-radius: 12px;
  }
  .acc-modal__item-logo {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
  }
  .acc-modal__item-body {
    padding-left: 24px;
  }
  .acc-modal__item-key {
    font-size: 9.5px;
  }
  .acc-modal__item-val {
    font-size: 11.5px;
  }
  .acc-modal__item-tag {
    font-size: 9px;
    padding: 2px 6px;
  }
  .acc-modal__item-check {
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
  }
  .acc-modal__item-check svg {
    width: 11px;
    height: 11px;
  }
  .acc-modal__add-wrap {
    margin-bottom: 12px;
  }
  .acc-modal__add {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .acc-modal__add-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .acc-modal__add-body strong {
    font-size: 12px;
  }
  .acc-modal__add-body small {
    font-size: 9.5px;
  }
  .acc-modal__add-form {
    padding: 12px;
    gap: 9px;
    border-radius: 0 0 12px 12px;
  }
  .acc-modal__field-label {
    font-size: 10.5px;
    gap: 4px;
  }
  .acc-modal__field-input {
    height: 38px;
    border-radius: 10px;
    padding: 0 10px;
  }
  .acc-modal__field-input input {
    font-size: 12px;
  }
  .acc-modal__field-eye {
    width: 26px;
    height: 26px;
  }
  .acc-modal__field-actions {
    gap: 6px;
  }
  .acc-modal__field-cancel, .acc-modal__field-save {
    height: 36px;
    font-size: 11.5px;
  }
  .acc-modal__field-cancel {
    padding: 0 14px;
  }
  .acc-modal__foot {
    gap: 6px;
    padding-top: 10px;
  }
  .acc-modal__btn {
    height: 40px;
    font-size: 12px;
    padding: 0 12px;
  }
}

[data-theme=dark] .acc-modal .acc-modal__content {
  background: radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.18), transparent 50%), #110e3a;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .acc-modal__close {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .acc-modal__close:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}
[data-theme=dark] .acc-modal__head {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__title {
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__subtitle {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .acc-modal__search {
  background: #0d0b32;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__search > svg {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .acc-modal__search input {
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .acc-modal__search:focus-within {
  background: #0a0828;
  border-color: #7c3aed;
}
[data-theme=dark] .acc-modal__item-card {
  background: #0d0b32;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__item:hover [data-theme=dark] .acc-modal__item-card {
  background: #15113f;
  border-color: rgba(124, 58, 237, 0.4);
}
[data-theme=dark] .acc-modal__item input:checked + [data-theme=dark] .acc-modal__item-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.05));
  border-color: #7c3aed;
}
[data-theme=dark] .acc-modal__item-logo {
  background: #0a0828;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__item-key {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .acc-modal__item-val {
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__item-check {
  background: #1a1550;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .acc-modal__add {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
  border-color: rgba(16, 185, 129, 0.4);
}
[data-theme=dark] .acc-modal__add-body strong {
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__add-body small {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .acc-modal__add-chev {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme=dark] .acc-modal__add[aria-expanded=true] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05));
  border-color: rgba(16, 185, 129, 0.6);
}
[data-theme=dark] .acc-modal__add-form {
  background: #0d0b32;
  border-color: rgba(16, 185, 129, 0.6);
  border-top-color: rgba(16, 185, 129, 0.4);
}
[data-theme=dark] .acc-modal__field-label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .acc-modal__field-label svg {
  color: #a78bfa;
}
[data-theme=dark] .acc-modal__field-input {
  background: #0a0828;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__field-input input {
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__field-input input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .acc-modal__field-input:focus-within {
  background: #08061f;
  border-color: #7c3aed;
}
[data-theme=dark] .acc-modal__field-eye {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .acc-modal__field-eye:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #a78bfa;
}
[data-theme=dark] .acc-modal__field-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .acc-modal__field-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0ecff;
}
[data-theme=dark] .acc-modal__foot {
  border-top-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .acc-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme=dark] .acc-modal__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0ecff;
}

.intl-modal {
  padding: 28px 14px;
}
.intl-modal .intl-modal__content {
  width: calc(100% - 28px);
  max-width: 480px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: radial-gradient(circle at 100% 0%, rgba(29, 78, 216, 0.08), transparent 50%), #fff;
  box-shadow: 0 30px 80px -20px rgba(15, 11, 72, 0.35), 0 0 0 1px rgba(15, 11, 72, 0.04);
}
.intl-modal__close {
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  background: rgba(15, 11, 72, 0.05);
  border: 1px solid rgba(15, 11, 72, 0.08);
  color: rgba(15, 11, 72, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intl-modal__close::after {
  content: none;
}
.intl-modal__close i {
  display: none;
}
.intl-modal__close svg {
  display: block;
}
.intl-modal__close:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}
.intl-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 44px 14px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.intl-modal__head-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(29, 78, 216, 0.5);
}
.intl-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.intl-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f0b48;
  line-height: 1.3;
}
.intl-modal__subtitle {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
  line-height: 1.5;
}
.intl-modal__notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #a16207;
  line-height: 1.6;
}
.intl-modal__notice svg {
  flex-shrink: 0;
  color: #d97706;
  margin-top: 2px;
}
.intl-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-left: 2px;
}
.intl-modal__list::-webkit-scrollbar {
  width: 4px;
}
.intl-modal__list::-webkit-scrollbar-track {
  background: transparent;
}
.intl-modal__list::-webkit-scrollbar-thumb {
  background: rgba(15, 11, 72, 0.12);
  border-radius: 4px;
}
.intl-modal__account {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 13px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.intl-modal__account:hover {
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: 0 6px 16px -8px rgba(29, 78, 216, 0.3);
}
.intl-modal__account-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
  border-bottom: 1px solid #e2e8f0;
}
.intl-modal__account-head > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.intl-modal__account-head > div strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f0b48;
  direction: ltr;
  text-align: right;
}
.intl-modal__account-head > div small {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.55);
  direction: ltr;
  text-align: right;
}
.intl-modal__account-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.intl-modal__bank-logo {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intl-modal__bank-logo--wise {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
}
.intl-modal__bank-logo--paypal {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #003087;
}
.intl-modal__bank-logo--crypto {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}
.intl-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}
.intl-modal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.intl-modal__row:not(:last-child) {
  border-bottom: 1px dashed #f1f5f9;
}
.intl-modal__row-key {
  font-size: 11px;
  font-weight: 700;
  color: rgba(15, 11, 72, 0.55);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
.intl-modal__row-val {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #0f0b48;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intl-modal__row-val--mono {
  font-family: "SF Mono", "Menlo", monospace, "Yekan Bakh";
  direction: ltr;
  letter-spacing: 0.5px;
}
.intl-modal__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: rgba(15, 11, 72, 0.55);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.intl-modal__copy:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
.intl-modal__copy.is-copied {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.intl-modal__foot {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.intl-modal__support {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(29, 78, 216, 0.08);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
}
.intl-modal__support:hover {
  background: rgba(29, 78, 216, 0.15);
  color: #1e40af;
}
.intl-modal__support svg {
  flex-shrink: 0;
}
.intl-modal__btn {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(29, 78, 216, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.intl-modal__btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -6px rgba(29, 78, 216, 0.6);
}
@media (max-width: 575px) {
  .intl-modal {
    padding: 16px 10px;
  }
  .intl-modal .intl-modal__content {
    width: calc(100% - 20px);
    padding: 16px 14px 14px;
    border-radius: 18px;
  }
  .intl-modal__close {
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
  }
  .intl-modal__head {
    padding: 0 38px 10px 0;
    gap: 10px;
  }
  .intl-modal__head-ico {
    width: 38px;
    height: 38px;
  }
  .intl-modal__head-ico svg {
    width: 18px;
    height: 18px;
  }
  .intl-modal__title {
    font-size: 14.5px;
  }
  .intl-modal__subtitle {
    font-size: 11px;
  }
  .intl-modal__notice {
    font-size: 11px;
    padding: 8px 10px;
  }
  .intl-modal__account-head {
    padding: 9px 10px;
    gap: 9px;
  }
  .intl-modal__account-head > div strong {
    font-size: 12px;
  }
  .intl-modal__account-head > div small {
    font-size: 10px;
  }
  .intl-modal__bank-logo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .intl-modal__bank-logo svg {
    width: 16px;
    height: 16px;
  }
  .intl-modal__row {
    padding: 7px 10px;
    gap: 8px;
  }
  .intl-modal__row-key {
    font-size: 10px;
    min-width: 68px;
  }
  .intl-modal__row-val {
    font-size: 11.5px;
  }
  .intl-modal__copy {
    width: 26px;
    height: 26px;
  }
  .intl-modal__support, .intl-modal__btn {
    height: 40px;
    font-size: 12px;
    padding: 0 14px;
  }
}

[data-theme=dark] .intl-modal .intl-modal__content {
  background: radial-gradient(circle at 100% 0%, rgba(29, 78, 216, 0.18), transparent 50%), #110e3a;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .intl-modal__close {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .intl-modal__close:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}
[data-theme=dark] .intl-modal__head {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .intl-modal__title {
  color: #f0ecff;
}
[data-theme=dark] .intl-modal__subtitle {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .intl-modal__notice {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fcd34d;
}
[data-theme=dark] .intl-modal__notice svg {
  color: #fbbf24;
}
[data-theme=dark] .intl-modal__account {
  background: #0d0b32;
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .intl-modal__account:hover {
  border-color: rgba(96, 165, 250, 0.4);
}
[data-theme=dark] .intl-modal__account-head {
  background: linear-gradient(135deg, #15123a, #0d0b32);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .intl-modal__account-head > div strong {
  color: #f0ecff;
}
[data-theme=dark] .intl-modal__account-head > div small {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .intl-modal__row:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .intl-modal__row-key {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme=dark] .intl-modal__row-val {
  color: #f0ecff;
}
[data-theme=dark] .intl-modal__bank-logo--wise {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}
[data-theme=dark] .intl-modal__bank-logo--paypal {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}
[data-theme=dark] .intl-modal__bank-logo--crypto {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}
[data-theme=dark] .intl-modal__copy {
  background: #0a0828;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme=dark] .intl-modal__copy:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}
[data-theme=dark] .intl-modal__foot {
  border-top-color: rgba(255, 255, 255, 0.07);
}
[data-theme=dark] .intl-modal__support {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
}
[data-theme=dark] .intl-modal__support:hover {
  background: rgba(96, 165, 250, 0.25);
  color: #bfdbfe;
}

[data-theme=dark] .modal {
  background-color: rgba(0, 0, 0, 0.6);
}
[data-theme=dark] .modal .modal__close {
  background: #1a1550;
  border-color: #1e1b4b;
  color: #7b77c5;
}
[data-theme=dark] .modal .modal__close i {
  color: #5a5790;
}
[data-theme=dark] .modal .modal__close:hover {
  background: #1a1020;
  border-color: #2a1530;
  color: #f87171;
}
[data-theme=dark] .modal .modal__close:hover i {
  color: #f87171;
}
[data-theme=dark] .modal__content {
  background: #110e3a;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .modal__content__search {
  border-color: #1e1b4b;
}
[data-theme=dark] .modal__content__search input {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__search input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .modal__content__search input:focus {
  border-color: #7c3aed;
}
[data-theme=dark] .modal__content__search i {
  color: #5a5790;
}
[data-theme=dark] .modal__content__search h4 {
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__radio__item label {
  border-color: #1e1b4b;
  background: #0d0b32;
}
[data-theme=dark] .modal__content__radio__item label:hover {
  border-color: #7c3aed;
  background: #13103f;
}
[data-theme=dark] .modal__content__radio__item label img {
  background: #1a1550;
}
[data-theme=dark] .modal__content__radio__item label ul {
  border-color: #1e1b4b;
}
[data-theme=dark] .modal__content__radio__item label ul li {
  border-color: #1a1550;
}
[data-theme=dark] .modal__content__radio__item label ul li span {
  color: #7b77c5;
}
[data-theme=dark] .modal__content__radio__item label ul li span:last-child {
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__radio__item input:checked + label {
  border-color: #7c3aed;
  background: #1a1550;
}
[data-theme=dark] .modal__content__more {
  border-color: #1e1b4b;
}
[data-theme=dark] .modal__content__more a {
  color: #a78bfa;
}
[data-theme=dark] .modal__content__more a:hover {
  color: #c4b5fd;
}
[data-theme=dark] .modal__content__add {
  border-color: #1e1b4b;
}
[data-theme=dark] .modal__content__title span, [data-theme=dark] .modal__content__title h4 {
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__text {
  color: #7b77c5;
}
[data-theme=dark] .modal__content__text-name p {
  color: #7b77c5;
}
[data-theme=dark] .modal__content__text-name p span {
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__input label {
  color: #7b77c5;
}
[data-theme=dark] .modal__content__input input, [data-theme=dark] .modal__content__input textarea {
  background: #0d0b32;
  border-color: #1e1b4b;
  color: #e0e0ff;
}
[data-theme=dark] .modal__content__input input::placeholder, [data-theme=dark] .modal__content__input textarea::placeholder {
  color: #5a5790;
}
[data-theme=dark] .modal__content__input label.file-label {
  background: #0d0b32;
  border-color: #1e1b4b;
}
[data-theme=dark] .modal__content__input label.file-label span:nth-child(2) {
  color: #e0e0ff;
}

/* responsive */
@media (max-width: 1600px) {
  .discount__nav {
    top: 30%;
  }
}
@media (max-width: 1200px) {
  .product__nav--prev {
    right: -60px;
  }
  .product__nav--next {
    left: -60px;
  }
  .discount {
    margin-top: 73px;
    padding-top: 30px;
  }
  .discount__nav {
    top: 0;
  }
  .discount__nav--next {
    left: 0;
  }
  .discount__nav--prev {
    right: 0;
  }
  .discount__header {
    margin-bottom: 50px;
  }
  .pre-order {
    margin-top: 114px;
  }
  .pre-order__icons .text {
    font-size: 14px;
  }
}
@media (max-width: 992px) {
  .site-header:before {
    right: 0;
    left: 0;
    background-image: linear-gradient(to right, #fff 0%, #fff 10%, #6a4fa0 25%, #16a2bd 35%, #89c736 50%, #fcc43f 65%, #d02054 70%, #fff 90%, #fff 100%);
  }
  .site-header:after {
    right: 0;
    left: 0;
    background-image: linear-gradient(to right, #fff 0%, #fff 10%, #6a4fa0 25%, #16a2bd 35%, #89c736 50%, #fcc43f 65%, #d02054 70%, #fff 90%, #fff 100%);
  }
  .top-product__big-horizontal {
    margin-bottom: 25px;
  }
  .top-product__big-horizontal figure img {
    width: 100%;
  }
  .top-product__center .top-product__center-vertical {
    margin-bottom: 25px;
  }
  .top-product__center .top-product__center-vertical figure img {
    width: 100%;
  }
  .top-product__center .top-product__center-small figure img {
    width: 100%;
  }
  .category__row {
    display: flex;
    align-items: center;
  }
  .category__row__larg {
    flex: 0 0 calc((100% - 220px) / 2);
    max-width: calc((100% - 220px) / 2);
  }
  .category__row__larg__item {
    margin-bottom: 20px;
  }
  .category__row__small {
    flex: 0 0 calc(100% - 220px);
    max-width: 220px;
    margin-bottom: 10px;
  }
  .product__content-swiper {
    overflow: visible;
  }
  .product__content-swiper .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
    transition: 0.3s;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
  }
  .discount__header {
    margin-top: 0;
  }
  .discount__header > i {
    font-size: 40px;
  }
  .discount__header .discount__header-info .discount__header-info-title {
    font-size: 15px;
  }
  .discount__header .discount__header-info .discount__header-info-title-big {
    font-size: 22px;
  }
  .pre-order {
    margin-top: 65px;
  }
  .pre-order__sticky img {
    width: 210px;
  }
  .pre-order__btn {
    bottom: 19px;
    left: 22px;
    width: 215px;
  }
  .pre-order__icons .icon {
    font-size: 17px;
    margin-left: 6px;
  }
  .pre-order__icons .icon i {
    font-size: 5px;
    width: 10px;
    height: 10px;
  }
  .pre-order__icons .text {
    font-size: 13px;
  }
  .pre-order__info {
    bottom: 19px;
  }
  .pre-order__info .pre-order__info-title {
    font-size: 30px;
  }
  .journal__content:before {
    width: 160px;
  }
}
@media (max-width: 768px) {
  .category__row {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .category__row__larg {
    flex-direction: row;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 15px;
  }
  .category__row__larg__item {
    margin-bottom: 0;
    width: 50vw;
    height: 34vw;
    border-radius: 20px;
  }
  .category__row__larg__item img {
    border-radius: 20px;
  }
  .category__row__larg__item:first-child {
    padding-left: 10px;
  }
  .category__row__larg__item:last-child {
    padding-right: 10px;
  }
  .category__row__small {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 15px;
    margin-top: 0;
    width: 100%;
  }
  .category__row__small__item {
    height: 35vw;
    border-radius: 20px;
  }
  .category__row__small__item img {
    border-radius: 20px;
  }
  .product__content-swiper {
    overflow: visible;
  }
  .product__content-swiper .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
    transition: 0.3s;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
  }
  .product__header .product__header-title {
    font-size: 20px;
    padding-left: 8px;
  }
  .pre-order__info {
    right: 20px;
  }
  .pre-order__btn {
    left: 20px;
    width: 150px;
    font-size: 14px;
    padding: 0 15px;
    height: 40px;
  }
  .pre-order__wrapper {
    border-radius: 10px;
    overflow: hidden;
  }
  .pre-order__main-img img {
    height: 170px;
    object-fit: cover;
  }
  .pre-order__icons {
    right: 10px;
    top: 10px;
  }
  .pre-order__icons .icon,
.pre-order__icons .text {
    color: #fff;
  }
}
@media (min-width: 576px) {
  .top-product__responsive {
    display: none;
  }
}
@media (max-width: 576px) {
  .wrapper {
    padding-top: 0;
    overflow: hidden;
  }
  .wrapper.single--product {
    overflow: unset;
  }
  .container {
    padding: 0 15px;
  }
  .cart-header .site-header:before {
    background-image: linear-gradient(to right, #f7f7f7 0%, #f7f7f7 10%, #6a4fa0 20%, #16a2bd 40%, #89c736 50%, #fcc43f 60%, #d02054 80%, #f8f8f8 90%, #f8f8f8 0%);
    border-radius: 30%;
  }
  .top-product {
    margin-bottom: 20px;
  }
  .top-product__pc {
    display: none;
  }
  .feautures {
    margin-bottom: 15px;
  }
  .feautures__logo {
    margin-left: 15px;
  }
  .feautures__logo img {
    max-width: initial;
    width: 130px;
  }
  .feautures__items .feautures__items-swiper {
    padding-top: 5px;
    margin-top: -5px;
    overflow: hidden;
  }
  .feautures__items .feautures__items-item {
    padding: 0 15px 0 15px;
    font-size: 13px;
    text-align: center;
  }
  .feautures__items .feautures__items-item i {
    font-size: 20px;
    margin-left: 15px;
  }
  .category {
    margin-bottom: 0px;
  }
  .category__row__larg__item {
    height: 46vw;
  }
  .category__row__larg__item:first-child {
    padding-left: 5px;
  }
  .category__row__larg__item:last-child {
    padding-right: 5px;
  }
  .category__row__small__item {
    height: 46vw;
  }
  .product {
    margin-bottom: 0;
    margin-top: 0px;
  }
  .product__header {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .product__header:before {
    top: 17px;
  }
  .product__header .product__header-sort {
    order: 1;
    margin-top: 15px;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .product__header .product__header-title {
    padding-left: 15px;
    font-size: 14px;
  }
  .product__header .product__header-more {
    font-size: 11px;
    padding-right: 15px;
  }
  .product__header .product__header-more i {
    display: none;
  }
  .product__content-swiper {
    overflow: visible;
  }
  .product__content-swiper .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
    transition: 0.3s;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide {
    filter: blur(0);
    opacity: 1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
  }
  .product__content-swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
    filter: blur(6px);
    opacity: 0.1;
  }
  .product__item .product__item-img {
    margin-bottom: 15px;
  }
  .product__item .product__item-img .shadow {
    display: none;
  }
  .product__item .product__item-info .product__item-info-title {
    font-size: 12px;
    text-align: center;
    max-width: unset;
    flex: unset;
    margin-bottom: 5px;
  }
  .product__item .product__item-info .product__item-info-title-en {
    text-align: center;
    max-width: unset;
    flex: unset;
  }
  .product__item .product__item-meta h2 {
    font-size: 15px;
  }
  .product__item .product__item-meta .product__item-meta-right {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }
  .product__item .product__item-meta .product__item-meta-right .item {
    margin-bottom: 0;
  }
  .product__item .product__item-meta .product__item-meta-right .item__link {
    width: auto;
  }
  .product__item .product__item-meta .product__item-meta-right .item__title {
    display: none;
  }
  .product__item .product__item-meta .product__item-meta-left {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    top: unset;
  }
  .product__item .product__item-meta .product__item-meta-left .count-rate {
    margin-bottom: 0;
  }
  .product__item .product__item-meta .product__item-meta-left .count-rate i {
    font-size: 16px;
  }
  .product__item .product__item-footer .product__item-footer-link .product__item-footer-title {
    font-size: 13px;
  }
  .product__item .product__item-footer .product__item-footer-link .product__item-footer-title .buy {
    font-size: 13px;
  }
  .product__content-animate .item:nth-of-type(2) {
    display: none;
  }
  .journal {
    margin-bottom: 15px;
  }
  .journal__content-swiper {
    margin-right: -15px;
  }
  .journal__content-swiper:before {
    display: none;
  }
  .journal__header {
    margin-bottom: 15px;
  }
  .journal__header .journal__header-title {
    font-size: 18px;
    padding-left: 15px;
  }
  .journal__header .journal__header-more {
    font-size: 12px;
    padding-right: 15px;
  }
  .journal__header .journal__header-more i {
    margin-right: 15px;
  }
  .journal__item {
    padding: 10px;
  }
  .journal__item .journal__item-img a img {
    width: 100%;
  }
  .journal__item .journal__item-info {
    margin-bottom: 3px;
    flex-direction: column;
  }
  .journal__item .journal__item-info .journal__item-info-date {
    flex-direction: row;
    margin-left: 0;
    margin-bottom: 10px;
  }
  .journal__item .journal__item-info .journal__item-info-date .day {
    margin: 0 0 0 5px;
    font-size: 13px;
  }
  .journal__item .journal__item-info .journal__item-info-date .month {
    margin: 0 0 0 5px;
  }
  .journal__item .journal__item-info .journal__item-info-title {
    text-align: center;
  }
  .journal__item .journal__item-desc {
    margin-bottom: 10px;
  }
  .discount {
    margin-top: 0;
    margin-bottom: 15px;
  }
  .discount__item .discount__item-img {
    max-width: 160.82px;
  }
  .discount__item .discount__item-img img {
    max-width: 160.82px;
  }
  .pre-order {
    margin-bottom: 15px;
    margin-top: 25px;
  }
  .pre-order__sticky {
    display: none;
  }
  .banner {
    margin-bottom: 0px;
  }
}
@media (max-width: 500px) {
  .discount {
    margin-top: 66px;
  }
  .discount__header {
    margin-bottom: 49px;
  }
  .discount__header > i {
    font-size: 35px;
    margin-left: 10px;
  }
  .discount__header .discount__header-more {
    flex-direction: row;
    justify-content: center;
    margin-top: 15px;
  }
  .discount__header .discount__header-more i {
    margin-bottom: 0;
    margin-left: 10px;
  }
  .discount__header .discount__header-info .discount__header-info-title-big {
    font-size: 15px;
    flex-wrap: wrap;
  }
  .discount__header .discount__header-info .discount__header-info-title {
    font-size: 13px;
  }
  .journal__content:before {
    content: unset;
  }
}
@media (max-width: 400px) {
  .feautures__logo img {
    width: 100px;
  }
  .discount {
    margin-top: 0px;
  }
}
@media (max-width: 370px) {
  .pre-order__btn {
    right: 20px;
    width: unset;
  }
  .pre-order__info {
    bottom: 65px;
    left: 20px;
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .site-header__bottom {
    flex-wrap: wrap;
  }
  .site-header__bottom .site-header__bottom-cat {
    position: static;
    margin-left: 15px;
    font-size: 12px;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu {
    top: 105px;
    right: 0%;
    width: 100%;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs ul {
    overflow: auto;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs ul li .item__list__content ul {
    grid-template-columns: 170px 170px 170px;
  }
  .site-header__bottom .site-header__bottom-search {
    margin-top: 10px;
    order: 5;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .site-header__bottom .site-header__bottom-search input {
    width: 100%;
  }
  .site-header__bottom .site-header__bottom-search.active input {
    width: 100%;
  }
}
@media (max-width: 992px) {
  .site-header__bottom {
    flex-wrap: wrap;
  }
  .site-header__bottom .site-header__bottom-cat {
    position: static;
    margin-left: 15px;
    font-size: 12px;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu {
    top: 105px;
    right: 0%;
    width: 100%;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs ul {
    overflow: auto;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs ul li .item__list__content ul {
    grid-template-columns: 170px 170px 170px;
  }
  .site-header__bottom .site-header__bottom-search {
    margin-top: 10px;
    order: 5;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .site-header__bottom .site-header__bottom-search input {
    width: 100%;
  }
  .site-header__bottom .site-header__bottom-search.active input {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .site-header__top {
    display: none;
  }
  .site-header__center {
    padding-bottom: 10px;
    margin-bottom: 10px;
    flex-direction: column;
  }
  .site-header__center .site-header__center-right {
    order: 1;
  }
  .site-header__center .site-header__center-nav {
    margin-right: 0;
    order: 0;
    margin-bottom: 20px;
  }
  .site-header__bottom {
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-header__bottom .site-header__bottom-logo {
    margin-right: 0;
    margin-top: 10px;
  }
  .site-header__bottom .site-header__bottom-logo {
    flex: 0 0 100%;
    max-width: 100%;
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .site-header__bottom .site-header__bottom-logo img {
    max-height: 50px;
  }
  .site-header__bottom .site-header__bottom-cat {
    position: static;
    margin-left: 15px;
    font-size: 12px;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu {
    max-width: 576px;
    min-height: 400px;
    overflow: auto;
    min-width: unset;
    top: 131px;
    right: 0%;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs ul {
    overflow: auto;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs .item__list__img {
    display: none;
  }
  .site-header__bottom .site-header__bottom-cat.active .megamenu__tabs .item__list__button {
    display: none;
  }
}
@media (max-width: 576px) {
  .site-header {
    height: unset;
    margin-bottom: 60px;
  }
  .site-header:before {
    bottom: -44px;
    background-image: linear-gradient(to right, #8E2DE2 0%, #8E2DE2 8.33%, #E0224F 17.19%, #E0224F 25.52%, #EBD513 34.9%, #EED816 46.88%, #1BEC23 59.9%, #1BEC23 72.4%, #1B52BB 84.9%, #1B52BB 96.36%);
    border-radius: 0;
    content: "";
  }
  .site-header:after {
    display: none;
  }
  .site-header__rgb-color {
    display: none;
  }
  .site-header .site-header-responsive {
    display: flex;
    align-items: center;
    z-index: 8888;
  }
  .site-header .site-header-responsive__menu {
    box-shadow: none;
  }
  .site-header .site-header-responsive img {
    max-height: 45px;
  }
  .site-header__top {
    display: none;
  }
  .site-header__center {
    display: none;
  }
  .site-header__bottom {
    padding-top: 15px;
    align-items: center;
  }
  .site-header__bottom .site-header__bottom-search {
    flex: 0 0 calc(100% - 78px);
    max-width: calc(100% - 78px);
    z-index: 120;
    margin-top: unset;
  }
  .site-header__bottom .site-header__bottom-search .ajax-search {
    padding: 15px;
    left: -15px;
    right: -93px;
    border-radius: 0;
    top: calc(100% + 5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  .site-header__bottom .site-header__bottom-cart {
    display: none;
  }
  .site-header__bottom .site-header__bottom-cat {
    display: none;
  }
  .site-header__bottom .site-header__bottom-logo {
    display: none;
  }
  .site-header__bottom__theme-switch > span {
    display: none;
  }
  .panel-wrapper .site-header {
    padding-top: 0;
    margin-bottom: 0;
  }
  .panel-wrapper .site-header__bottom .site-header__bottom-search {
    margin-right: 56px;
    flex: 0 0 calc(100% - 148px);
    max-width: calc(100% - 148px);
  }
  .panel-wrapper .site-header__bottom__theme-switch {
    margin-right: 65px;
    margin-left: unset;
  }
}
@media (max-width: 1200px) {
  .single-top .pr38 {
    padding-right: 0;
  }
  .single-top .pl39 {
    padding-left: 0;
  }
  .single-top__info {
    margin-bottom: 30px;
  }
  .single-top .info .single-top__info {
    width: 230px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature {
    margin-left: 15px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature > i {
    margin-left: 15px;
  }
  .single-top__footer .single-top__footer-center {
    padding: 0 15px 0 15px;
    position: static;
    transform: translate(0, 0);
  }
  .single-top__footer .single-top__footer-center .single-top__footer-add-cart {
    margin-left: 10px;
    padding-left: 10px;
  }
  .single-top__footer .single-top__footer-center .single-top__footer-cart-basket .count {
    margin-right: 10px;
    margin-left: 10px;
  }
  .single-top__footer .single-top__footer-left .single-top__footer-notice i {
    margin-left: 10px;
  }
  .app-info__related .app-info__related-products .app-info__info-buying-title {
    font-size: 16px;
  }
  .app-info__related .app-info__related-products .item {
    padding-top: 19px;
  }
  .app-info__related .app-info__related-products .item__img {
    margin-left: 10px;
  }
  .app-info__related .app-info__related-products .item__info-buying-title {
    font-size: 15px;
  }
  .app-info__related .app-info__related-products .item__info-buying-title i {
    font-size: 18px;
    margin-left: 6px;
  }
  .app-info__related .app-info__related-products .item__info-title {
    margin-bottom: 15px;
  }
}
@media (max-width: 992px) {
  .mobile-hide {
    display: none;
  }
  .single-top .pl39 {
    padding-right: 30px;
  }
  .single-top__header {
    flex-wrap: wrap;
  }
  .single-top__header .single-top__header-center {
    position: static;
    transform: translate(0, 0);
    order: 0;
    width: 100%;
    margin-bottom: 20px;
  }
  .single-top__header .single-top__header-right {
    order: 1;
  }
  .single-top__header .single-top__header-left {
    order: 2;
  }
  .single-top__footer {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .single-top__footer .single-top__footer-center {
    padding: 0 25px 0 25px;
    flex: unset;
    max-width: unset;
  }
  .single-top__footer .single-top__footer-center .single-top__footer-add-cart {
    margin-left: 20px;
    padding-left: 20px;
  }
  .single-top__footer .single-top__footer-left {
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    flex: unset;
    max-width: unset;
  }
  .single-top__footer .single-top__footer-right {
    flex: unset;
    max-width: unset;
    margin-bottom: 20px;
  }
  .single-top__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -164px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
    height: 88px;
    background-color: #fff;
    z-index: 90;
    border-radius: 50%;
  }
  .single-top__item__product__title {
    flex-direction: column;
    align-items: flex-start;
  }
  .single-top__item__product__title h1 {
    margin-bottom: 13px;
  }
  .single-top__item__product__title__rezayat {
    margin-bottom: 9px;
  }
  .single-top__item__product__sub-title {
    flex-direction: column;
    margin-top: 0;
    align-items: flex-start;
  }
  .single-top__item__product__sub-title ul {
    order: 2;
    text-align: right;
    align-items: flex-start;
    flex-direction: column;
  }
  .single-top__item__product__sub-title ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .single-top__item__product__sub-title__rate ul {
    flex-direction: row;
  }
  .single-top__item__product__sub-title__image {
    display: block;
    order: 3;
  }
  .single-top__item__product__sub-title__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .single-gallery {
    margin-bottom: 40px;
  }
  .content__content h1 {
    font-size: 30px;
  }
  .content__content h2 {
    font-size: 28px;
  }
  .content__content h3 {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .single-top .pl39 {
    padding-right: 0;
  }
  .single-top__price {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .single-top__header {
    margin-bottom: 30px;
  }
  .single-top__header .single-top__header-center {
    margin-bottom: 20px;
  }
  .single-top__meta {
    justify-content: center;
    margin-bottom: 35px;
  }
  .single-top__info {
    margin-bottom: 15px;
  }
  .single-top__footer {
    justify-content: center;
  }
  .single-top__footer .single-top__footer-right {
    margin-bottom: 35px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature {
    margin-left: 30px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature > i {
    margin-left: 30px;
  }
  .single-top__item__product {
    padding: 20px 24px 20px;
    margin-bottom: 0px;
  }
  .single-top__item__product__alert {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .single-top__item__product__detail__account {
    margin-bottom: 0px;
  }
  .single-top__item__product__detail__price {
    display: none;
  }
  .single-gallery {
    margin-bottom: 20px;
  }
  .content-main .p30 {
    margin: 0 0;
  }
  .content-main .p30 > [class*=col-] {
    padding: 0 0;
  }
  .content__title {
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .aside-info-single {
    margin: 0 auto;
    order: 2;
  }
  .comments {
    display: none;
  }
  .comments.mobile {
    display: block;
  }
  .app-info {
    margin-top: 24px;
    margin-bottom: 36px;
    display: none;
  }
  .app-info__info {
    margin: 0 45px 31px;
  }
  .app-info__info .app-info__info-img {
    margin-bottom: 21px;
  }
  .app-info__info .app-info__info-img figure img {
    width: 100%;
  }
  .app-info__info .app-info__info-titles {
    margin-left: 20px;
    margin-right: 20px;
  }
  .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name {
    font-size: 18px;
  }
  .app-info__info .app-info__info-rates {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .app-info__info .app-info__info-rates .app-info__info-rate {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .app-info__info .app-info__info-rates .app-info__info-rate .logo {
    margin-bottom: 5px;
  }
  .app-info__rates {
    padding-top: 29px;
    padding-bottom: 24px;
    margin: 0 25px 15px;
  }
  .app-info__rates .app-info__rates-rate {
    margin-bottom: 5px;
  }
  .app-info__rates .app-info__rates-rate .rate {
    margin-bottom: 11px;
  }
  .app-info__rates .app-info__rates-rate .vote {
    margin-bottom: 23px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-header {
    margin-bottom: 15px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main {
    justify-content: center;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item {
    flex: 0 0 23px;
    max-width: 23px;
    margin-left: 6px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item:last-child {
    margin-left: 0;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item i {
    font-size: 23px;
  }
  .app-info__related {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .app-info__related .app-info__related-header {
    padding-bottom: 10px;
  }
  .app-info__related .app-info__related-products {
    margin-bottom: 15px;
  }
  .app-info__related .app-info__related-products .item {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .select-sec__item ul {
    padding: 0 24px;
  }
  .select-sec__item ul li a span {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
  }
  .price-mobile {
    display: block;
  }
}
@media (max-width: 576px) {
  .single-top {
    margin-bottom: 15px;
  }
  .single-top:before {
    top: -164px;
  }
  .single-top__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -109px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 54px;
    height: 49px;
    background-color: #fff;
    z-index: 90;
    border-radius: 50%;
  }
  .single-top__logo img {
    width: 35px;
    height: auto;
  }
  .single-top__header {
    justify-content: center;
  }
  .single-top__header .single-top__header-center {
    margin-bottom: 11px;
  }
  .single-top__header .single-top__header-center h2 {
    font-size: 25px;
  }
  .single-top__header .single-top__header-right .single-top__header-heart {
    height: 45px;
    width: 62px;
    padding: 0 10px;
    justify-content: center;
  }
  .single-top__header .single-top__header-right .single-top__header-heart i {
    margin-left: 0;
  }
  .single-top__header .single-top__header-right .single-top__header-heart .text {
    display: none;
  }
  .single-top__header .single-top__header-right .single-top__header-share {
    height: 45px;
  }
  .single-top__header .single-top__header-left {
    margin-right: 9px;
  }
  .single-top__header .single-top__header-left .single-top__header-agree {
    padding: 0 10px;
    height: 45px;
  }
  .single-top__header .single-top__header-left .single-top__header-agree .vote {
    margin-right: 0;
    margin-left: 8px;
  }
  .single-top__header .single-top__header-left .single-top__header-agree .text {
    display: none;
  }
  .single-top__info {
    margin-bottom: 0;
  }
  .single-top__meta ul li {
    margin-bottom: 12px;
  }
  .single-top__meta ul li .single-top__meta-title {
    font-size: 13px;
    min-width: 126px;
    margin-left: 100px;
  }
  .single-top__meta ul li .single-top__meta-value {
    font-size: 13px;
  }
  .single-top__price {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .single-top__price:before {
    right: -35px;
    left: -35px;
    background-image: linear-gradient(to right, #fff 7%, #c4c2c3, #c4c2c3 47%, #fff);
    top: 20px;
  }
  .single-top__price .single-top__price-item .discount-numb {
    font-size: 14px;
    padding: 0 8px 0 8px;
    height: 19px;
  }
  .single-top__price .single-top__price-item .discount-numb i {
    font-size: 9px;
  }
  .single-top__price .single-top__price-item .price {
    font-size: 25px;
  }
  .single-top__price .single-top__price-item .price__unit {
    font-size: 14px;
  }
  .single-top__footer {
    margin-bottom: 0;
  }
  .single-top__footer .single-top__footer-right {
    margin-bottom: 15px;
    justify-content: space-between;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .single-top__footer .single-top__footer-left {
    margin-top: 10px;
  }
  .single-top__footer .single-top__footer-left .single-top__footer-notice i {
    margin-left: 15px;
  }
  .single-top__footer .single-top__footer-left .single-top__footer-notice .single-top__footer-notice-desc .title {
    margin-bottom: 3px;
  }
  .single-top__item__product__type__item__price {
    background-color: transparent;
  }
  .single-top__item__product__sub-title {
    margin-bottom: 0;
  }
  .single-top__item__product__sub-title__image {
    margin-bottom: 34px;
  }
  .single-top__item__product__alert__content p {
    font-size: 14px;
  }
  .single-top__item__product__detail__price {
    flex-direction: column;
  }
  .single-top__item__product__detail__price__title {
    margin-bottom: 25px;
  }
  .single-top__item__product__detail__price__title span {
    margin-left: 0;
  }
  .single-top__item__product__detail__price__content {
    flex-wrap: wrap;
    justify-content: center;
  }
  .single-top__item__product__detail__price__content del {
    margin-left: 0;
  }
  .single-top__item__product__detail__price__content p {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-top: 17px;
  }
  .single-top__item__product__detail__cart {
    flex-direction: column;
    justify-content: center;
  }
  .single-top__item__product__detail__cart a {
    order: 2;
    margin-left: 0;
  }
  .single-top__item__product__detail__cart__count {
    flex-direction: column;
    justify-content: center;
  }
  .single-top__item__product__detail__cart__count label {
    margin-left: 0;
    margin-bottom: 14px;
  }
  .single-top__item__product__detail__cart__count form {
    margin-bottom: 43px;
  }
  .single-gallery {
    padding: 15px 0;
    margin-bottom: 15px;
  }
  .single-gallery__item:after {
    transform: translate(-50%, -50%) scale(1) rotateX(0);
    visibility: visible;
    opacity: 1;
  }
  .app-info {
    margin-bottom: 36px;
  }
  .app-info__info {
    margin: 0 45px 31px;
  }
  .app-info__info .app-info__info-img {
    margin-bottom: 21px;
  }
  .app-info__info .app-info__info-img figure img {
    width: 100%;
  }
  .app-info__info .app-info__info-titles {
    margin-left: 20px;
    margin-right: 20px;
  }
  .app-info__info .app-info__info-titles .app-info__info-titles-item .app-info__info-titles-name {
    font-size: 18px;
  }
  .app-info__info .app-info__info-rates {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .app-info__info .app-info__info-rates .app-info__info-rate {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .app-info__info .app-info__info-rates .app-info__info-rate .logo {
    margin-bottom: 5px;
  }
  .app-info__rates {
    padding-top: 29px;
    padding-bottom: 24px;
    margin: 0 25px 15px;
  }
  .app-info__rates .app-info__rates-rate {
    margin-bottom: 5px;
  }
  .app-info__rates .app-info__rates-rate .rate {
    margin-bottom: 11px;
  }
  .app-info__rates .app-info__rates-rate .vote {
    margin-bottom: 23px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-header {
    margin-bottom: 15px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main {
    justify-content: center;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item {
    flex: 0 0 23px;
    max-width: 23px;
    margin-left: 6px;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item:last-child {
    margin-left: 0;
  }
  .app-info__rates .app-info__rates-rating .app-info__rates-main .item i {
    font-size: 23px;
  }
  .app-info__related {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .app-info__related .app-info__related-header {
    padding-bottom: 10px;
  }
  .app-info__related .app-info__related-products {
    margin-bottom: 15px;
  }
  .app-info__related .app-info__related-products .item {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .content {
    margin-bottom: 10px;
  }
  .content__title {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .content__title .content__title-name {
    margin-bottom: 6px;
  }
  .content__content p {
    color: #000000;
    font-size: 14px;
    line-height: 35px;
    text-align: justify;
    font-weight: 600;
  }
  .content__content figure {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .content__content figure figcaption {
    margin-top: 5px;
  }
  .content__content .separator-circle {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .content__content h1 {
    margin-top: 31px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content h2 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content h2:after {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .content__content h3 {
    margin-top: 31px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content h4 {
    margin-top: 31px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content .table_of_content__title__icon h4 {
    margin-top: 0 !important;
  }
  .content__content h5 {
    margin-top: 31px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content h6 {
    margin-top: 31px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  .content__content ul {
    margin-bottom: 15px;
  }
  .content__content ul li {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: right;
  }
  .content__content ol {
    margin-bottom: 15px;
  }
  .content__content ol li {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: right;
  }
  .content__content .big-img {
    width: 100%;
  }
  .content__content .big-img figcaption {
    margin-right: 11vh;
  }
  .content__content blockquote {
    line-height: 35px;
    margin-bottom: 15px;
  }
  .content__content blockquote cite {
    margin-top: 3px;
  }
  .content__content blockquote:after {
    bottom: 40px;
  }
  .content__content span {
    text-align: right;
    width: auto;
    height: auto;
    justify-content: center;
    display: contents;
  }
  .product--related {
    margin-bottom: 0;
  }
  .comments {
    margin-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    padding-top: 0px;
  }
  .comments__header {
    flex-direction: column;
    margin-bottom: 5px;
    line-height: 60px;
    text-align: right;
    align-items: flex-start;
  }
  .comments__header-title {
    margin-bottom: 21px;
  }
  .comments__header-count {
    margin-bottom: 23px;
  }
  .comments__content ul {
    padding-right: 15px;
    padding-left: 15px;
  }
  .comments__content .comments__content-item--reply {
    padding-right: 15px;
  }
  .comments__content .comments__content-item .comments__content-meta {
    position: relative;
  }
  .comments__content .comments__content-item .comments__content-meta .comments__content-avatar {
    position: absolute;
    bottom: -40px;
  }
  .comments__content .comments__content-item .comments__content-meta .comments__content-date {
    margin-bottom: 15px;
    padding-right: 70px;
    flex-direction: row;
  }
  .comments__content .comments__content-item .comments__content-meta .comments__content-date .day {
    margin-bottom: 0;
    margin-left: 6px;
  }
  .comments__content .comments__content-item .comments__content-meta .comments__content-date .month {
    margin-bottom: 0;
    margin-left: 6px;
  }
  .comments__content .comments__content-item .comments__content-body {
    padding: 14px 16px;
  }
  .comments__content .comments__content-item .comments__content-body::after {
    right: -15px;
  }
  .comments__content .comments__content-item .comments__content-body:before {
    right: -15px;
    width: 15px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-name {
    margin-bottom: 10px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-name .name {
    font-size: 18px;
    font-weight: 700;
    line-height: 35px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-name-text small {
    font-size: 12px;
    font-weight: 500;
    line-height: 35px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-text {
    margin-top: 21px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-text p {
    font-size: 12px;
    font-weight: 500;
    line-height: 35px;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-like {
    display: none;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-footer {
    flex-wrap: wrap;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-footer .comments__content-like {
    margin-bottom: 10px;
    justify-content: center;
  }
  .comments__content .comments__content-item .comments__content-body .comments__content-footer .comments__content-reply {
    justify-content: center;
  }
  .comments__content .comments__content-more {
    margin-bottom: 20px;
    padding: 0 10px 0 10px;
    margin-top: -40px;
  }
  .comments__content .comments__content-more .comments__content-more-ajax i {
    margin-left: 10px;
  }
  .comments__content .comments__content-form {
    position: relative;
  }
  .comments__content .comments__content-form .comments__content-avatar {
    position: absolute;
    right: 0;
    top: -43px;
  }
  .related-single__header {
    margin-bottom: 15px;
  }
  .related-single__header h2 {
    font-size: 18px;
    padding-left: 15px;
  }
  .related-single__header h2 img {
    margin-left: 5px;
  }
  .related-single__header .related-single__header-more {
    padding-right: 15px;
  }
  .related-single__header .related-single__header-more i {
    margin-right: 10px;
  }
}
@media (max-width: 420px) {
  .single-top__footer .single-top__footer-right .single-top__footer-feature {
    margin-left: 15px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature i {
    font-size: 28px;
    margin-left: 10px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .title {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .single-top__footer .single-top__footer-right .single-top__footer-feature .single-top__footer-feature-info .value {
    font-size: 14px;
  }
  .single-top__item__product__sub--title {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .single-top__item__product__sub--title p {
    margin-bottom: 18px;
  }
}
@media (max-width: 360px) {
  .single-top__meta ul li:before {
    top: 50%;
    transform: translate(-80%, -50%);
  }
}
@media (max-width: 768px) {
  .single-blog .pr35 {
    padding-right: 0;
  }
  .single-blog .pl35 {
    padding-left: 0;
  }
  .aside-blog:after {
    content: "";
    position: absolute;
    right: -35px;
    width: 30px;
    top: 80px;
    bottom: 110px;
    box-shadow: 13px 0 21px -14px rgba(0, 0, 0, 0.3);
  }
  .aside-blog__img figure {
    display: flex;
    justify-content: center;
  }
  .aside-blog__img figure .shadow {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  .aside-blog {
    margin-bottom: 15px;
  }
  .aside-blog__img {
    margin-bottom: 15px;
  }
  .aside-blog__title {
    margin-bottom: 15px;
  }
  .aside-blog__info {
    margin-bottom: 15px;
  }
  .aside-blog__info .aside-blog__info-grid .aside-blog__info-item {
    margin-bottom: 15px;
  }
  .aside-blog__rates {
    padding: 0 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .aside-blog__rates .aside-blog__rates-rate .aside-blog__rates-rating .item {
    margin-left: 10px;
  }
  .aside-blog__related .aside-blog__related-img {
    margin-bottom: 15px;
  }
  .aside-blog__related .aside-blog__related-title {
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  .aside-blog__related .aside-blog__related-info {
    margin-bottom: 10px;
  }
  .aside-blog__related .aside-blog__related-info .item {
    margin-bottom: 8px;
  }
}
@media (max-width: 1200px) {
  .notification {
    padding: 0 10px 0 10px;
  }
  .notification__title {
    padding-left: 15px;
    margin-left: 15px;
  }
  .new-ticket__message textarea {
    width: 358px;
  }
  .info-panel__item {
    margin-right: -110px;
  }
  .panel-wrapper .p30 {
    margin: 0 -5px;
  }
  .panel-wrapper .p30 > [class*=col] {
    padding: 0 5px;
  }
  .my-buy__top-item {
    grid-template-columns: auto auto auto;
    column-gap: 15px;
  }
  .panel-license__image img {
    width: 58px;
    height: 58px;
    object-fit: cover;
  }
  .panel-license__content__label_input {
    width: 225px;
    padding: 0px;
  }
}
@media (max-width: 992px) {
  .panel-menu,
.back-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 15px;
    top: 54px;
    box-shadow: 6px 11px 40px -9px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 999;
    background-color: #fff;
  }
  .panel-menu i,
.back-panel i {
    font-size: 16px;
    color: #f01919;
  }
  [data-theme=dark] .panel-menu,
[data-theme=dark] .back-panel {
    background-color: #03021a;
  }
  .aside-ticket {
    margin-bottom: 16px;
  }
  .aside-ticket__back-ticket {
    display: none;
  }
  .aside-ticket__recent {
    position: relative;
  }
  .aside-ticket__recent .close-recent-ticket {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: 566px;
    left: 10px;
    cursor: pointer;
    z-index: 900;
    transition: 0.1s;
  }
  .aside-ticket__recent .close-recent-ticket.active {
    opacity: 1;
    visibility: visible;
  }
  .aside-ticket__recent > .title {
    display: none;
  }
  .aside-ticket__recent .aside-ticket__recent-list {
    position: fixed;
    right: 0;
    left: 0;
    bottom: -100%;
    opacity: 0;
    height: 566px;
    visibility: hidden;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
    background-color: #ffffff;
    transition: 0.5s ease;
    z-index: 150;
    overflow: scroll;
  }
  .aside-ticket__recent .aside-ticket__recent-list.active {
    bottom: 0;
    opacity: 1;
    visibility: visible;
  }
  .aside-ticket__info {
    margin-bottom: 0;
    z-index: 150;
  }
  .aside-ticket__info .aside-ticket__info-current {
    box-shadow: none;
    padding: 0px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 61.99px;
    border-bottom: none;
    box-shadow: 0px 0px 10.66px 2.34px rgba(0, 0, 0, 0.16);
    border-radius: 16.5px;
    padding: 0 18px 0px 23px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 .aside-ticket__info-title {
    width: 100%;
    margin-bottom: 0px;
    justify-content: space-between;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 .aside-ticket__info-title .title {
    font-size: 20px;
    color: #5c5c5c;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 .aside-ticket__info-title .code {
    font-size: 23.33px;
    width: 100px;
    height: 40px;
    justify-content: center;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 {
    border-bottom: none;
    margin-bottom: 0;
    padding: 27px 20px 20px 20px;
    box-shadow: 0px 0px 10.66px 2.34px rgba(0, 0, 0, 0.16);
    border-radius: 16.5px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .item {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .item__name {
    font-size: 20px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .item__value {
    font-size: 20px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .aside-ticket__info-status {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .aside-ticket__info-status .title {
    font-size: 20px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .aside-ticket__info-status .value {
    font-size: 20px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-3 {
    padding: 0 15px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-3 .item > a {
    margin-bottom: 0;
  }
  .recent-ticket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    position: fixed;
    z-index: 150;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 20px;
    box-shadow: 0 0 45px -14px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  .back-panel {
    z-index: 160;
  }
  .mask-shadow {
    display: block;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    z-index: 130;
    opacity: 0;
  }
  .mask-shadow.active {
    visibility: visible;
    opacity: 1;
  }
  .notification {
    padding: 0 15px 0 15px;
  }
  .aside-panel {
    position: relative;
  }
  .aside-panel__close {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
  }
}
@media (max-width: 768px) {
  .notification {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    margin-bottom: 0;
    background-color: #fff;
    border-radius: 0;
    z-index: 120;
  }
  .header-panel .header-panel__nav li {
    margin-left: 10px;
  }
  .header-panel .header-panel__nav li:after {
    margin-right: 10px;
  }
  .my-buy__header {
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .my-buy__info {
    display: none;
  }
  .my-buy__info.defult {
    display: block;
  }
  .my-buy__info table.defult-table thead {
    display: none;
  }
  .my-buy__info table.defult-table tbody tr {
    display: flex;
    flex-direction: column;
  }
  .my-buy__info table.defult-table tbody tr.item-drop-down {
    background-color: #ffffff;
    margin-bottom: 20px;
  }
  .my-buy__info table.defult-table tbody tr:nth-child(4n+3) {
    background-color: #f6f8f9;
    border-top: 1px solid #e8e8e8;
  }
  .my-buy__info table.defult-table tbody tr td {
    border-right: 1px solid #e8e8e8;
  }
  .my-buy__info table.defult-table .item {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: none;
    display: flex;
    align-items: center;
  }
  .my-buy__info table.defult-table .item:before {
    content: attr(data-title) ":";
    margin-left: auto;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5215686275);
  }
  .my-buy__info table.defult-table .item:nth-last-of-type(1) {
    border-bottom: 1px solid #e8e8e8;
  }
  .my-buy__info table.defult-table .item--first {
    padding-right: 20px;
  }
  .my-buy__info.mobile {
    display: block;
  }
  .my-buy__top-item {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
  .my-buy__top-item span.title {
    margin-bottom: 5px;
    font-size: 14px;
  }
  .my-buy__top-item__value {
    width: 100%;
  }
  .my-buy__top-item .button {
    width: 100%;
  }
  .my-buy__top-item .full-width {
    grid-column: span 2;
  }
  .favorites__head {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .favorites__lists .favorites__lists-item {
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px 0 15px 0;
  }
  .favorites__lists .favorites__lists-item .favorites__lists-info .favorites__lists-title {
    margin-bottom: 8px;
  }
  .favorites__lists .favorites__lists-item .favorites__lists-buy {
    margin-top: 10px;
    margin-right: 0;
  }
  .favorites__lists .favorites__lists-item .favorites__lists-buy .favorites__lists-price {
    justify-content: center;
    margin-bottom: 5px;
  }
  .ticket__item--answer {
    margin-right: 30px;
  }
  .tickets {
    display: none;
  }
  .tickets__head {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .tickets__head__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 478px;
    width: 100%;
    padding: 0 15px;
  }
  .tickets__head-search {
    background-color: #0690cf;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-top: 9px;
    padding: 12px 15px;
  }
  .tickets__head-search form {
    max-width: 448px;
    margin: 0 auto;
  }
  .tickets__info ul {
    padding: 20px 15px;
    background-color: #f8f8f8;
  }
  .tickets__info ul:nth-child(2n) {
    background-color: #dcdcdc;
  }
  .tickets__info ul li {
    max-width: 451px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.16);
    border-radius: 23.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 34px;
    margin-bottom: 3px;
    line-height: 47px;
  }
  .tickets__info ul li a {
    font-size: 12px;
    white-space: nowrap;
  }
  .tickets__info ul li span {
    font-size: 12px;
    display: block;
    line-height: 47px;
    color: #000000;
  }
  .tickets__info ul li span:first-child {
    background-color: #0690cf;
    border-radius: 21px;
    width: 100px;
    color: #fff;
    padding-right: 20px;
    line-height: 47.52px;
  }
  .tickets__info ul li:last-child {
    box-shadow: none;
    background-color: transparent;
    justify-content: flex-end;
    margin-top: 6px;
    padding-left: 0;
    line-height: 37px;
  }
  .tickets__info ul li:last-child span {
    color: #000000;
    margin-left: 8px;
    background-color: transparent;
    width: unset;
  }
  .tickets__info ul li:last-child a {
    background-color: #ff0000;
    color: #fff;
    width: 137px;
    text-align: center;
    border-radius: 17px;
  }
  .tickets__info ul li:last-child a i {
    font-size: 11px;
    margin-right: 15px;
  }
  .tickets_mobile {
    display: block;
  }
  .new-ticket__message {
    flex-direction: column;
  }
  .new-ticket__message .insert-message {
    width: 100%;
  }
  .new-ticket__message textarea {
    width: 100%;
  }
  .new-ticket__button .upload {
    max-width: 276px;
    margin-left: auto;
    margin-right: auto;
  }
  .new-ticket__button-submit {
    margin-top: 29px;
    margin-left: auto;
  }
  .info-panel__item {
    margin-right: -150px;
  }
  .panel-license__image {
    flex: 0 0 87px;
    max-width: 87px;
  }
  .panel-license__image img {
    width: 87px;
    height: 87px;
  }
  .panel-license__content {
    flex: calc(100% - 102px);
    width: calc(100% - 102px);
    margin-right: 15px;
    display: flex;
    flex-direction: column;
  }
  .panel-license__content__label {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .panel-license__content__label label {
    font-size: 11.87px;
    color: #000;
    margin-left: 0px;
    margin-bottom: 6px;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .panel-license__content__label_input {
    width: 100%;
    background-color: #fff;
    border-radius: 13.79px;
    height: 27.57px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-left: 2px;
  }
  .panel-license__content__label_input input {
    margin-right: auto;
    background-color: transparent;
    line-height: 27.57px;
    max-width: 73px;
    color: #8b8b8b;
  }
  .panel-license__content__label_input i {
    color: #8b8b8b;
    font-size: 15.47px;
    cursor: pointer;
  }
  .panel-license__content__label_input a {
    margin-right: auto;
    width: 61px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #068fce;
    font-size: 11.87px;
    border-radius: 13.79px;
    color: #fff;
  }
  .panel-license__content__label_input a i {
    margin-right: 5px;
    font-size: 11px;
    color: #fff;
  }
  .panel-license__close {
    margin-right: auto;
    margin-left: auto;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .panel-license__close a {
    background-color: transparent;
    color: #ff0000;
    border-radius: 0;
    font-size: 11.87px;
    margin: 0 auto;
  }
  .panel-license__action ul {
    justify-content: center !important;
    align-items: center !important;
  }
  [data-theme=dark] .my-buy .my-buy__info table tbody tr td::before {
    color: #c7c5ee;
  }
  [data-theme=dark] .my-buy .my-buy__info table .item:nth-last-of-type(1) {
    border-color: #18164d;
  }
  [data-theme=dark] .tickets {
    display: none;
  }
  [data-theme=dark] .tickets__head {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  [data-theme=dark] .tickets__head__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 478px;
    width: 100%;
    padding: 0 15px;
  }
  [data-theme=dark] .tickets__head-search {
    background-color: #0690cf;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin-top: 9px;
    padding: 12px 15px;
  }
  [data-theme=dark] .tickets__head-search form {
    max-width: 448px;
    margin: 0 auto;
  }
  [data-theme=dark] .tickets__info ul {
    background-color: #0d0b32;
  }
  [data-theme=dark] .tickets__info ul:nth-child(2n) {
    background-color: #070525;
  }
  [data-theme=dark] .tickets__info ul li {
    background-color: #18164d;
  }
  [data-theme=dark] .tickets__info ul li a {
    font-size: 12px;
    white-space: nowrap;
    color: #c7c5ee;
  }
  [data-theme=dark] .tickets__info ul li span {
    color: #c7c5ee;
  }
  [data-theme=dark] .tickets__info ul li span:first-child {
    background-color: #0690cf;
    color: #fff;
  }
  [data-theme=dark] .tickets__info ul li:last-child span {
    color: #c7c5ee;
    background-color: transparent;
  }
  [data-theme=dark] .tickets__info ul li:last-child a {
    background-color: #ff0000;
    color: #fff;
  }
}
@media (max-width: 720px) {
  .notification__link {
    margin-left: 12px;
  }
}
@media (max-width: 700px) {
  .notification--style-3 .notification__wrapper {
    padding: 10px;
  }
  .notification--style-3 .notification__title {
    margin-left: 10px;
    margin-bottom: 0;
  }
  .notification--style-3 .notification__title i {
    line-height: 20px;
    font-size: 20px;
  }
  .notification--style-3 .notification__close {
    padding: 10px;
    line-height: 20px;
    min-width: 100px;
  }
  .notification__desc {
    font-size: 13px;
  }
  .notification__title {
    border-left: none;
    justify-content: flex-start;
    padding-left: 0;
    margin-left: 0;
  }
  .notification__title:before {
    display: none;
  }
  .notification.success .notification__title {
    margin-left: 10px;
    margin-bottom: 0;
  }
}
@media (max-width: 590px) {
  .header-panel {
    margin-bottom: 0;
  }
  .aside-ticket__info .aside-ticket__info-current {
    flex-wrap: wrap;
  }
  .aside-ticket__info .aside-ticket__info-sec-3 {
    margin-top: 10px;
  }
}
@media (max-width: 576px) {
  .panel-menu,
.back-panel {
    top: 125px;
    transition: 0.2s ease;
  }
  .header-panel {
    flex-direction: column;
  }
  .header-panel__home {
    margin-bottom: 15px;
  }
  .header-panel .header-panel__nav li {
    margin-left: 10px;
  }
  .header-panel .header-panel__nav li:after {
    margin-right: 10px;
  }
  .favorites {
    margin: 0 -15px;
    border-radius: 0;
    box-shadow: none;
  }
  .favorites__head {
    padding-right: 15px;
    padding-left: 15px;
  }
  .favorites__head .favorites__head-title {
    font-size: 16px;
  }
  .favorites__head .favorites__head-title i {
    margin-left: 10px;
  }
  .favorites__head .favorites__head-remove-list {
    font-size: 14px;
  }
  .favorites__head .favorites__head-remove-list i {
    margin-right: 10px;
  }
  .my-accounts {
    margin: 0 -15px;
    border-radius: 0;
    box-shadow: none;
  }
  .my-accounts__head {
    padding: 15px 15px 15px 15px;
  }
  .my-accounts__head .my-accounts__head-title {
    font-size: 16px;
  }
  .my-accounts__head .my-accounts__head-title i {
    margin-left: 15px;
  }
  .my-accounts__head .my-accounts__head-add-account a {
    font-size: 14px;
  }
  .my-accounts__head .my-accounts__head-add-account a i {
    margin-right: 15px;
  }
  .my-accounts__list .my-accounts__list-item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    padding-left: 70px;
  }
  .my-accounts__list .my-accounts__list-item .my-accounts__list-remove {
    padding: 0 10px;
    width: 50px;
  }
  .new-ticket {
    margin: 0 -15px;
    padding: 25px 15px 31px;
    background-color: #e4e4e4;
  }
  [data-theme=dark] .new-ticket {
    background-color: #070525;
  }
  .aside-ticket {
    margin: 0;
  }
  .aside-ticket__info {
    border-radius: 0;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 .aside-ticket__info-title .title {
    font-size: 17px;
    color: #5c5c5c;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-1 .aside-ticket__info-title .code {
    font-size: 20.33px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .item__name {
    font-size: 16px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .item__value {
    font-size: 16px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .aside-ticket__info-status .title {
    font-size: 16px;
  }
  .aside-ticket__info .aside-ticket__info-current .aside-ticket__info-sec-2 .aside-ticket__info-status .value {
    font-size: 16px;
  }
  .notification {
    flex-wrap: wrap;
    justify-content: center;
  }
  .btns {
    margin: 0 -15px;
    border-radius: 0;
  }
  .btns .pl-2,
.btns .pr-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .my-buy {
    margin: 0 -15px;
    border-radius: 0;
  }
  .my-buy__order {
    padding: 17px 27px 38px 28px;
  }
  .my-buy__top-item {
    grid-template-columns: 40% 60%;
  }
  .my-buy__top-item .bootstrap-select .dropdown-toggle {
    font-size: 12px;
  }
  .my-buy__top-item .input {
    min-width: unset;
  }
  .my-buy__top-item .input input {
    font-size: 12px;
  }
  .my-buy__top-item .input input::placeholder {
    font-size: 12px;
  }
  .my-buy__top-item .input button {
    max-width: 64px;
    font-size: 12px;
  }
  .my-buy__top-item .input.search {
    min-width: unset;
    width: 100%;
  }
  .my-buy__header {
    padding: 0;
    padding-bottom: 15px;
    margin-right: -15px;
  }
  .wallet {
    margin: 0 -15px;
    border-radius: 0;
  }
  .info-panel__image img {
    width: 45px;
    height: 50px;
  }
  .info-panel__item {
    margin-right: -110px;
  }
  .info-panel__item .info-panel__item-desc {
    font-size: 14px;
  }
  .info-panel__item .info-panel__item-head .info-panel__item-val .value {
    font-size: 24.07px;
  }
}
@media (max-width: 560px) {
  .notification {
    height: initial;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .notification__title {
    margin-bottom: 5px;
    justify-content: center;
  }
  .my-buy__info.mobile .mobile_table__body {
    padding: 25px 5px 22px 5px;
  }
  .my-buy__info.mobile .mobile_table__body__list {
    height: 39px;
  }
  .my-buy__info.mobile .mobile_table__body__list span,
.my-buy__info.mobile .mobile_table__body__list a {
    font-size: 11px !important;
    padding: 0;
  }
  .my-buy__info.mobile .mobile_table__body__list span:first-child,
.my-buy__info.mobile .mobile_table__body__list a:first-child {
    line-height: 12px !important;
  }
}
@media (max-width: 451px) {
  .info-panel__item {
    margin-right: -70px;
  }
}
@media (max-width: 400px) {
  .header-panel {
    white-space: nowrap;
  }
  .header-panel .header-panel__nav li {
    font-size: 13px;
    margin-left: 8px;
  }
  .favorites__head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .favorites__head .favorites__head-title {
    margin-bottom: 10px;
  }
  s .favorites__lists .favorites__lists-item {
    flex-direction: column;
  }
  s .favorites__lists .favorites__lists-item .favorites__lists-img {
    margin-left: 0;
    margin-bottom: 10px;
  }
  s .favorites__lists .favorites__lists-item:nth-of-type(2n) {
    background-color: #f6f8f9;
  }
  s .favorites__lists .favorites__lists-item:nth-of-type(2n + 1) {
    background-color: #ffffff;
  }
  .my-accounts__list .my-accounts__list-item {
    padding-left: 65px;
  }
  .my-accounts__list .my-accounts__list-item .my-accounts__list-remove {
    left: 10px;
    top: 10px;
    padding: 0;
    bottom: unset;
    border-right: none;
  }
  .my-accounts__list .my-accounts__list-item .my-accounts__list-status {
    position: absolute;
    left: 10px;
    bottom: 0px;
    font-size: 13px;
  }
  .my-accounts__list .my-accounts__list-item .my-accounts__list-info--full {
    flex-direction: column;
    align-items: stretch;
  }
  .my-accounts__list .my-accounts__list-item .my-accounts__list-info .my-accounts__list-address {
    margin-right: unset;
  }
}
@media (max-width: 360px) {
  .my-accounts__head {
    flex-direction: column;
  }
  .my-accounts__head .my-accounts__head-title {
    margin-bottom: 10px;
  }
}
@media (max-width: 1200px) {
  .top-cat__share {
    top: 25px;
  }
  .top-cat__share .share {
    font-size: 13px;
    margin-left: 15px;
  }
  .top-cat__share .share i {
    font-size: 18px;
  }
  .top-cat__share .favorite {
    font-size: 13px;
  }
  .top-cat__share .favorite i {
    font-size: 18px;
  }
  .top-cat__info {
    right: 15px;
  }
  .top-cat__info .top-cat__info-logo {
    height: 140px;
    margin-left: 15px;
    width: 120px;
  }
  .top-cat__info .top-cat__info-title {
    margin-top: 0;
  }
  .top-cat__info .top-cat__info-title .top-cat__info-title-tlt {
    margin-bottom: 0;
  }
  .top-cat__info .top-cat__info-title .top-cat__info-title-tlt .title {
    font-size: 22px;
    margin-bottom: 0;
    margin-left: 5px;
  }
  .top-cat__info .top-cat__info-title .top-cat__info-title-tlt .count {
    font-size: 13px;
    height: 25px;
    padding: 0 8px 0 8px;
  }
  .top-cat__info .top-cat__info-title .top-cat__info-title-tlt .count__numb {
    font-size: 17px;
  }
  .top-cat__title-en {
    bottom: 10px;
  }
  .top-cat__title-en h2 {
    font-size: 24px;
    margin-bottom: 0;
  }
  .cat-products__list__item:nth-child(4n) {
    border-left: 8px solid #e4e4e4;
  }
  .cat-products__list__item:nth-child(3n) {
    border-left: none;
  }
  .cat-products__list__item:nth-child(1), .cat-products__list__item:nth-child(2), .cat-products__list__item:nth-child(3) {
    padding-top: 0px !important;
  }
  .cat-products__list__item:nth-child(4) {
    padding-top: 30px !important;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n + 1) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n) .cat-products__item:before {
    display: none;
  }
  .cat-products .row > [class*=col-]:nth-of-type(4n + 1) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(4n) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(4n) .cat-products__item:before {
    display: block;
  }
}
@media (max-width: 992px) {
  .cat-header {
    flex-wrap: wrap;
  }
  .cat-products__list__item {
    width: 235px;
  }
  .cat-products .row > [class*=col-]:nth-of-type(2n + 1) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(2n) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(2n) .cat-products__item:before {
    display: none;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n + 1) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n) .cat-products__item {
    justify-content: flex-start;
  }
  .cat-products .row > [class*=col-]:nth-of-type(3n) .cat-products__item:before {
    display: block;
  }
  .cat-info {
    min-height: 344px;
  }
  .cat-info__wrapper .container {
    max-width: 930px;
  }
  .cat-info__wrapper .wrapper {
    padding-top: 20px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-title {
    margin-bottom: 8px;
    width: 100%;
    align-items: center;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate {
    order: 1;
  }
  .cat-info__wrapper .cat-info__thumbnail {
    margin-right: 20px;
  }
}
@media (max-width: 950px) {
  .cat-info__wrapper .container {
    max-width: 760px;
  }
  .cat-info__wrapper .wrapper {
    align-items: center;
  }
  .cat-info__wrapper .cat-info__thumbnail {
    margin-top: 25px;
  }
}
@media (max-width: 768px) {
  .top-cat {
    margin-bottom: 25px;
  }
  .top-cat__img {
    max-height: 170px;
    object-fit: cover;
    margin-top: 85px;
  }
  .top-cat__img img {
    height: 170px;
    object-fit: contain;
    width: 100%;
  }
  .top-cat__info {
    right: 15px;
    bottom: 11px;
  }
  .top-cat__info .top-cat__info-title {
    margin-top: 21px;
  }
  .top-cat__info .top-cat__info-logo {
    display: none;
  }
  .top-cat__share {
    left: 15px;
  }
  .top-cat__title-en {
    left: 15px;
  }
  .cat-products {
    margin-bottom: 13px;
  }
  .cat-products .cat-products__title {
    text-align: center;
    margin: 19px 0px 10px 0px;
  }
  .cat-products .cat-products__title h1, .cat-products .cat-products__title h2, .cat-products .cat-products__title h3, .cat-products .cat-products__title h4 {
    font-size: 25px;
    position: relative;
    padding-bottom: 20px;
    display: inline-block;
  }
  .cat-products .cat-products__title h1:before, .cat-products .cat-products__title h2:before, .cat-products .cat-products__title h3:before, .cat-products .cat-products__title h4:before {
    height: 1px;
  }
  .cat-products .cat-products__title h1:after, .cat-products .cat-products__title h2:after, .cat-products .cat-products__title h3:after, .cat-products .cat-products__title h4:after {
    height: 1px;
  }
  .cat-products__item {
    margin-top: 15px;
  }
  .cat-products__item__list {
    min-height: 140px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
  }
  .cat-products__item .cat-products__item-img {
    padding-left: 7px;
    margin: 7px 20px 7px 14px;
    border-left: 1px solid #e3e3e3;
    flex: 0 0 134px;
    width: 134px;
    z-index: 1;
  }
  .cat-products__item .cat-products__item-img figure img {
    background-color: #fff;
    width: 126px;
    height: 126px;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 3px;
  }
  .cat-products__item-content {
    width: 75.85%;
    flex: 75.85%;
  }
  .cat-products__item .cat-products__item-title {
    text-align: right;
    padding: 0;
    padding-top: 13px;
    display: block;
    border-bottom: none;
    height: 65px;
    max-height: 65px;
  }
  .cat-products__item .cat-products__item-title h2 {
    border-bottom: none;
    padding: 0px 0;
    font-size: 14px;
    line-height: 20px;
  }
  .cat-products__item .cat-products__item-title h2 span {
    display: block;
    margin-top: 5px;
  }
  .cat-products__item .cat-products__item-title ul {
    display: flex;
    align-items: center;
  }
  .cat-products__item .cat-products__item-title ul li {
    max-width: 34px;
    margin-left: 5px;
  }
  .cat-products__item .cat-products__item-title ul li:last-child {
    margin-left: 0;
  }
  .cat-products__item .cat-products__item-title ul li img {
    width: 34px;
    height: 14px;
    object-fit: contain;
    border-radius: 3px;
  }
  .cat-products__item .cat-products__item-footer {
    position: relative;
    z-index: 1;
  }
  .cat-products__item .cat-products__item-footer ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 5px;
    max-width: 150px;
    margin-right: auto;
    margin-left: 10px;
  }
  .cat-products__item .cat-products__item-footer ul li {
    max-width: 50px;
    margin-left: 5px;
  }
  .cat-products__item .cat-products__item-footer ul li:last-child {
    margin-left: 0;
  }
  .cat-products__item .cat-products__item-footer ul li img {
    width: 50px;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
  }
  .cat-products__item .cat-products__item-footer .cat-products__item-footer-icon {
    align-items: center;
    padding: 0px;
  }
  .cat-products__item .cat-products__item-footer .cat-products__item-footer-icon a {
    background-color: #fc0008;
    border-radius: 0px 20px 20px 0px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 26px;
    font-size: 17px;
    font-weight: 600;
    max-width: 135px;
    margin-right: auto;
  }
  .cat-products__item .cat-products__item-footer .cat-products__item-footer-icon a i {
    display: none;
    margin-left: 5px;
  }
  .cat-products__item:before {
    content: unset !important;
  }
  .cat-products__item:after {
    position: absolute;
    width: 100%;
    bottom: -2px;
    right: 0;
    height: 53px;
    background-color: #cecdd3;
    content: "";
    border-radius: 0 0px 15px 15px;
  }
  .cat-products__list {
    flex-direction: column;
  }
  .cat-products__list__item {
    border-left: none;
    max-width: 100%;
    width: 100%;
    min-height: 127px;
    position: relative;
    padding-bottom: 0;
    padding-top: 0px;
  }
  .cat-products__list__item:nth-child(4n) {
    border-left: none;
    padding-top: 0 !important;
  }
  .cat-info {
    height: 857px;
  }
  .cat-info__wrapper .wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .cat-info__wrapper .container {
    max-width: 540px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-main {
    flex-direction: column;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item {
    max-width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-main .cat-info__information-main-item:nth-last-of-type(1) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .cat-info__wrapper .cat-info__thumbnail {
    margin-right: 0;
  }
  .cat-info__img {
    display: none;
  }
}
@media (max-width: 576px) {
  .top-cat {
    margin-bottom: 12px;
    margin-top: -18px;
  }
  .top-cat__info {
    bottom: 20px;
  }
  .top-cat__share {
    left: 0;
  }
  .top-cat__title-en {
    bottom: 20px;
  }
  .top-cat__img {
    margin-right: -12.1vh;
    margin-left: -12.1vh;
  }
  .top-cat:before {
    right: -12.1vh;
    left: -12.1vh;
  }
  .cat-header {
    margin-bottom: 0px;
    align-items: baseline;
    margin-bottom: 25px;
  }
  .cat-info {
    height: 900px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item {
    margin-left: 15px;
  }
  .cat-info__wrapper .cat-info__information .cat-info__information-header .cat-info__information-rate .item__name {
    margin-left: 5px;
  }
  .cat-info__wrapper .cat-info__thumbnail {
    margin-top: 10px;
  }
}
@media (max-width: 461px) {
  .cat-info {
    height: 940px;
  }
}
@media (max-width: 450px) {
  .top-cat__title-en {
    left: 0;
  }
  .top-cat__logo {
    background-size: contain;
    width: 180px;
    height: 80px;
    top: -22px;
    transform: translate(0, 0);
    left: initial;
    right: -57px;
  }
  .top-cat__logo img {
    width: 44px;
  }
  .top-cat__share {
    left: 0;
  }
  .top-cat__info {
    right: 0;
    bottom: 10px;
  }
  .top-cat__info .top-cat__info-title .top-cat__info-title-tlt .title {
    font-size: 20px;
  }
  .top-cat__title-en {
    display: none;
  }
  .cat-header {
    justify-content: flex-end;
  }
  .cat-header__breadcrumb {
    display: none;
  }
}
@media (max-width: 410px) {
  .contactus__socials {
    padding: 30px 0;
    justify-content: center;
    flex-wrap: wrap;
  }
  .contactus__socials a {
    margin-bottom: 10px;
    margin-left: 10px;
  }
}
@media (max-width: 1200px) {
  .header-blog__cat .header-blog__cat-item {
    min-width: 88px;
  }
}
@media (max-width: 992px) {
  .header-blog {
    margin-bottom: 30px;
    /*&__item{
      .header-blog__item-info{
        .header-blog__item-info-title{
          margin-bottom: 10px;
        }
      }
    }*/
  }
  .header-blog__cat {
    margin-left: 0;
    margin-bottom: 15px;
  }
  .header-blog__cat .header-blog__cat-item {
    min-width: 93px;
  }
  .header-blog h2 {
    margin-bottom: 20px;
  }
  .slider-blog__item .slider-blog__item-info {
    right: 20px;
    bottom: 20px;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-title {
    margin-bottom: 10px;
    font-size: 25px;
  }
}
@media (max-width: 768px) {
  .header-blog__cat {
    white-space: nowrap;
    overflow: scroll;
  }
  .slider-blog {
    margin-bottom: 15px;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-title {
    font-size: 22px;
  }
  .article-blog__article .article-blog__article-footer {
    flex-wrap: wrap;
    justify-content: center;
  }
  .article-blog__article .article-blog__article-footer .article-blog__article-show {
    width: 100%;
    margin-bottom: 15px;
  }
}
@media (max-width: 576px) {
  .header-blog {
    margin-bottom: 15px;
    margin-top: -25px;
  }
  .header-blog h2 {
    margin-bottom: 15px;
    margin-top: 25px;
    font-size: 23px;
  }
  .header-blog__cat .header-blog__cat-item {
    height: 35px;
  }
  .article-blog__header {
    margin-bottom: 15px;
  }
  .article-blog__header .article-blog__header-title {
    font-size: 16px;
    position: relative;
    top: 3px;
  }
  .article-blog__item .article-blog__item-info .article-blog__item-info-date {
    margin-left: 15px;
  }
  .article-blog__item .article-blog__item-img {
    margin-bottom: 8px;
  }
  .article-blog__item .article-blog__item-desc {
    margin-bottom: 5px;
  }
  .journal--blog .journal__item {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  .journal--blog .journal__item .shadow {
    display: flex;
    justify-content: center;
  }
  .slider-blog__item .slider-blog__item-info {
    bottom: 5px;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta {
    display: block;
    columns: 2;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta .item {
    margin-left: 12px;
    margin-bottom: 8px;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-meta .item i {
    margin-left: 5px;
  }
  .slider-blog__item .slider-blog__item-info .slider-blog__item-info-title {
    font-size: 14px;
    margin-bottom: 3px;
  }
}
@media (max-width: 420px) {
  .article-blog__header {
    flex-direction: column;
    align-items: center;
  }
  .article-blog__header .article-blog__header-title {
    margin-bottom: 5px;
  }
  .article-blog__header .article-blog__header-sort .selectize-input {
    height: 34px;
    top: 0;
  }
}
@media (max-width: 360px) {
  .slider-blog__item .slider-blog__item-info {
    bottom: -2px;
    right: 10px;
  }
}
@media (max-width: 576px) {
  .breadcromb {
    padding-bottom: 0px;
  }
  .breadcromb__item {
    white-space: nowrap;
    overflow: scroll;
  }
  .breadcromb__item.single {
    margin-top: 65px;
  }
  .breadcromb__item.single ul {
    justify-content: center;
  }
}
/* page */
@keyframes float-404 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes pulse-circle {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(139, 92, 246, 0);
  }
}
.notpage {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.notpage__wrap {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.notpage__visual {
  margin-bottom: 32px;
}
.notpage__num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: float-404 4s ease-in-out infinite;
}
.notpage__num span {
  font-size: 120px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.notpage__circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 3px solid #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  animation: pulse-circle 2.5s ease-in-out infinite;
}
.notpage__title {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 8px;
}
.notpage__desc {
  font-size: 14px;
  color: #888;
  margin: 0 0 28px;
  line-height: 1.7;
}
.notpage__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
  margin-bottom: 32px;
}
.notpage__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.3);
  color: #fff;
}
.notpage__links span {
  display: block;
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
}
.notpage__links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.notpage__links-list a {
  font-size: 12px;
  font-weight: 600;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #e0daf5;
  padding: 6px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
}
.notpage__links-list a:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

[data-theme=dark] .notpage__num span {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  -webkit-background-clip: text;
}
[data-theme=dark] .notpage__circle {
  background: #1a1550;
  border-color: #7c3aed;
  color: #a78bfa;
}
[data-theme=dark] .notpage__title {
  color: #e0e0ff;
}
[data-theme=dark] .notpage__desc {
  color: #5a5790;
}
[data-theme=dark] .notpage__links span {
  color: #5a5790;
}
[data-theme=dark] .notpage__links-list a {
  background: #1a1550;
  border-color: #2a2060;
  color: #a78bfa;
}
[data-theme=dark] .notpage__links-list a:hover {
  background: #2a2060;
}

@media (max-width: 576px) {
  .notpage__num span {
    font-size: 80px;
  }
  .notpage__circle {
    width: 70px;
    height: 70px;
  }
  .notpage__circle svg {
    width: 44px;
    height: 44px;
  }
  .notpage__title {
    font-size: 18px;
  }
}
.aboutus {
  display: none;
}

.about-page {
  max-width: 800px;
  margin: 0 auto;
}

.about-hero {
  text-align: center;
  margin-bottom: 32px;
  padding: 10px 0;
}
.about-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f0ff;
  border: 1px solid #e0daf5;
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 16px;
}
.about-hero h1 {
  font-size: 26px;
  font-weight: 900;
  color: #111;
  margin: 0 0 10px;
}
.about-hero p {
  font-size: 14px;
  color: #888;
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.8;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.about-stat {
  text-align: center;
  padding: 20px 14px;
  background: #f8f7fc;
  border: 1.5px solid #f0ecf9;
  border-radius: 16px;
  transition: all 0.25s;
}
.about-stat:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.06);
}
.about-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 900;
  color: #7c3aed;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-stat span {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

.about-content__section {
  margin-bottom: 28px;
}
.about-content__section h2 {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-content__section h2 svg {
  color: #7c3aed;
}
.about-content__section p {
  font-size: 14px;
  color: #555;
  line-height: 2;
  margin: 0;
  text-align: justify;
}
.about-content__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.about-content__feature {
  padding: 22px 18px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s;
}
.about-content__feature:hover {
  transform: translateY(-3px);
}
.about-content__feature[data-color=purple] {
  background: #f5f3ff;
  border: 1.5px solid #ede9fe;
}
.about-content__feature[data-color=purple] .about-content__feature-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.about-content__feature[data-color=purple]:hover {
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.1);
}
.about-content__feature[data-color=green] {
  background: #ecfdf5;
  border: 1.5px solid #d1fae5;
}
.about-content__feature[data-color=green] .about-content__feature-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}
.about-content__feature[data-color=green]:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1);
}
.about-content__feature[data-color=blue] {
  background: #eff6ff;
  border: 1.5px solid #dbeafe;
}
.about-content__feature[data-color=blue] .about-content__feature-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.about-content__feature[data-color=blue]:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
}
.about-content__feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.about-content__feature h3 {
  font-size: 14px;
  font-weight: 800;
  color: #222;
  margin: 0 0 6px;
}
.about-content__feature p {
  font-size: 12px;
  color: #888;
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .about-hero h1 {
    font-size: 20px;
  }
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-content__features {
    grid-template-columns: 1fr;
  }
}
[data-theme=dark] .about-hero__badge {
  background: #1a1550;
  border-color: #2a2060;
  color: #a78bfa;
}
[data-theme=dark] .about-hero h1 {
  color: #e0e0ff;
}
[data-theme=dark] .about-hero p {
  color: #5a5790;
}
[data-theme=dark] .about-stat {
  background: #110e3a;
  border-color: #1e1b4b;
}
[data-theme=dark] .about-stat span {
  color: #5a5790;
}
[data-theme=dark] .about-stat strong {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  -webkit-background-clip: text;
}
[data-theme=dark] .about-content__section h2 {
  color: #e0e0ff;
}
[data-theme=dark] .about-content__section p {
  color: #7b77c5;
}
[data-theme=dark] .about-content__feature[data-color=purple] {
  background: #1a1550;
  border-color: #2a2060;
}
[data-theme=dark] .about-content__feature[data-color=green] {
  background: #0a2620;
  border-color: #0f3d2e;
}
[data-theme=dark] .about-content__feature[data-color=blue] {
  background: #0f1a3a;
  border-color: #1e3a5f;
}
[data-theme=dark] .about-content__feature h3 {
  color: #e0e0ff;
}
[data-theme=dark] .about-content__feature p {
  color: #5a5790;
}

/* account */
.archive-acc {
  display: none;
}

.arc-hero {
  margin-bottom: 28px;
}
.arc-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  background: linear-gradient(135deg, #4a2d8a 0%, #6b44b8 30%, #8b5cf6 60%, #7c3aed 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.arc-hero__inner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}
.arc-hero__content {
  position: relative;
  z-index: 1;
}
.arc-hero__content h1 {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.arc-hero__content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.arc-hero__toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.arc-hero__toggle-btn {
  cursor: pointer;
}
.arc-hero__toggle-btn input {
  display: none;
}
.arc-hero__toggle-btn span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.25s;
  white-space: nowrap;
}
.arc-hero__toggle-btn input:checked + span {
  background: #fff;
  color: #7c3aed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.arc-hero__toggle-btn:hover span {
  color: #fff;
}

@media (max-width: 768px) {
  .arc-hero__inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px 20px;
  }
  .arc-hero__content h1 {
    justify-content: center;
    font-size: 18px;
  }
}
[data-theme=dark] .arc-hero__inner {
  background: linear-gradient(135deg, #0a0630, #1a1550, #2d1f6e);
}

.buy-acc__item__title {
  margin-bottom: 78px;
}
.buy-acc__item__title form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.buy-acc__item__title form .form-group {
  margin-left: 75px;
}
.buy-acc__item__title form input {
  font-size: 16px;
  font-weight: 600;
  line-height: 59px;
  text-align: right;
  padding: 0 27px;
  background-color: #ECECEC;
  border-radius: 18px;
  color: #525252;
  width: 326px;
}
.buy-acc__item__title form select {
  background-color: #ECECEC;
  border-radius: 18px;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  line-height: 59px;
  padding: 0 25px;
  color: #525252;
  background-image: url("../img/download.svg");
  background-repeat: no-repeat;
  background-position: left 24.25px center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.buy-acc__item__title form select.city {
  width: 181px;
  height: 59px;
}
.buy-acc__item__title form select.select_cat {
  width: 238px;
  height: 59px;
}
.buy-acc__item__title form button {
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: 0.01em;
  text-align: right;
  color: #E0E0E0;
  background-color: #1E4DC5;
  text-align: center;
  width: 200px;
  height: 59px;
  border-radius: 18px;
}

.banner__title {
  position: relative;
  margin-top: 137px;
}
.banner__title h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  letter-spacing: 0.01em;
  text-align: right;
  padding-left: 28px;
  display: inline-block;
  color: #313131;
  background-color: #fff;
}
.banner__title:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #ACACAC;
  content: "";
  z-index: -1;
}

.last-account {
  margin-bottom: 100px;
}
.last-account .row [class^=col-] {
  padding-left: 18px;
  padding-right: 18px;
}
.last-account__title {
  position: relative;
  margin-bottom: 58px;
}
.last-account__title h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  letter-spacing: 0.01em;
  text-align: right;
  background-image: url("../img/Untitled-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 48px;
  display: inline-block;
  color: #313131;
}
.last-account__title:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #ACACAC;
  content: "";
  z-index: -1;
}
.last-account__item {
  background: #FEFEFE;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  min-height: 358px;
  position: relative;
  margin-bottom: 84px;
}
.last-account__item__title {
  text-align: center;
  margin-top: 18px;
}
.last-account__item__title h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  margin: 0;
}
.last-account__item__image {
  position: relative;
  height: 171px;
}
.last-account__item__image img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
}
.last-account__item__image__price {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #0E3597;
  border-radius: 0px 22px 0px 18px;
}
.last-account__item__image__price span {
  color: #fff;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 44px;
}
.last-account__item__image__price span small {
  font-size: 18px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: 0.01em;
  text-align: center;
}
.last-account__item__content {
  text-align: center;
  margin-top: 19px;
}
.last-account__item__content span {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}
.last-account__item__content ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 13px;
}
.last-account__item__content ul li {
  margin-left: 21px;
  margin-bottom: 16px;
}
.last-account__item__content ul li:last-child {
  margin-left: 0;
}
.last-account__item__content ul li span {
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}
.last-account__item__button {
  text-align: center;
  position: absolute;
  bottom: -23px;
  right: 50%;
  transform: translateX(50%);
}
.last-account__item__button a {
  display: inline-block;
  padding: 0 21px;
  line-height: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #E0E0E0;
  background: #1E4DC5;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 4px 29.5px;
}
.last-account__all {
  text-align: center;
  margin-top: 56px;
}
.last-account__all a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 74px;
  padding: 0 22px;
  color: #E0E0E0;
  background-color: #1E4DC5;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
}

.vip-acc {
  overflow: hidden;
  position: relative;
  background: #D6D6D6;
  border-radius: 200px 0 200px;
}
.vip-acc__title {
  margin-bottom: 17px;
  position: relative;
}
.vip-acc__title h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  background-color: #fff;
  padding: 20px 0 20px 24px;
  margin: 0;
  display: inline-block;
}
.vip-acc__title h3 strong {
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 0.01em;
  text-align: center;
  position: relative;
}
.vip-acc__title h3 strong:before {
  position: absolute;
  top: -15px;
  right: 50%;
  width: 20.62px;
  height: 15.19px;
  background-image: url(../img/vip-up-text.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  transform: translateX(50%);
}
.vip-acc__title:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #ACACAC;
  content: "";
  z-index: -1;
}
.vip-acc__item {
  background: #FEFEFE;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  min-height: 454px;
  position: relative;
  margin: 79.82px 0 50px;
}
.vip-acc__item__title {
  text-align: center;
  margin-top: 18px;
}
.vip-acc__item__title h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  margin: 0;
}
.vip-acc__item__image {
  position: relative;
  height: 252px;
}
.vip-acc__item__image img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
}
.vip-acc__item__image__logo {
  position: absolute;
  top: -15px;
  right: -9px;
  width: 61.5px;
  height: 63.38px;
}
.vip-acc__item__image__price {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #F7DC00;
  border-radius: 0px 22px 0px 18px;
}
.vip-acc__item__image__price span {
  color: #fff;
  padding: 0 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 44px;
}
.vip-acc__item__image__price span small {
  font-size: 18px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: 0.01em;
  text-align: center;
}
.vip-acc__item__content {
  text-align: center;
  margin-top: 19px;
}
.vip-acc__item__content span {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}
.vip-acc__item__content ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 13px;
}
.vip-acc__item__content ul li {
  margin-left: 21px;
  margin-bottom: 16px;
}
.vip-acc__item__content ul li:last-child {
  margin-left: 0;
}
.vip-acc__item__content ul li span {
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}
.vip-acc__item__button {
  text-align: center;
  position: absolute;
  bottom: -23px;
  right: 50%;
  transform: translateX(50%);
}
.vip-acc__item__button a {
  display: inline-block;
  padding: 0 21px;
  line-height: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #E0E0E0;
  background: #1E4DC5;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 4px 29.5px;
}

/* Single Account */
.head-account {
  margin-bottom: 40px;
}
.head-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-account__head__text h3 {
  font-size: 22px;
  color: #2D2C2C;
  font-weight: bold;
}
.head-account__head__button a {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: #1E4DC5;
  border-radius: 18px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 13px 0 11px 0;
  width: 100%;
  min-width: 170px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  transition: 0.3s;
}
.head-account__head__button a:hover {
  box-shadow: none;
}

@media (max-width: 992px) {
  .head-account__head__text h3 {
    font-size: 18px;
  }
  .head-account__head__button a {
    min-width: 126px;
    font-size: 17px;
    padding: 11px 0 9px 0;
  }
}
@media (max-width: 480px) {
  .head-account {
    margin-bottom: 31px;
    padding-top: 11px;
  }
  .head-account__head__text {
    margin: 0 auto;
  }
  .head-account__head__text h3 {
    font-size: 24px;
  }
  .head-account__head__button {
    display: none;
  }
}
[data-theme=dark] .head-account__head__text h3 {
  color: #fff;
}

.context-account {
  margin-bottom: 28px;
}
.context-account__gallery__img {
  margin-bottom: 25px;
}
.context-account__gallery__img img {
  width: 100%;
  height: 100%;
  max-width: 694px;
  max-height: 350px;
}
.context-account__gallery__img__money {
  display: none;
}
.context-account__gallery__slider {
  overflow: hidden;
  margin-left: 37px;
}
.context-account__gallery__slider__swiper {
  overflow: hidden;
}
.context-account__gallery__slider__swiper .swiper-wrapper {
  overflow: hidden;
}
.context-account__gallery__slider__swiper__img {
  position: relative;
}
.context-account__gallery__slider__swiper__img > a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.context-account__gallery__slider__swiper__img img {
  width: 100%;
  height: 100%;
  max-width: 331px;
  max-height: 161px;
  min-height: 161px;
  border-radius: 18px;
}
.context-account__gallery__slider__swiper__img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.33);
  border-radius: 18px;
}
.context-account__gallery__slider__swiper__img__player {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 1;
}
.context-account__gallery__slider__swiper__img__image {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  position: absolute;
  z-index: 111;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.context-account__gallery__slider__swiper__img__image a i {
  display: flex;
  font-size: 30px;
  margin-bottom: 31px;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.context-account__gallery__slider__swiper__img__image a h3 {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}
.context-account__gallery__slider__swiper__item {
  position: relative;
  cursor: pointer;
}
.context-account__gallery__slider__swiper__item figure {
  position: relative;
}
.context-account__gallery__slider__swiper__item figure img {
  width: 100%;
  position: relative;
  z-index: 100;
  border-radius: 15px;
}
.context-account__gallery__slider__swiper__item:after {
  content: "\e925";
  font-family: "icomoon";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotateX(90deg);
  width: 50px;
  height: 50px;
  font-size: 21px;
  background-color: #f01919;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.context-account__gallery__slider__swiper__item:hover:after {
  transform: translate(-50%, -50%) scale(1) rotateX(0);
  visibility: visible;
  opacity: 1;
}
.context-account__gallery__slider__swiper__item--video .context-account__item-time {
  position: absolute;
  z-index: 120;
  font-size: 16px;
  font-weight: 400;
  bottom: 9px;
  left: 16px;
}
.context-account__gallery__slider__swiper__item--video:after {
  content: "\e926";
  font-size: 49px;
  visibility: visible;
  opacity: 1;
  background-color: unset;
  transform: translate(-50%, -50%) scale(1) rotateX(0);
}
.context-account__gallery__slider__swiper__item--video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  opacity: 0.5;
  border-radius: 15px;
  z-index: 110;
  pointer-events: none;
}
.context-account__gallery__slider__swiper__item--video:hover:after {
  animation: video-animate 0.5s;
}

@media (max-width: 1200px) {
  .context-account {
    padding-left: 25px;
  }
}
@media (max-width: 768px) {
  .context-account {
    padding-left: 0;
  }
  .context-account__gallery__slider {
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .context-account__gallery__img {
    position: relative;
  }
  .context-account__gallery__img img {
    border-radius: 18px;
  }
  .context-account__gallery__img__money {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: #F7DC00;
    border-radius: 0 22px 0 18px;
    padding: 8px 26px 3px 26px;
  }
  .context-account__gallery__img__money span {
    color: #2D2C2C;
    font-size: 12px;
    font-weight: 500;
  }
  .context-account__gallery__img__money span ins {
    text-decoration: none;
    color: #2D2C2C;
    font-size: 18px;
    font-weight: 700;
  }
  .context-account__gallery__slider__swiper__img img {
    max-height: 85px;
    min-height: 85px;
  }
}
@media (max-width: 992px) {
  .context-account__gallery__slider {
    margin-left: 0;
  }
}
.sidebar {
  border-radius: 18px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
}
.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 30px;
}
.sidebar__header__right {
  padding: 20px 20px 0 0;
}
.sidebar__header__right ul {
  display: flex;
  align-items: center;
}
.sidebar__header__right ul li {
  margin-left: 10px;
}
.sidebar__header__right ul li a i {
  color: #000;
  font-size: 20px;
}
.sidebar__header__right ul li:last-child {
  margin-left: 0;
}
.sidebar__header__left {
  padding: 23px 57px;
  border-radius: 18px 0 18px 0;
  background-color: #F7DC00;
}
.sidebar__header__left h3 {
  color: #2D2C2C;
  font-size: 19px;
  font-weight: bold;
}
.sidebar__header__left h3 span {
  font-size: 14px;
  margin-right: 3px;
}
.sidebar__content {
  padding: 0 20px 1px 25px;
}
.sidebar__content ul li {
  border-bottom: 1px solid #5F5F5F;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 18px;
}
.sidebar__content ul li span:first-child {
  color: #5F5F5F;
  font-size: 15px;
  font-weight: bold;
}
.sidebar__content ul li span:last-child {
  color: #0F0F0F;
  font-size: 15px;
  font-weight: bold;
}
.sidebar__content ul li:last-child {
  border: none;
}
.sidebar__content ul li:last-child span:first-child {
  background-color: #1E4DC5;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar__content ul li:last-child span:first-child i {
  color: #fff;
  font-size: 10px;
}

@media (max-width: 992px) {
  .sidebar__content {
    padding: 0 15px 1px 15px;
  }
  .sidebar__content ul li span:first-child i {
    font-size: 12px;
  }
  .sidebar__content ul li span:last-child {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .sidebar {
    margin-bottom: 25px;
  }
}
@media (max-width: 480px) {
  .sidebar {
    margin-bottom: 90px;
  }
}
@media (max-width: 380px) {
  .sidebar__header__left {
    padding: 19px 28px;
  }
}
[data-theme=dark] .sidebar__header {
  background-color: #0C093E;
}
[data-theme=dark] .sidebar__header__right ul li a i {
  color: #fff;
}
[data-theme=dark] .sidebar__content {
  background-color: #0C093E;
}
[data-theme=dark] .sidebar__content ul li span {
  color: #fff;
}

.description-account {
  background-color: #FEFEFE;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 18px;
  padding: 33px 33px 60px 33px;
  margin-bottom: 83px;
  margin-left: 37px;
}
.description-account__head h3 {
  font-size: 23px;
  color: #5C5C5C;
  font-weight: bold;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.description-account__head h3::after {
  content: "";
  position: absolute;
  height: 2px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #DDDDDD;
}
.description-account__content__title {
  margin-bottom: 20px;
}
.description-account__content__title h4 {
  color: #c3c3c3;
  font-size: 18px;
  font-weight: bold;
}
.description-account__content__text {
  margin-bottom: 40px;
}
.description-account__content__text p {
  text-align: justify;
  font-size: 16px;
  color: #3E3E3E;
}
.description-account__content__list {
  position: relative;
  padding-bottom: 35px;
  margin-bottom: 26px;
}
.description-account__content__list::after {
  content: "";
  position: absolute;
  height: 2px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #DDDDDD;
}
.description-account__content__list h4 {
  color: #393939;
  font-weight: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.description-account__content__list ul li {
  color: #3E3E3E;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  margin-bottom: 15px;
  padding-right: 30px;
}
.description-account__content__list ul li:last-child {
  margin-bottom: 0;
}
.description-account__content__list ul li::before {
  content: "";
  position: absolute;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  background-color: #436edc;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}
.description-account__content__description p {
  text-align: justify;
  color: #7A7A7A;
  font-size: 17px;
}
.description-account__button {
  display: none;
}

@media (max-width: 992px) {
  .description-account {
    margin-left: 25px;
  }
  .description-account__head h3 {
    font-size: 19px;
  }
  .description-account__content__list ul li {
    font-size: 15px;
  }
  .description-account__content__list ul li::before {
    width: 10px;
    height: 10px;
  }
  .description-account__content__description p {
    font-size: 15px;
  }
  .description-account__content__text p {
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .description-account {
    margin-bottom: 40px;
    margin-left: 0;
  }
  .description-account__content__list ul {
    display: flex;
    flex-wrap: wrap;
    column-count: 3;
  }
  .description-account__content__list ul li {
    margin-left: 25px;
  }
}
@media (max-width: 480px) {
  .description-account {
    margin-bottom: 130px;
    position: relative;
  }
  .description-account__content__list ul {
    display: flex;
    flex-wrap: unset;
    column-count: unset;
    flex-direction: column;
  }
  .description-account__button {
    display: none;
  }
  .description-account__button-mobile {
    display: block;
    position: absolute;
    bottom: -107px;
    right: 50%;
    transform: translate(50%);
    width: 100%;
    text-align: center;
  }
  .description-account__button-mobile a {
    background-color: #1E4DC5;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 700;
    padding: 19px 56px;
    color: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .description-account__button-mobile a:hover {
    box-shadow: none;
  }
  .description-account__button-mobile a span {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-right: 10px;
  }
  .description-account__button-mobile a span::after {
    position: absolute;
    content: "";
    height: 35px;
    width: 1px;
    color: red;
    background-color: #fff;
    right: -33px;
    top: 50%;
    transform: translate(50%, -50%);
  }
  .description-account__button-mobile a span del {
    display: flex;
    align-items: center;
  }
  .description-account__button-mobile a span del p {
    padding-right: 5px;
  }
  .description-account__button-mobile a span ins {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .description-account__button-mobile a span ins p {
    padding-right: 5px;
  }
}
@media (max-width: 390px) {
  .description-account__button {
    display: none;
  }
  .description-account__button-mobile a {
    padding: 19px 30px;
  }
}
[data-theme=dark] .description-account {
  background-color: #0C093E;
}
[data-theme=dark] .description-account__head h3 {
  color: #c3c3c3;
}
[data-theme=dark] .description-account__content__list h4 {
  color: #c3c3c3;
}
[data-theme=dark] .description-account__content__list ul li {
  color: #c3c3c3;
}
[data-theme=dark] .description-account__content__text p {
  color: #c3c3c3;
}
[data-theme=dark] .description-account__content__description p {
  color: #c3c3c3;
}

.title-swiper {
  margin-bottom: 50px;
}
.title-swiper__context i {
  font-size: 15px;
  color: #BFBFBF;
  position: relative;
  right: 130px;
  bottom: 1px;
}
.title-swiper__context span {
  position: relative;
}
.title-swiper__context span::before {
  content: "";
  position: absolute;
  background-color: #DEDEDE;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: -1px;
  right: 3px;
}
.title-swiper__context span::after {
  content: "";
  position: absolute;
  background-color: #436edc;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 59px;
  right: 9px;
}
.title-swiper__context__title {
  position: relative;
}
.title-swiper__context__title h3 {
  color: #313131;
  font-size: 24px;
  font-weight: bold;
  display: inline;
  background-color: #fff;
  z-index: 1;
  position: relative;
  padding-left: 23px;
}
.title-swiper__context__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background-color: #ACACAC;
}

@media (max-width: 992px) {
  .title-swiper__context__title h3 {
    font-size: 21px;
  }
}
@media (max-width: 480px) {
  .title-swiper__context i {
    font-size: 9px;
  }
  .title-swiper__context span::before {
    width: 8px;
    height: 8px;
  }
  .title-swiper__context span::after {
    width: 9px;
    height: 9px;
  }
}
[data-theme=dark] .title-swiper__context__title h3 {
  background-color: #070525;
  color: #c3c3c3;
}

.swiper-account {
  background-color: #e6e6e6;
  padding-top: 50px;
}
.swiper-account .swiper {
  overflow: hidden;
}
.swiper-account .swiper .swiper-wrapper {
  padding-bottom: 68px;
}
.swiper-account .swiper .swiper-wrapper .swiper-slide {
  opacity: 0;
}
.swiper-account .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
  filter: blur(0);
  opacity: 1;
}
.swiper-account .swiper .swiper-wrapper .swiper-slide.swiper-slide-active + .swiper-slide {
  filter: blur(0);
  opacity: 1;
}
.swiper-account .swiper .swiper-wrapper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
  filter: blur(0);
  opacity: 1;
}

[data-theme=dark] .swiper-account {
  background-color: #070525;
}

.content-swiper {
  background-color: #fff;
  border-radius: 18px;
  padding-bottom: 35px;
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.08);
}
.content-swiper__image {
  margin-bottom: 18px;
  position: relative;
}
.content-swiper__image img {
  border-radius: 18px;
  position: relative;
  width: 100%;
}
.content-swiper__image__money {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 22px 0 18px;
  background-color: #0E3597;
}
.content-swiper__image__money span {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 38px;
  line-height: 42px;
}
.content-swiper__image__money span ins {
  text-decoration: none;
}
.content-swiper__context__title {
  text-align: center;
  margin-bottom: 16px;
}
.content-swiper__context__title h3 {
  color: #2D2C2C;
  font-size: 19px;
  font-weight: bold;
}
.content-swiper__context__support {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-bottom: 13px;
}
.content-swiper__context__support span {
  background-color: #436edc;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.content-swiper__context__support span i {
  font-size: 9px;
  color: #fff;
}
.content-swiper__context__support h4 {
  color: #404040;
  font-size: 14px;
  font-weight: bold;
}
.content-swiper__context__list ul {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}
.content-swiper__context__list ul li {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 16px;
}
.content-swiper__context__list ul li i {
  margin-left: 9px;
  font-size: 20px;
  color: #404040;
}
.content-swiper__context__list ul li span {
  font-size: 12px;
  color: #404040;
  font-weight: 600;
}
.content-swiper__context__button {
  background-color: #1E4DC5;
  border-radius: 4px 30px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  position: absolute;
  bottom: -25px;
  right: 50%;
  transform: translate(50%);
  transition: 0.3s;
}
.content-swiper__context__button:hover {
  border-radius: 30px 4px;
}
.content-swiper__context__button a {
  padding: 15px 21px;
  display: flex;
  align-items: center;
  color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
}
.content-swiper__context__button a i {
  border: 1px solid;
  border-radius: 50%;
  color: #fff;
  margin-right: 6px;
  padding: 3px 5px;
  font-size: 10px;
}

@media (max-width: 768px) {
  .content-swiper__context__title h3 {
    font-size: 17px;
  }
}
[data-theme=dark] .content-swiper {
  background-color: #0c093e;
}
[data-theme=dark] .content-swiper__context__title h3 {
  color: #fff;
}
[data-theme=dark] .content-swiper__context__support h4 {
  color: #c3c3c3;
}
[data-theme=dark] .content-swiper__context__list ul li i {
  color: #c3c3c3;
}
[data-theme=dark] .content-swiper__context__list ul li span {
  color: #c3c3c3;
}

.title-fq__context i {
  font-size: 15px;
  color: #BFBFBF;
  position: relative;
  right: 223px;
}
.title-fq__context span {
  position: relative;
}
.title-fq__context span::before {
  content: "";
  position: absolute;
  background-color: #DEDEDE;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 3px;
  right: -18px;
}
.title-fq__context span::after {
  content: "";
  position: absolute;
  background-color: #436edc;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 48px;
  right: -10px;
}
.title-fq__context__title h4 {
  font-size: 17px;
  color: #353535;
  font-weight: 600;
}

@media (max-width: 380px) {
  .title-fq__context span:after {
    width: 11px;
    height: 11px;
  }
  .title-fq__context__title h4 {
    font-size: 16px;
  }
}
[data-theme=dark] .title-fq__context__title h4 {
  color: #fff;
}

.content-fq__content ul li {
  margin-bottom: 28px;
  padding: 34px 29px 1px 29px;
  background: #FEFEFE;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.content-fq__content ul li.active {
  padding: 34px 29px;
}
.content-fq__content ul li.active .content-fq__content__title {
  margin-bottom: 34px;
}
.content-fq__content ul li.active .content-fq__content__title__left i {
  transition: 0.3s;
  rotate: 180deg !important;
  display: inline-flex !important;
}
.content-fq__content ul li.active .content-fq__content__title__right i {
  color: #436edc;
  background-color: #dde7ff;
}
.content-fq__content ul li:last-child {
  margin-bottom: 0;
}
.content-fq__content__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 27px;
}
.content-fq__content__title__right {
  display: flex;
  align-items: center;
}
.content-fq__content__title__right i {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #575757;
  font-size: 20px;
  background-color: #E8E8E8;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  margin-left: 24px;
  transition: 0.3s;
}
.content-fq__content__title__right span {
  font-size: 19px;
  font-weight: 700;
  color: #252424;
}
.content-fq__content__title__left i {
  transition: 0.3s;
  color: #acacac;
  font-size: 14px;
}
.content-fq__content__text {
  display: none;
}
.content-fq__content__text p {
  text-align: justify;
  color: #444242;
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
}

@media (max-width: 992px) {
  .content-fq__content ul li {
    padding-top: 22px;
  }
  .content-fq__content__title {
    margin-bottom: 22px;
  }
  .content-fq__content__title__right span {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .content-fq {
    padding-bottom: 80px;
  }
  .content-fq__content ul li {
    padding: 34px 18px 1px 18px;
  }
  .content-fq__content ul li.active {
    padding: 34px 18px 18px 18px;
  }
  .content-fq__content__title {
    align-items: flex-start;
  }
  .content-fq__content__title__right i {
    width: 30px;
    height: 30px;
    font-size: 15px;
    margin-left: 20px;
  }
  .content-fq__content__title__right span {
    font-size: 14px;
    padding-left: 20px;
    text-align: justify;
  }
  .content-fq__content__title__left {
    padding-top: 11px;
  }
}
[data-theme=dark] .content-fq__content ul li {
  background-color: #0c093e;
}
[data-theme=dark] .content-fq__content__title__right span {
  color: #fff;
}
[data-theme=dark] .content-fq__content__text p {
  color: #c3c3c3;
}

.fq-account {
  padding-top: 109px;
  background-color: #f4f4f4;
}
.fq-account__title {
  margin-bottom: 45px;
}
.fq-account__content {
  margin-bottom: 93px;
}

@media (max-width: 992px) {
  .fq-account {
    padding-top: 50px;
  }
  .fq-account__content {
    margin-bottom: 65px;
  }
}
@media (max-width: 480px) {
  .fq-account {
    padding-top: 0;
  }
  .fq-account__content {
    margin-bottom: 20px;
  }
}
[data-theme=dark] .fq-account {
  background-color: #070525;
}

.text-account__context__text {
  position: relative;
}
.text-account__context__text::before {
  content: "";
  position: absolute;
  background-color: #ACACAC;
  height: 1px;
  left: 0;
  right: 0;
}
.text-account__context__text p {
  color: #404040;
  font-size: 17px;
  line-height: 27px;
  text-align: justify;
  font-weight: 600;
  padding: 40px 55px 69px 55px;
}

@media (max-width: 992px) {
  .text-account__context__text p {
    padding: 40px 30px 69px 30px;
  }
}
@media (max-width: 480px) {
  .text-account {
    display: none;
  }
}
[data-theme=dark] .text-account__context__text p {
  color: #fff;
}

.banner-account {
  padding-top: 60px;
  padding-bottom: 4px;
}

/* Buy Account */
.headSell-buy {
  text-align: center;
  padding-bottom: 40px;
  background-color: #f4f4f4;
  padding-top: 64px;
  margin-top: -52px;
}
.headSell-buy__head {
  margin-bottom: 54px;
}
.headSell-buy__head h2 {
  color: #2D2C2C;
  font-size: 23px;
  font-weight: bold;
}
.headSell-buy__input {
  display: flex;
  text-align: center;
  justify-content: center;
}
.headSell-buy__input ul {
  display: flex;
  align-items: center;
}
.headSell-buy__input ul li {
  display: flex;
  align-items: center;
  border: 1px solid #B9B9B9;
  border-radius: 18px;
  padding: 25px 14px 25px 18px;
  margin-left: 37px;
}
.headSell-buy__input ul li:last-child {
  margin-left: 0;
}
.headSell-buy__input input {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: #1E4DC5;
  border: 1px solid #A4A4A4;
}
.headSell-buy__input label {
  font-size: 18px;
  font-weight: bold;
  color: #3C3B3B;
  margin-right: 15px;
}

@media (max-width: 576px) {
  .headSell-buy {
    padding-top: 125px;
  }
  .headSell-buy__input ul li {
    margin-left: 16px;
    padding: 15px 14px 15px 18px;
  }
  .headSell-buy__input label {
    margin-right: 9px;
  }
  .headSell-buy__head {
    margin-bottom: 40px;
  }
}
@media (max-width: 450px) {
  .headSell-buy__input ul {
    flex-direction: column;
  }
  .headSell-buy__input ul li {
    margin-left: 0;
    margin-bottom: 15px;
    padding: 10px 14px 10px 18px;
  }
  .headSell-buy__input ul li:last-child {
    margin-bottom: 0;
  }
  .headSell-buy__head {
    margin-bottom: 30px;
  }
  .headSell-buy__head h2 {
    font-size: 21px;
  }
}
[data-theme=dark] .headSell-buy {
  background-color: #070525;
}
[data-theme=dark] .headSell-buy__head h2 {
  color: #fff;
}
[data-theme=dark] .headSell-buy__input label {
  color: #c3c3c3;
}

.title-buy {
  padding-bottom: 43px;
  background-color: #f4f4f4;
}
.title-buy h3 {
  color: #323232;
  font-size: 16px;
  font-weight: 600;
}

[data-theme=dark] .title-buy {
  background-color: #070525;
}
[data-theme=dark] .title-buy h3 {
  color: #fff;
}

.selectionImg-buy {
  background-color: #f4f4f4;
  padding-bottom: 40px;
}
.selectionImg-buy__total {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-radius: 18px;
  padding: 37px 0;
  margin-left: 23px;
}
.selectionImg-buy__total__text {
  margin-bottom: 28px;
}
.selectionImg-buy__total__text p {
  font-size: 13px;
  color: #525252;
}
.selectionImg-buy__total__img {
  margin-bottom: 19px;
}
.selectionImg-buy__total__img img {
  width: 100%;
  height: 100%;
  width: 89px;
  height: 89px;
}
.selectionImg-buy__total__button a {
  color: #525252;
  font-size: 14px;
  border: 1px solid #E3E3E3;
  border-radius: 18px;
  padding: 13px 15px 13px 15px;
  transition: 0.3s;
}
.selectionImg-buy__total__button a:hover {
  background-color: #f4f4f4;
}
.selectionImg-buy__image {
  position: relative;
  margin-right: 23px;
  height: 100%;
}
.selectionImg-buy__image img {
  border-radius: 18px;
  width: 100%;
  height: 100%;
  max-width: 524px;
  max-height: 252px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
}
.selectionImg-buy__image__content {
  border-radius: 18px;
  background-color: #FFCCCC;
  position: absolute;
  bottom: 25px;
  display: flex;
  align-items: center;
  right: 50%;
  transform: translate(50%);
}
.selectionImg-buy__image__content a {
  display: flex;
  padding: 10px 18px;
  align-items: center;
  color: #C02A2A;
  font-size: 14px;
  font-weight: bold;
  display: none;
}
.selectionImg-buy__image__content a i {
  color: #C02A2A;
  font-size: 18px;
  margin-left: 9px;
  transition: 0.3s;
}
.selectionImg-buy__image__content a:hover i {
  margin-top: -3px;
}

@media (max-width: 1200px) {
  .selectionImg-buy__total__text {
    margin-bottom: 22px;
  }
  .selectionImg-buy__total__img img {
    width: 79px;
    height: 79px;
  }
  .selectionImg-buy__image img {
    max-width: 100%;
    width: unset;
  }
  .selectionImg-buy__total {
    padding: 28px 0;
  }
}
@media (max-width: 992px) {
  .selectionImg-buy__image {
    width: 100%;
    height: 100%;
    margin-right: 15px;
  }
  .selectionImg-buy__total {
    margin-left: 15px;
  }
}
@media (max-width: 992px) {
  .selectionImg-buy__total {
    margin-left: 0;
    margin-bottom: 30px;
    padding: 41px 0;
  }
  .selectionImg-buy__total__text {
    margin-bottom: 35px;
  }
  .selectionImg-buy__total__img img {
    width: 89px;
    height: 89px;
  }
  .selectionImg-buy__image {
    margin-right: 0;
  }
  .selectionImg-buy__image img {
    width: 100%;
  }
}
[data-theme=dark] .selectionImg-buy {
  background-color: #070525;
}

.data-buy {
  background-color: #f4f4f4;
}
.data-buy__total {
  padding-bottom: 20px;
}
.data-buy__total ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.data-buy__total ul li {
  margin-left: 21px;
  margin-bottom: 35px;
}
.data-buy__total ul li:last-child {
  margin-left: 0;
}
.data-buy__total ul li:nth-child(3) {
  margin-left: 0;
}
.data-buy__total ul li:nth-child(7) {
  margin-left: 0;
}
.data-buy__total ul li .custom {
  width: 593px;
}
.data-buy__total__data {
  display: flex;
  flex-direction: column;
}
.data-buy__total__data label {
  font-size: 16px;
  color: #323232;
  font-weight: 600;
  margin-bottom: 22px;
}
.data-buy__total__data input {
  border: 1px solid #BFBFBF;
  background-color: #f4f4f4;
  border-radius: 18px;
  padding: 16px 17px;
  width: 286px;
}
.data-buy__total__data input::placeholder {
  color: #525252;
  font-size: 16px;
  font-weight: bold;
}
.data-buy__total__data select {
  width: 267px;
}
.data-buy__total__data .custom-select-border {
  border: 1px solid #BFBFBF;
  background-color: #f4f4f4;
  border-radius: 18px;
  padding: 16px 17px;
}
.data-buy__total__data .custom-select-border option {
  color: #525252;
  font-size: 16px;
  font-weight: bold;
}
.data-buy__total__data .custom-select {
  background-color: #ececec;
  border-radius: 18px;
  padding: 16px 17px;
}
.data-buy__total__data .custom-select option {
  color: #525252;
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 1200px) {
  .data-buy__total ul li {
    margin-left: 15px;
  }
  .data-buy__total ul li:last-child {
    margin-left: 15px;
  }
  .data-buy__total ul li:nth-child(3) {
    margin-left: 15px;
  }
  .data-buy__total ul li:nth-child(7) {
    margin-left: 15px;
  }
}
@media (max-width: 992px) {
  .data-buy__total .custom {
    width: 267px !important;
  }
  .data-buy__total__data input {
    width: auto !important;
  }
  .data-buy__total__data select {
    width: auto !important;
  }
}
[data-theme=dark] .data-buy {
  background-color: #070525;
}
[data-theme=dark] .data-buy__total__data label {
  color: #fff;
}
[data-theme=dark] .data-buy__total ul li input {
  background-color: #0c093e;
  color: #c3c3c3;
}
[data-theme=dark] .data-buy__total ul li input::placeholder {
  color: #fff;
}
[data-theme=dark] .data-buy__total ul li select {
  background-color: #0c093e;
  color: #fff;
  border: 1px solid #BFBFBF;
}

.button-buy {
  background-color: #f4f4f4;
  margin-bottom: 20px;
}
.button-buy--edite .button-buy__button__border a {
  border: 1px solid #D75353;
  color: #D75353;
}
.button-buy__button ul {
  display: flex;
  align-items: center;
}
.button-buy__button ul li {
  width: 100%;
  max-width: 285px;
}
.button-buy__button ul li a {
  display: flex;
  border-radius: 18px;
  font-weight: 700;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 26px 0 24px 0;
}
.button-buy__button ul li:first-child {
  margin-left: 17px;
}
.button-buy__button__border a {
  border: 1px solid #436edc;
  color: #436edc;
}
.button-buy__button__back a {
  background-color: #436edc;
  border: 1px solid #436edc;
  color: #fff;
}

@media (max-width: 768px) {
  .button-buy__button ul {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .button-buy__button ul li a {
    padding: 16px 0 15px 0;
    font-size: 15px;
  }
}
[data-theme=dark] .button-buy__button {
  background-color: #070525;
}
[data-theme=dark] .button-buy__button__border {
  background-color: #fff;
  border-radius: 18px;
}

/* Buy Account Two */
.description-buy {
  background-color: #f4f4f4;
  padding-bottom: 50px;
}
.description-buy__text textarea {
  border: 1px solid #BFBFBF;
  background-color: #f4f4f4;
  border-radius: 18px;
  height: 100%;
  max-height: 182px;
  width: 100%;
  max-width: 945px;
  padding: 18px;
  font-size: 16px;
  color: #414141;
}

[data-theme=dark] .description-buy {
  background-color: #070525;
}
[data-theme=dark] .description-buy__text textarea {
  background-color: #0c093e;
  color: #fff;
}
[data-theme=dark] .description-buy__text textarea::placeholder {
  color: #fff;
}

.contents-buy {
  background-color: #f4f4f4;
  padding-bottom: 60px;
}
.contents-buy__title {
  display: flex;
  align-items: center;
  padding-bottom: 30px;
}
.contents-buy__title i {
  font-size: 16px;
  color: #BF4141;
  margin-left: 10px;
}
.contents-buy__title span {
  color: #414141;
  font-size: 13px;
  font-weight: 500;
}
.contents-buy__list {
  display: flex;
  flex-direction: column;
}
.contents-buy__list__add-list li {
  margin-bottom: 0 !important;
}
.contents-buy__list ul {
  display: flex;
  align-items: center;
}
.contents-buy__list ul li {
  display: flex;
  align-items: center;
  margin-left: 32px;
  margin-bottom: 34px;
}
.contents-buy__list ul li:last-child {
  margin-left: 0;
}
.contents-buy__list ul li h3 {
  color: #525252;
  font-size: 16px;
  background-color: #EDEDED;
  border-radius: 18px;
  margin-left: 15px;
  font-weight: 700;
  padding: 18px;
  display: inline-flex;
}
.contents-buy__list ul li a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #CECECE;
  position: relative;
  display: flex;
}
.contents-buy__list ul li a::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  top: 50%;
  right: 50%;
  background-color: #FF1B1B;
  border-radius: 10px;
  transform: translate(50%, 50%);
}
.contents-buy__list ul li .add {
  border: 1px solid #D2D2D2;
  background-color: #f4f4f4;
}
.contents-buy__list ul li .plus {
  position: relative;
}
.contents-buy__list ul li .plus::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  top: 50%;
  right: 50%;
  background-color: #1B52BB;
  border-radius: 10px;
  transform: translate(50%, 50%);
}
.contents-buy__list ul li .plus::after {
  content: "";
  position: absolute;
  height: 14px;
  width: 2px;
  top: 50%;
  right: 50%;
  background-color: #1B52BB;
  border-radius: 10px;
  transform: translate(50%, -39%);
}

@media (max-width: 992px) {
  .contents-buy__list ul {
    flex-wrap: wrap;
    justify-content: right;
  }
  .contents-buy__list ul li {
    margin-left: 7px;
  }
  .contents-buy__list ul li h3 {
    margin-left: 8px;
    font-size: 14px;
    padding: 15px;
  }
  .contents-buy__list ul li a {
    width: 30px;
    height: 30px;
  }
  .contents-buy__list ul li a::before {
    width: 10px;
  }
  .contents-buy__list__add-list {
    justify-content: right !important;
  }
  .contents-buy__list__add-list li a::before {
    width: 30px;
    height: 30px;
  }
  .contents-buy__list__add-list li a::after {
    width: 30px;
    height: 30px;
  }
}
[data-theme=dark] .contents-buy {
  background-color: #070525;
}
[data-theme=dark] .contents-buy__title span {
  color: #fff;
}

/* archive-item */
.archive-item.mobile {
  display: none;
}
.archive-item__banner img {
  width: 100%;
}
.archive-item .border {
  padding: 27px 0 70px 0;
  width: 100%;
}
.archive-item .border span {
  border-bottom: 1.22px solid #cbcbcb;
  display: block;
}
.archive-item__form form {
  margin-top: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #cbcbcb;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.archive-item__form__list {
  flex: 0 0 330px;
  max-width: 330px;
}
.archive-item__form__list label {
  font-size: 16px;
  margin-bottom: 10px;
}
.archive-item__form__list select {
  border: 1px solid #cbcbcb;
  border-radius: 21px;
  padding: 14px 15px;
  text-align: right;
  direction: ltr;
  width: 100%;
}
.archive-item__form__list .search_item {
  background-color: #e3e3e3;
  padding: 14px 15px;
  text-align: right;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.archive-item__form__list .search_item input {
  background-color: transparent;
  outline: none;
  color: #a5a5a5;
  font-size: 16px;
  width: 100%;
}
.archive-item__form__list .search_item input::placeholder {
  color: #a5a5a5;
}
.archive-item__form__list .search_item button {
  background-color: transparent;
  border: none;
  color: #a5a5a5;
}
.archive-item__form__list .search_item button i {
  color: #a5a5a5;
  line-height: 25px;
}
.archive-item__title {
  text-align: center;
  margin-top: 35px;
  margin-bottom: 50px;
}
.archive-item__title h2 {
  text-align: center;
  margin: 0;
  font-size: 18px;
  line-height: 29.96px;
}
.archive-item__item {
  min-width: 266px;
  margin: 0 15px;
  border-radius: 20px;
  margin-bottom: 43px;
}
.archive-item__item__image {
  background-color: #fff;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 10.4px 2.6px rgba(0, 0, 0, 0.17);
  position: relative;
}
.archive-item__item__image a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.archive-item__item__image img {
  object-fit: contain;
  max-width: 164px;
  max-height: 105px;
  margin: auto;
}
.archive-item__item__title {
  background-color: #8715d4;
}
.archive-item__item__title span {
  display: block;
  color: #fff;
  text-align: center;
  font-size: 12.41px;
  font-weight: 500;
  line-height: 24px;
}
.archive-item__item__value {
  background-color: #e5e5e5;
  padding: 10px 15px 0 15px;
  border-radius: 0 0 20px 20px;
}
.archive-item__item__value ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.archive-item__item__value ul li {
  line-height: 22px;
  background-color: #fff;
  border-radius: 9px;
  text-align: center;
  margin: 0 5px 10px;
  padding: 0 10px;
}
.archive-item__item__value ul li span {
  font-size: 18.45px;
  line-height: 22px;
  color: #000;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  display: block;
}
.archive-item__item__value ul li span img {
  margin-right: 5px;
}
.archive-item__item__buy {
  text-align: center;
  margin: 0 auto;
}
.archive-item__item__buy a {
  max-width: 150px;
  background-color: #ec2f58;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 13.49px;
  line-height: 29.94px;
  border-radius: 0px 0px 20px 20px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.archive-item__item__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-height: 182px;
  background-color: #fff;
  box-shadow: 0px 0px 10.4px 2.6px rgba(0, 0, 0, 0.17);
  border-radius: 21px;
  position: relative;
  margin-right: 35px;
}
.archive-item__item__content__label {
  padding: 25px 5px 25px 100px;
  max-height: 182px;
  min-height: 182px;
  background-color: #a2a2a2;
  border-radius: 21px;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -45px;
}
.archive-item__item__content__label ul li span {
  line-height: 35px;
  font-size: 17.84px;
  color: #fff;
}
.archive-item__item__content__item {
  padding: 25px 10px;
}
.archive-item__item__content__image {
  min-height: 224px;
  border-radius: 21px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  box-shadow: 0px 0px 10.4px 2.6px rgba(0, 0, 0, 0.17);
  flex: 0 0 54.6%;
}
.archive-item__item__content__title span {
  font-size: 16.47px;
  line-height: 35px;
  white-space: nowrap;
}
.archive-item__item__content__value ul li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 130px;
}
.archive-item__item__content__value ul li span {
  line-height: 35px;
  font-size: 20.9px;
}
.archive-item__item__content__buy {
  margin-top: 10px;
}
.archive-item__item__content__buy a {
  display: block;
  line-height: 35px;
  width: 184px;
  background-color: #ec2f58;
  font-size: 17.84px;
  color: #fff;
  border-radius: 13px;
  text-align: center;
  margin-left: auto;
}

[data-theme=dark] .archive-item__form__list label {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__form__list select {
  background-color: #3b426b;
  color: #c7c5ee;
  border-color: #110f3f;
}
[data-theme=dark] .archive-item__form__list form {
  background-color: #3b426b;
  border-color: #110f3f;
}
[data-theme=dark] .archive-item__form__list form input {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__form__list form input::placeholder {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__form__list form button {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__form__list form button i {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__title h2 {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__item__image {
  background-color: #3b426b;
}
[data-theme=dark] .archive-item__item__value {
  background-color: #191737;
}
[data-theme=dark] .archive-item__item__value ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
[data-theme=dark] .archive-item__item__value ul li {
  background-color: #3b426b;
}
[data-theme=dark] .archive-item__item__value ul li span {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__item__content {
  background-color: #191737;
  box-shadow: 0px 0px 10.4px 2.6px rgba(0, 0, 0, 0.17);
}
[data-theme=dark] .archive-item__item__content__label {
  background-color: #a2a2a2;
}
[data-theme=dark] .archive-item__item__content__label ul li span {
  color: #fff;
}
[data-theme=dark] .archive-item__item__content__image {
  background-color: #3b426b;
}
[data-theme=dark] .archive-item__item__content__title span {
  color: #c7c5ee;
}
[data-theme=dark] .archive-item__item__content__value ul li span {
  color: #c7c5ee;
}

@media (max-width: 1200px) {
  .archive-item__form form {
    margin-top: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #cbcbcb;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .archive-item__form__list {
    flex: 0 0 300px;
    max-width: 300px;
  }
  .archive-item__form__list select {
    border: 1px solid #cbcbcb;
    border-radius: 21px;
    padding: 14px 15px;
    text-align: right;
    direction: ltr;
    width: 100%;
  }
  .archive-item__form__list form {
    background-color: #e3e3e3;
    padding: 14px 15px;
    text-align: right;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .archive-item__form__list form input {
    background-color: transparent;
    outline: none;
    color: #a5a5a5;
    font-size: 16px;
    width: 100%;
  }
  .archive-item__form__list form input::placeholder {
    color: #a5a5a5;
  }
  .archive-item__form__list form button {
    background-color: transparent;
    border: none;
    color: #a5a5a5;
  }
  .archive-item__form__list form button i {
    color: #a5a5a5;
    line-height: 25px;
  }
  .archive-item__item {
    min-width: unset;
  }
}
@media (max-width: 992px) {
  .archive-item__form form {
    margin-top: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #cbcbcb;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .archive-item__form__list {
    flex: 0 0 230px;
    max-width: 230px;
  }
  .archive-item__form__list select {
    border: 1px solid #cbcbcb;
    border-radius: 21px;
    padding: 14px 15px;
    text-align: right;
    direction: ltr;
    width: 100%;
  }
  .archive-item__form__list form {
    background-color: #e3e3e3;
    padding: 14px 15px;
    text-align: right;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .archive-item__form__list form input {
    background-color: transparent;
    outline: none;
    color: #a5a5a5;
    font-size: 16px;
    width: 100%;
  }
  .archive-item__form__list form input::placeholder {
    color: #a5a5a5;
  }
  .archive-item__form__list form button {
    background-color: transparent;
    border: none;
    color: #a5a5a5;
  }
  .archive-item__form__list form button i {
    color: #a5a5a5;
    line-height: 25px;
  }
}
@media (max-width: 768px) {
  .archive-item__form form {
    flex-wrap: wrap;
  }
  .archive-item__form__list {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .archive-item__form__list:last-child {
    margin-top: 20px;
  }
  .archive-item__form__list select {
    border: 1px solid #cbcbcb;
    border-radius: 21px;
    padding: 14px 15px;
    text-align: right;
    direction: ltr;
    width: 100%;
  }
  .archive-item__form__list form {
    background-color: #e3e3e3;
    padding: 14px 15px;
    text-align: right;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .archive-item__form__list form input {
    background-color: transparent;
    outline: none;
    color: #a5a5a5;
    font-size: 16px;
    width: 100%;
  }
  .archive-item__form__list form input::placeholder {
    color: #a5a5a5;
  }
  .archive-item__form__list form button {
    background-color: transparent;
    border: none;
    color: #a5a5a5;
  }
  .archive-item__form__list form button i {
    color: #a5a5a5;
    line-height: 25px;
  }
}
@media (max-width: 576px) {
  .archive-item__form form {
    display: block;
  }
  .archive-item__form__list {
    display: flex;
    align-items: center;
    margin-top: 20px;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 275px;
  }
  .archive-item__form__list:first-child {
    margin-top: 0;
  }
  .archive-item__form__list label {
    font-size: 16px;
    white-space: nowrap;
    margin-left: 12px;
    flex: 0 0 21%;
    max-width: 21%;
  }
  .archive-item__form__list select {
    border: 1px solid #cbcbcb;
    border-radius: 21px;
    padding: 14px 15px;
    text-align: right;
    direction: ltr;
    width: 100%;
  }
  .archive-item__form__list form {
    background-color: #e3e3e3;
    padding: 14px 15px;
    text-align: right;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .archive-item__form__list form input {
    background-color: transparent;
    outline: none;
    color: #a5a5a5;
    font-size: 16px;
    width: 100%;
  }
  .archive-item__form__list form input::placeholder {
    color: #a5a5a5;
  }
  .archive-item__form__list form button {
    background-color: transparent;
    border: none;
    color: #a5a5a5;
  }
  .archive-item__form__list form button i {
    color: #a5a5a5;
    line-height: 25px;
  }
}
@media (max-width: 450px) {
  .archive-item .row .col-12 {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* archive-item */
/* new-cat */
.cat-hub.cat-hub--grid {
  padding-top: 0;
  padding-bottom: 120px;
}

.cat-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1200px) {
  .cat-hub__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .cat-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 420px) {
  .cat-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

.cat-card {
  --cc1: #8b5cf6;
  --cc2: #7c3aed;
  --cc-rgb: 139, 92, 246;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 12px;
  background: linear-gradient(155deg, #ffffff 0%, #faf8fe 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 22px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.35s ease;
}
.cat-card[data-accent=orange] {
  --cc1: #fb923c;
  --cc2: #ea580c;
  --cc-rgb: 251, 146, 60;
}
.cat-card[data-accent=amber] {
  --cc1: #fbbf24;
  --cc2: #d97706;
  --cc-rgb: 245, 158, 11;
}
.cat-card[data-accent=rose] {
  --cc1: #fb7185;
  --cc2: #e11d48;
  --cc-rgb: 244, 63, 94;
}
.cat-card[data-accent=emerald] {
  --cc1: #34d399;
  --cc2: #059669;
  --cc-rgb: 16, 185, 129;
}
.cat-card[data-accent=violet] {
  --cc1: #a855f7;
  --cc2: #7c3aed;
  --cc-rgb: 139, 92, 246;
}
.cat-card[data-accent=sky] {
  --cc1: #38bdf8;
  --cc2: #0284c7;
  --cc-rgb: 14, 165, 233;
}
.cat-card[data-accent=cyan] {
  --cc1: #22d3ee;
  --cc2: #0891b2;
  --cc-rgb: 6, 182, 212;
}
.cat-card[data-accent=blue] {
  --cc1: #60a5fa;
  --cc2: #2563eb;
  --cc-rgb: 59, 130, 246;
}
.cat-card::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(var(--cc-rgb), 0.28) 0%, transparent 65%);
  filter: blur(28px);
  opacity: 0.5;
  transition: opacity 0.4s ease, transform 0.5s ease;
  z-index: -1;
}
.cat-card::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cc1), var(--cc2), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--cc-rgb), 0.45);
  box-shadow: 0 28px 45px -18px rgba(var(--cc-rgb), 0.45);
}
.cat-card:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1.12);
}
.cat-card:hover::after {
  opacity: 1;
}
.cat-card:hover .cat-card__ico {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 22px 40px -12px rgba(var(--cc-rgb), 0.55);
}
.cat-card:hover .cat-card__cta-full {
  background: linear-gradient(135deg, var(--cc1), var(--cc2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px -6px rgba(var(--cc-rgb), 0.5);
}
.cat-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.cat-card__badge svg {
  flex-shrink: 0;
}
.cat-card__badge--hot {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
}
.cat-card__badge--new {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
}
.cat-card__badge--off {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
  direction: ltr;
}
.cat-card__badge--limited {
  background: rgba(15, 11, 72, 0.88);
  color: #fff;
  backdrop-filter: blur(6px);
}
.cat-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 1.5px solid #ebe6f5;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cat-card__fav svg {
  transition: all 0.2s ease;
}
.cat-card__fav:hover {
  border-color: #fcd34d;
  color: #f59e0b;
}
.cat-card__fav.is-active {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(245, 158, 11, 0.5);
}
.cat-card__fav.is-active svg {
  fill: #fff;
}
.cat-card__ico {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 200px;
  margin: 4px auto 0;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--cc1), var(--cc2));
  padding: 3px;
  box-shadow: 0 16px 32px -10px rgba(var(--cc-rgb), 0.4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.cat-card__ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 23px;
  background: #fff;
  display: block;
}
.cat-card__ico::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 23px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%);
  pointer-events: none;
}
.cat-card__body {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cat-card__title {
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cat-card__en {
  font-size: 10px;
  font-weight: 700;
  color: #8a87a3;
  letter-spacing: 0.3px;
  direction: ltr;
}
.cat-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.cat-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: #1a1a2e;
  background: #fff8e6;
  border: 1px solid #fde68a;
  padding: 2.5px 8px;
  border-radius: 6px;
  direction: ltr;
}
.cat-card__rating svg {
  color: #f59e0b;
}
.cat-card__count {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b6880;
}
.cat-card__cta-full {
  width: 100%;
  padding: 8px;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--cc2);
  background: #fff;
  border: 1.5px solid rgba(var(--cc-rgb), 0.35);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}
.cat-card__cta-full svg {
  transition: transform 0.25s ease;
}
.cat-card__cta-full:hover svg {
  transform: translateX(-3px);
}
.cat-card__foot, .cat-card__price-label, .cat-card__price, .cat-card__cta {
  display: none !important;
}

.cat-hub__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
}
.cat-hub__pager-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid #ebe6f5;
  background: #fff;
  color: #4a4664;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.cat-hub__pager-btn:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
  background: #f7f4fd;
  transform: translateY(-1px);
}
.cat-hub__pager-btn.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.45);
}
.cat-hub__pager-dots {
  color: #8a87a3;
  font-weight: 800;
  padding: 0 4px;
}

[data-theme=dark] .cat-card {
  background: linear-gradient(155deg, #15123a 0%, #0f0c2e 100%);
  border-color: #2a2560;
}
[data-theme=dark] .cat-card:hover {
  border-color: rgba(var(--cc-rgb), 0.5);
}
[data-theme=dark] .cat-card__ico {
  background: linear-gradient(135deg, #1a1648 0%, #15123a 100%);
  border-color: rgba(var(--cc-rgb), 0.25);
}
[data-theme=dark] .cat-card__title {
  color: #f1efff;
}
[data-theme=dark] .cat-card__en {
  color: #8a87b3;
}
[data-theme=dark] .cat-card__count {
  color: #b6b3d9;
}
[data-theme=dark] .cat-card__rating {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fde68a;
}
[data-theme=dark] .cat-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .cat-card__price {
  color: #f1efff;
}
[data-theme=dark] .cat-card__price small {
  color: #8a87b3;
}
[data-theme=dark] .cat-card__price-label {
  color: #8a87b3;
}
[data-theme=dark] .cat-card__fav {
  background: #15123a;
  border-color: #2a2560;
  color: #5a5790;
}
[data-theme=dark] .cat-card__cta {
  background: #15123a;
  border-color: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .cat-card__badge--limited {
  background: rgba(241, 239, 255, 0.15);
  color: #f1efff;
}
[data-theme=dark] .cat-hub__pager-btn {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__pager-btn:hover {
  background: #1a1648;
  border-color: #3d3485;
  color: #f1efff;
}
[data-theme=dark] .cat-hub__pager-dots {
  color: #8a87b3;
}

@media (max-width: 768px) {
  .cat-card {
    padding: 12px 10px 10px;
    border-radius: 18px;
    gap: 8px;
  }
  .cat-card__ico {
    max-width: 160px;
    border-radius: 20px;
  }
  .cat-card__ico img {
    border-radius: 17px;
  }
  .cat-card__fav {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }
  .cat-card__badge {
    top: 10px;
    left: 10px;
    font-size: 9px;
    padding: 3px 8px;
  }
  .cat-card__title {
    font-size: 13px;
  }
  .cat-card__cta-full {
    padding: 7px;
    font-size: 11px;
    border-radius: 9px;
  }
}
@media (max-width: 480px) {
  .cat-card {
    padding: 10px 8px 8px;
    border-radius: 14px;
  }
  .cat-card__ico {
    max-width: 130px;
    border-radius: 16px;
  }
  .cat-card__ico img {
    border-radius: 13px;
  }
  .cat-card__title {
    font-size: 12px;
  }
  .cat-card__en {
    font-size: 9.5px;
  }
  .cat-card__rating {
    font-size: 10px;
    padding: 2px 6px;
  }
  .cat-card__count {
    font-size: 10px;
  }
  .cat-card__cta-full {
    font-size: 10.5px;
    padding: 6px 8px;
    border-radius: 8px;
  }
  .cat-hub__pager {
    gap: 4px;
    margin-top: 20px;
  }
  .cat-hub__pager-btn {
    min-width: 34px;
    height: 34px;
    font-size: 12px;
    border-radius: 8px;
  }
}
.catNew_row, .catNew__breadcrumb, .catNew__title, .catNew__item {
  display: none;
}

.cat-hub {
  padding: 28px 0 0;
}
.cat-hub__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #6b6880;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cat-hub__crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b6880;
  text-decoration: none;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ebe6f5;
  border-radius: 20px;
  transition: all 0.2s ease;
  font-weight: 600;
}
.cat-hub__crumbs a:hover {
  color: #7c3aed;
  border-color: #c4b5fd;
  background: #f3f0ff;
}
.cat-hub__crumbs a svg {
  color: #7c3aed;
}
.cat-hub__crumbs span {
  font-weight: 800;
  color: #1a1a2e;
  padding: 4px 10px;
}
.cat-hub__crumbs-sep {
  color: #c4b5fd;
  flex-shrink: 0;
}
.cat-hub__hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ede9fe 0%, #f3f0ff 50%, #fce7f3 100%);
  border: 1.5px solid #ebe6f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cat-hub__hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 30%, rgba(139, 92, 246, 0.18), transparent 50%), radial-gradient(circle at 85% 70%, rgba(236, 72, 153, 0.15), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.cat-hub__hero-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
  max-width: 680px;
}
.cat-hub__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #ddd4f3;
}
.cat-hub__hero-title {
  font-size: 26px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hub__hero-sub {
  font-size: 13px;
  color: #4a4664;
  margin: 0;
  font-weight: 500;
  line-height: 1.7;
}
.cat-hub__hero-stats {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}
.cat-hub__hero-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 78px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 16px -6px rgba(124, 58, 237, 0.15);
}
.cat-hub__hero-stats li strong {
  font-size: 17px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hub__hero-stats li small {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 700;
}
.cat-hub__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
}
.cat-hub__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.cat-hub__search svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.cat-hub__search input {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1a2e;
  font-family: inherit;
}
.cat-hub__search input::placeholder {
  color: #a5a2bd;
}
.cat-hub__search input:focus {
  outline: none;
}
.cat-hub__search:focus-within {
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.cat-hub__filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.cat-hub__chip {
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6880;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.cat-hub__chip:hover {
  color: #7c3aed;
  border-color: #c4b5fd;
  background: #fff;
}
.cat-hub__chip.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.45);
}
.cat-hub__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  flex-wrap: wrap;
}
.cat-hub__fav {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.cat-hub__fav input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cat-hub__fav span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6880;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  transition: all 0.18s ease;
}
.cat-hub__fav span svg {
  color: #d1c9e8;
  transition: color 0.18s;
}
.cat-hub__fav input:checked + span {
  background: #fff8e6;
  border-color: #fcd34d;
  color: #92400e;
}
.cat-hub__fav input:checked + span svg {
  color: #f59e0b;
  fill: #f59e0b;
}
.cat-hub__fav:hover span {
  border-color: #c4b5fd;
}
.cat-hub__select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  transition: all 0.18s ease;
}
.cat-hub__select > svg:first-child {
  color: #8a87a3;
  flex-shrink: 0;
}
.cat-hub__select select {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1a2e;
  cursor: pointer;
  font-family: inherit;
  padding-left: 14px;
}
.cat-hub__select select:focus {
  outline: none;
}
.cat-hub__select-chev {
  position: absolute;
  left: 10px;
  color: #7c3aed;
  pointer-events: none;
}
.cat-hub__select:hover {
  border-color: #c4b5fd;
}

[data-theme=dark] .cat-hub__crumbs a {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__crumbs a:hover {
  background: #1a1648;
  border-color: #3d3485;
  color: #f1efff;
}
[data-theme=dark] .cat-hub__crumbs span {
  color: #f1efff;
}
[data-theme=dark] .cat-hub__crumbs-sep {
  color: #5a5790;
}
[data-theme=dark] .cat-hub__hero {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 50%, #2a1250 100%);
  border-color: #2a2560;
}
[data-theme=dark] .cat-hub__hero-eyebrow {
  background: rgba(26, 22, 72, 0.8);
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .cat-hub__hero-title {
  background: linear-gradient(135deg, #f1efff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .cat-hub__hero-sub {
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__hero-stats li {
  background: rgba(15, 12, 46, 0.7);
  border-color: rgba(61, 52, 133, 0.4);
}
[data-theme=dark] .cat-hub__hero-stats li strong {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .cat-hub__hero-stats li small {
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__toolbar {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .cat-hub__search {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .cat-hub__search input {
  color: #f1efff;
}
[data-theme=dark] .cat-hub__search input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .cat-hub__search:focus-within {
  border-color: #a78bfa;
  background: #1a1648;
}
[data-theme=dark] .cat-hub__chip {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__chip:hover {
  background: #1a1648;
  border-color: #3d3485;
  color: #f1efff;
}
[data-theme=dark] .cat-hub__fav span {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .cat-hub__select {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .cat-hub__select select {
  color: #f1efff;
}
[data-theme=dark] .cat-hub__select select option {
  background: #15123a;
  color: #f1efff;
}

@media (max-width: 768px) {
  .cat-hub {
    padding: 16px 0 0;
  }
  .cat-hub__crumbs {
    margin-bottom: 12px;
    font-size: 11px;
  }
  .cat-hub__hero {
    padding: 18px 16px;
    border-radius: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
  }
  .cat-hub__hero-title {
    font-size: 18px;
  }
  .cat-hub__hero-sub {
    font-size: 12px;
  }
  .cat-hub__hero-stats {
    width: 100%;
  }
  .cat-hub__hero-stats li {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
  }
  .cat-hub__hero-stats li strong {
    font-size: 15px;
  }
  .cat-hub__hero-stats li small {
    font-size: 10px;
  }
  .cat-hub__toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
  }
  .cat-hub__search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .cat-hub__filters {
    order: 3;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .cat-hub__filters::-webkit-scrollbar {
    display: none;
  }
  .cat-hub__chip {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 11px;
  }
  .cat-hub__sort {
    width: 100%;
    justify-content: space-between;
    order: 2;
  }
  .cat-hub__fav span {
    font-size: 11px;
    padding: 6px 10px;
  }
  .cat-hub__select select {
    font-size: 11px;
  }
}
@media (max-width: 480px) {
  .cat-hub__hero {
    padding: 14px;
    border-radius: 12px;
  }
  .cat-hub__hero-title {
    font-size: 16px;
  }
  .cat-hub__crumbs {
    gap: 4px;
  }
}
.cat-hero {
  padding: 24px 0 12px;
}
.cat-hero__wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: stretch;
}
.cat-hero__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: linear-gradient(155deg, #ffffff 0%, #faf8fe 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 20px;
}
.cat-hero__list-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #ddd4f3;
  padding: 5px 11px;
  border-radius: 20px;
  margin-bottom: 8px;
  align-self: flex-start;
}
.cat-hero__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  transition: all 0.22s ease;
}
.cat-hero__item-num {
  font-size: 10px;
  font-weight: 900;
  color: #c4b5fd;
  background: #f3f0ff;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  direction: ltr;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.cat-hero__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cat-hero__item-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cat-hero__item-text small {
  font-size: 10px;
  font-weight: 600;
  color: #8a87a3;
  line-height: 1.3;
}
.cat-hero__item-chev {
  color: #c4b5fd;
  opacity: 0;
  transform: translateX(4px);
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.cat-hero__item:hover {
  background: #f7f4fd;
  border-color: #ebe6f5;
}
.cat-hero__item:hover .cat-hero__item-num {
  background: #ede9fe;
  color: #7c3aed;
}
.cat-hero__item:hover .cat-hero__item-chev {
  opacity: 1;
  transform: translateX(0);
}
.cat-hero__item.is-active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.45);
}
.cat-hero__item.is-active .cat-hero__item-num {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.cat-hero__item.is-active .cat-hero__item-text strong {
  color: #fff;
}
.cat-hero__item.is-active .cat-hero__item-text small {
  color: rgba(255, 255, 255, 0.75);
}
.cat-hero__item.is-active .cat-hero__item-chev {
  opacity: 1;
  transform: translateX(0);
  color: #fff;
}
.cat-hero__stage {
  position: relative;
  min-height: 460px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}
.cat-hero__banner {
  --b1: #a855f7;
  --b2: #7c3aed;
  --b-rgb: 139, 92, 246;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 28px 32px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.cat-hero__banner[data-accent=orange] {
  --b1: #fb923c;
  --b2: #ea580c;
  --b-rgb: 251, 146, 60;
}
.cat-hero__banner[data-accent=amber] {
  --b1: #fbbf24;
  --b2: #d97706;
  --b-rgb: 245, 158, 11;
}
.cat-hero__banner[data-accent=rose] {
  --b1: #fb7185;
  --b2: #e11d48;
  --b-rgb: 244, 63, 94;
}
.cat-hero__banner[data-accent=emerald] {
  --b1: #34d399;
  --b2: #059669;
  --b-rgb: 16, 185, 129;
}
.cat-hero__banner[data-accent=violet] {
  --b1: #a855f7;
  --b2: #7c3aed;
  --b-rgb: 139, 92, 246;
}
.cat-hero__banner[data-accent=sky] {
  --b1: #38bdf8;
  --b2: #0284c7;
  --b-rgb: 14, 165, 233;
}
.cat-hero__banner[data-accent=cyan] {
  --b1: #22d3ee;
  --b2: #0891b2;
  --b-rgb: 6, 182, 212;
}
.cat-hero__banner[data-accent=blue] {
  --b1: #60a5fa;
  --b2: #2563eb;
  --b-rgb: 59, 130, 246;
}
.cat-hero__banner.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 2;
}
.cat-hero__banner.is-active .cat-hero__banner-cover img {
  transform: scale(1);
}
.cat-hero__banner-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 22px;
}
.cat-hero__banner-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 8s ease;
}
.cat-hero__banner-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 40, 0) 20%, rgba(10, 7, 40, 0.55) 60%, rgba(10, 7, 40, 0.88) 100%), linear-gradient(270deg, rgba(var(--b-rgb), 0.35) 0%, rgba(10, 7, 40, 0.25) 60%, transparent 100%);
  pointer-events: none;
}
.cat-hero__banner-glow {
  position: absolute;
  bottom: -80px;
  left: -50px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--b-rgb), 0.55), transparent 60%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
  animation: cat-hero-pulse 6s ease-in-out infinite;
}
.cat-hero__banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
}
.cat-hero__banner-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: rgba(var(--b-rgb), 0.25);
  border: 1px solid rgba(var(--b-rgb), 0.45);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.cat-hero__banner-title {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hero__banner-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.8;
  font-weight: 500;
  max-width: 440px;
}
.cat-hero__banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cat-hero__banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  background: #fff;
  border-radius: 11px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
}
.cat-hero__banner-cta svg {
  transition: transform 0.25s ease;
}
.cat-hero__banner-cta:hover {
  color: #1a1a2e;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.45);
}
.cat-hero__banner-cta:hover svg {
  transform: translateX(-3px);
}
.cat-hero__banner-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
@keyframes cat-hero-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
@keyframes cat-hero-float {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

[data-theme=dark] .cat-hero__list {
  background: linear-gradient(155deg, #15123a 0%, #0f0c2e 100%);
  border-color: #2a2560;
}
[data-theme=dark] .cat-hero__list-eyebrow {
  background: #1a1648;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .cat-hero__item-num {
  background: #1a1648;
  color: #8a87b3;
}
[data-theme=dark] .cat-hero__item-text strong {
  color: #f1efff;
}
[data-theme=dark] .cat-hero__item-text small {
  color: #8a87b3;
}
[data-theme=dark] .cat-hero__item:hover {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .cat-hero__item:hover .cat-hero__item-num {
  background: #2a2560;
  color: #c4b5fd;
}
[data-theme=dark] .cat-hero__item.is-active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}
[data-theme=dark] .cat-hero__item.is-active .cat-hero__item-text strong {
  color: #fff;
}
[data-theme=dark] .cat-hero__item.is-active .cat-hero__item-text small {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 992px) {
  .cat-hero__wrap {
    grid-template-columns: 1fr;
  }
  .cat-hero__list {
    order: 2;
  }
  .cat-hero__stage {
    order: 1;
    min-height: 340px;
  }
  .cat-hero__banner {
    padding: 22px 20px;
  }
  .cat-hero__banner-title {
    font-size: 26px;
  }
  .cat-hero__banner-desc {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .cat-hero {
    padding: 16px 0 8px;
  }
  .cat-hero__list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-hero__list::-webkit-scrollbar {
    display: none;
  }
  .cat-hero__list-eyebrow {
    display: none;
  }
  .cat-hero__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 14px;
    min-width: 90px;
    gap: 5px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  .cat-hero__item-num {
    font-size: 9px;
    padding: 2px 6px;
  }
  .cat-hero__item-chev {
    display: none;
  }
  .cat-hero__item-text strong {
    font-size: 11.5px;
    white-space: nowrap;
  }
  .cat-hero__item-text small {
    display: none;
  }
  .cat-hero__stage {
    min-height: 300px;
    border-radius: 16px;
  }
  .cat-hero__banner {
    padding: 18px 16px;
    border-radius: 16px;
  }
  .cat-hero__banner-cover {
    border-radius: 16px;
  }
  .cat-hero__banner-cover::after {
    border-radius: 16px;
  }
  .cat-hero__banner-title {
    font-size: 22px;
  }
  .cat-hero__banner-desc {
    font-size: 11.5px;
    line-height: 1.7;
  }
  .cat-hero__banner-cta {
    padding: 9px 16px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .cat-hero__stage {
    min-height: 260px;
  }
  .cat-hero__banner {
    padding: 14px 14px;
  }
  .cat-hero__banner-title {
    font-size: 20px;
  }
  .cat-hero__banner-desc {
    display: none;
  }
  .cat-hero__banner-actions {
    gap: 8px;
  }
  .cat-hero__banner-cta {
    font-size: 12px;
    padding: 9px 14px;
  }
}
.gift-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 38px 0 30px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #9d174d 100%);
  color: #fff;
}
.gift-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.gift-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.gift-hero__orb--1 {
  width: 380px;
  height: 380px;
  top: -120px;
  right: -80px;
  background: #ec4899;
  animation: gh-orb 10s ease-in-out infinite;
}
.gift-hero__orb--2 {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -50px;
  background: #8b5cf6;
  animation: gh-orb 12s ease-in-out infinite 2s;
}
.gift-hero__orb--3 {
  width: 220px;
  height: 220px;
  top: 30%;
  left: 30%;
  background: #06b6d4;
  animation: gh-orb 14s ease-in-out infinite 4s;
}
@keyframes gh-orb {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.2) translate(30px, -20px);
  }
}
.gift-hero__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gift-hero__crumbs a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.gift-hero__crumbs a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}
.gift-hero__crumbs span {
  font-weight: 800;
  color: #fff;
  padding: 4px 10px;
}
.gift-hero__crumbs svg {
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.gift-hero__main {
  max-width: 920px;
}
.gift-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  letter-spacing: 0.5px;
}
.gift-hero__title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  background: linear-gradient(135deg, #fff 0%, #fce7f3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gift-hero__sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px;
  line-height: 1.9;
  font-weight: 500;
  max-width: 720px;
}
.gift-hero__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
}
.gift-hero__stats li {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gift-hero__stats li strong {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #f9a8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gift-hero__stats li small {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.gift-grid-sec {
  padding: 24px 0 100px;
}

.gift-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
  flex-wrap: wrap;
}
.gift-toolbar__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.gift-toolbar__search svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.gift-toolbar__search input {
  flex: 1;
  height: 38px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1a2e;
  font-family: inherit;
}
.gift-toolbar__search input::placeholder {
  color: #a5a2bd;
}
.gift-toolbar__search input:focus {
  outline: none;
}
.gift-toolbar__search:focus-within {
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.gift-toolbar__chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.gift-toolbar__chip {
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b6880;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.gift-toolbar__chip:hover {
  color: #7c3aed;
  border-color: #c4b5fd;
  background: #fff;
}
.gift-toolbar__chip.is-active {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -3px rgba(236, 72, 153, 0.5);
}
.gift-toolbar__sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 9px;
  margin-right: auto;
}
.gift-toolbar__sort > svg:first-child {
  color: #8a87a3;
  flex-shrink: 0;
}
.gift-toolbar__sort select {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1a2e;
  cursor: pointer;
  font-family: inherit;
  padding-left: 14px;
}
.gift-toolbar__sort select:focus {
  outline: none;
}
.gift-toolbar__sort-chev {
  position: absolute;
  left: 10px;
  color: #ec4899;
  pointer-events: none;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 992px) {
  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 480px) {
  .gift-grid {
    grid-template-columns: 1fr;
  }
}

.giftcard {
  --g1: #ec4899;
  --g2: #8b5cf6;
  --g3: #3b82f6;
  --g-rgb: 236, 72, 153;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 220px;
  padding: 22px 24px;
  border-radius: 22px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);
  box-shadow: 0 18px 36px -14px rgba(var(--g-rgb), 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.giftcard[data-brand=googleplay] {
  --g1: #22c55e;
  --g2: #eab308;
  --g3: #ef4444;
  --g-rgb: 34, 197, 94;
}
.giftcard[data-brand=apple] {
  --g1: #fb7185;
  --g2: #a855f7;
  --g3: #3b82f6;
  --g-rgb: 244, 63, 94;
}
.giftcard[data-brand=steam] {
  --g1: #1e3a8a;
  --g2: #0ea5e9;
  --g3: #0f172a;
  --g-rgb: 30, 58, 138;
}
.giftcard[data-brand=xbox] {
  --g1: #065f46;
  --g2: #10b981;
  --g3: #064e3b;
  --g-rgb: 16, 185, 129;
}
.giftcard[data-brand=playstation] {
  --g1: #1e40af;
  --g2: #3b82f6;
  --g3: #312e81;
  --g-rgb: 59, 130, 246;
}
.giftcard[data-brand=amazon] {
  --g1: #f59e0b;
  --g2: #1f2937;
  --g3: #0f172a;
  --g-rgb: 245, 158, 11;
}
.giftcard[data-brand=itunes] {
  --g1: #ec4899;
  --g2: #a855f7;
  --g3: #6366f1;
  --g-rgb: 236, 72, 153;
}
.giftcard[data-brand=spotify] {
  --g1: #22c55e;
  --g2: #065f46;
  --g3: #111827;
  --g-rgb: 34, 197, 94;
}
.giftcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22) 0%, transparent 45%), radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.giftcard::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.35s ease, left 0.8s ease;
  pointer-events: none;
  z-index: 1;
}
.giftcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -18px rgba(var(--g-rgb), 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.giftcard:hover::after {
  opacity: 1;
  left: 120%;
}
.giftcard:hover .giftcard__cta {
  background: #fff;
  color: var(--g1);
}
.giftcard__chip, .giftcard__mag {
  display: none !important;
}
.giftcard__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.giftcard__logo {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
  margin: 0;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
  order: -1;
}
.giftcard__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.giftcard__region {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  padding: 4px 9px;
  border-radius: 20px;
  letter-spacing: 0.4px;
}
.giftcard__region svg {
  color: rgba(255, 255, 255, 0.85);
}
.giftcard__mid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.giftcard__mid small {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.35em;
  line-height: 1;
}
.giftcard__mid strong {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.giftcard__amount {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 5px;
  letter-spacing: 0.12em;
  direction: ltr;
  align-self: flex-start;
  margin-top: 2px;
}
.giftcard__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
}
.giftcard__price {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  direction: ltr;
  white-space: nowrap;
}
.giftcard__price strong {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 3px;
}
.giftcard__cta {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

[data-theme=dark] .gift-toolbar {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .gift-toolbar__search {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .gift-toolbar__search input {
  color: #f1efff;
}
[data-theme=dark] .gift-toolbar__search input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .gift-toolbar__chip {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .gift-toolbar__chip:hover {
  background: #1a1648;
  border-color: #3d3485;
  color: #f1efff;
}
[data-theme=dark] .gift-toolbar__sort {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .gift-toolbar__sort select {
  color: #f1efff;
}
[data-theme=dark] .gift-toolbar__sort select option {
  background: #15123a;
  color: #f1efff;
}

@media (max-width: 768px) {
  .gift-hero {
    padding: 24px 0 20px;
  }
  .gift-hero__crumbs {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .gift-hero__eyebrow {
    font-size: 10.5px;
    padding: 4px 10px;
  }
  .gift-hero__title {
    font-size: 22px;
  }
  .gift-hero__sub {
    font-size: 12px;
    margin-bottom: 16px;
  }
  .gift-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
  }
  .gift-hero__stats li {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .gift-hero__stats li strong {
    font-size: 18px;
  }
  .gift-hero__stats li small {
    font-size: 10px;
  }
  .gift-grid-sec {
    padding: 16px 0 60px;
  }
  .gift-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .gift-toolbar__search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .gift-toolbar__chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .gift-toolbar__chips::-webkit-scrollbar {
    display: none;
  }
  .gift-toolbar__chip {
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 12px;
  }
  .gift-toolbar__sort {
    margin-right: 0;
    align-self: flex-start;
  }
  .gift-toolbar__sort select {
    font-size: 11px;
  }
  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .giftcard {
    padding: 16px 18px;
    gap: 12px;
    min-height: 190px;
    border-radius: 18px;
  }
  .giftcard__logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 11px;
  }
  .giftcard__mid strong {
    font-size: 16px;
  }
  .giftcard__price strong {
    font-size: 14px;
  }
  .giftcard__cta {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
}
@media (max-width: 480px) {
  .gift-hero {
    padding: 20px 0 16px;
  }
  .gift-hero__title {
    font-size: 18px;
  }
  .gift-hero__sub {
    font-size: 11.5px;
    line-height: 1.75;
  }
  .gift-hero__stats li strong {
    font-size: 16px;
  }
  .gift-grid {
    gap: 8px;
  }
  .giftcard {
    padding: 13px 14px;
    gap: 10px;
    min-height: 170px;
    border-radius: 16px;
  }
  .giftcard:hover {
    transform: none;
  }
  .giftcard__logo {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 4px;
    border-radius: 9px;
  }
  .giftcard__mid {
    gap: 3px;
  }
  .giftcard__mid small {
    font-size: 8.5px;
    letter-spacing: 0.25em;
  }
  .giftcard__mid strong {
    font-size: 14px;
  }
  .giftcard__amount {
    font-size: 9px;
    padding: 2px 7px;
  }
  .giftcard__foot {
    padding-top: 8px;
  }
  .giftcard__price {
    font-size: 10px;
  }
  .giftcard__price strong {
    font-size: 13px;
  }
}
.gp {
  --gp1: #22c55e;
  --gp2: #eab308;
  --gp3: #ef4444;
  --gp-rgb: 34, 197, 94;
  padding: 22px 0 80px;
}
.gp[data-brand=googleplay] {
  --gp1: #22c55e;
  --gp2: #eab308;
  --gp3: #ef4444;
  --gp-rgb: 34, 197, 94;
}
.gp[data-brand=apple] {
  --gp1: #fb7185;
  --gp2: #a855f7;
  --gp3: #3b82f6;
  --gp-rgb: 244, 63, 94;
}
.gp[data-brand=steam] {
  --gp1: #1e3a8a;
  --gp2: #0ea5e9;
  --gp3: #0f172a;
  --gp-rgb: 30, 58, 138;
}
.gp[data-brand=xbox] {
  --gp1: #065f46;
  --gp2: #10b981;
  --gp3: #064e3b;
  --gp-rgb: 16, 185, 129;
}
.gp[data-brand=playstation] {
  --gp1: #1e40af;
  --gp2: #3b82f6;
  --gp3: #312e81;
  --gp-rgb: 59, 130, 246;
}
.gp[data-brand=amazon] {
  --gp1: #f59e0b;
  --gp2: #1f2937;
  --gp3: #0f172a;
  --gp-rgb: 245, 158, 11;
}
.gp__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #6b6880;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.gp__crumbs a {
  color: #6b6880;
  text-decoration: none;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ebe6f5;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.gp__crumbs a:hover {
  color: var(--gp1);
  border-color: rgba(var(--gp-rgb), 0.4);
}
.gp__crumbs span {
  font-weight: 800;
  color: #1a1a2e;
  padding: 4px 10px;
}
.gp__crumbs svg {
  color: #c4b5fd;
  flex-shrink: 0;
}
.gp__hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 26px;
}
@media (max-width: 992px) {
  .gp__hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .gp__hero {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }
}
.gp__card {
  position: relative;
  aspect-ratio: 1.6/1;
  padding: 22px 24px;
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--gp1) 0%, var(--gp2) 55%, var(--gp3) 100%);
  box-shadow: 0 22px 44px -14px rgba(var(--gp-rgb), 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.gp__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 45%), radial-gradient(circle at 80% 85%, rgba(0, 0, 0, 0.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.gp__card-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 1;
  animation: gp-shine 6s ease-in-out infinite;
  pointer-events: none;
}
.gp__card-ghost {
  position: absolute;
  bottom: -18%;
  left: -8%;
  width: 75%;
  height: auto;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
  transform: rotate(-8deg);
  animation: gp-ghost 12s ease-in-out infinite;
}
@keyframes gp-ghost {
  0%, 100% {
    transform: rotate(-8deg) translate(0, 0);
    opacity: 0.14;
  }
  50% {
    transform: rotate(-6deg) translate(8px, -6px);
    opacity: 0.2;
  }
}
@keyframes gp-shine {
  0%, 100% {
    left: -60%;
  }
  50% {
    left: 120%;
  }
}
.gp__card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gp__card-logo {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px;
  margin: 0;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
  order: -1;
}
.gp__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.gp__card-region {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.gp__card-mid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp__card-mid small {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.4em;
}
.gp__card-mid strong {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gp__card-amount {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  letter-spacing: -0.02em;
  direction: ltr;
  align-self: flex-start;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.25);
}
.gp__card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  direction: ltr;
  font-family: "Courier New", monospace;
}
.gp__card-brand {
  font-family: inherit;
  color: #fff;
}
.gp__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gp__info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gp1);
  background: rgba(var(--gp-rgb), 0.1);
  border: 1px solid rgba(var(--gp-rgb), 0.35);
  border-radius: 20px;
  align-self: flex-start;
}
.gp__info-title {
  font-size: 26px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  background: linear-gradient(135deg, #1a1a2e 0%, var(--gp1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gp__info-sub {
  font-size: 13px;
  color: #4a4664;
  margin: 0;
  line-height: 1.9;
  font-weight: 500;
  max-width: 580px;
}
.gp__info-perks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gp__info-perks li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #4a4664;
  background: #fff;
  border: 1px solid #ebe6f5;
  border-radius: 20px;
}
.gp__info-perks li svg {
  color: var(--gp1);
  flex-shrink: 0;
}
.gp__info-sticky {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-top: 8px;
  background: linear-gradient(135deg, #faf8fe 0%, #f3f0ff 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
  flex-wrap: wrap;
}
.gp__info-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  direction: ltr;
  text-align: left;
  flex: 1;
  min-width: 120px;
}
.gp__info-price small {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 700;
}
.gp__info-price strong {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gp1), var(--gp3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gp__info-price span {
  font-size: 11px;
  color: #6b6880;
  font-weight: 700;
}
.gp__info-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 22px -6px rgba(5, 150, 105, 0.45);
  font-family: inherit;
}
.gp__info-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(5, 150, 105, 0.6);
}
.gp__section {
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  margin-bottom: 16px;
}
.gp__section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1.5px dashed #ebe6f5;
}
.gp__section-head h2 {
  font-size: 15px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.gp__section-head small {
  font-size: 11.5px;
  color: #6b6880;
  font-weight: 500;
  line-height: 1.7;
}
.gp__step {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gp1), var(--gp3));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(var(--gp-rgb), 0.5);
}
.gp__countries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .gp__countries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .gp__countries {
    grid-template-columns: 1fr;
  }
}
.gp__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.gp__country input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gp__country-flag {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
.gp__country-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gp__country-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.gp__country-text small {
  font-size: 10px;
  font-weight: 700;
  color: #8a87a3;
  letter-spacing: 0.3px;
}
.gp__country-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: #7c3aed;
  background: #f3f0ff;
  border: 1px solid #ddd4f3;
  border-radius: 20px;
}
.gp__country-badge--off {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}
.gp__country:hover {
  border-color: rgba(var(--gp-rgb), 0.35);
  background: #fff;
}
.gp__country.is-active, .gp__country:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--gp1), var(--gp3)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 22px -8px rgba(var(--gp-rgb), 0.45);
}
.gp__amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .gp__amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .gp__amounts {
    grid-template-columns: 1fr;
  }
}
.gp__amount {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp__amount input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gp__amount-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  direction: ltr;
}
.gp__amount-top strong {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.02em;
}
.gp__amount-top small {
  font-size: 10px;
  font-weight: 800;
  color: #8a87a3;
  letter-spacing: 0.4px;
}
.gp__amount-price {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  direction: ltr;
}
.gp__amount-price small {
  font-size: 10px;
  color: #6b6880;
  font-weight: 700;
}
.gp__amount-flag {
  position: absolute;
  top: -9px;
  left: 10px;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 20px;
  box-shadow: 0 4px 10px -2px rgba(239, 68, 68, 0.5);
}
.gp__amount:hover {
  border-color: rgba(var(--gp-rgb), 0.35);
  background: #fff;
  transform: translateY(-2px);
}
.gp__amount.is-active, .gp__amount:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--gp1), var(--gp3)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 14px 30px -10px rgba(var(--gp-rgb), 0.4);
}
.gp__amount.is-active .gp__amount-top strong, .gp__amount:has(input:checked) .gp__amount-top strong {
  background: linear-gradient(135deg, var(--gp1), var(--gp3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gp__amount.is-active .gp__amount-price, .gp__amount:has(input:checked) .gp__amount-price {
  color: var(--gp1);
}
.gp__amount--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gp__amount--disabled .gp__amount-price {
  color: #ef4444;
  font-size: 12px;
}
.gp__amount--disabled:hover {
  transform: none;
  border-color: #ebe6f5;
  background: #faf9fd;
}
.gp__about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .gp__about {
    grid-template-columns: 1fr;
  }
}
.gp__about-card {
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 16px;
}
.gp__about-card h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.gp__about-card h3 svg {
  color: var(--gp1);
}
.gp__about-card p {
  font-size: 12.5px;
  color: #4a4664;
  line-height: 1.95;
  margin: 0;
  font-weight: 500;
}
.gp__about-card ol {
  list-style: none;
  counter-reset: gp-steps;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gp__about-card ol li {
  counter-increment: gp-steps;
  position: relative;
  padding-right: 32px;
  font-size: 12.5px;
  color: #4a4664;
  line-height: 1.9;
  font-weight: 500;
}
.gp__about-card ol li::before {
  content: counter(gp-steps);
  position: absolute;
  right: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gp1), var(--gp3));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme=dark] .gp__crumbs a {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .gp__crumbs a:hover {
  color: #fff;
}
[data-theme=dark] .gp__crumbs span {
  color: #f1efff;
}
[data-theme=dark] .gp__crumbs svg {
  color: #5a5790;
}
[data-theme=dark] .gp__info-title {
  background: linear-gradient(135deg, #f1efff 0%, var(--gp1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .gp__info-sub {
  color: #b6b3d9;
}
[data-theme=dark] .gp__info-perks li {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .gp__info-sticky {
  background: linear-gradient(135deg, #1a1648 0%, #13103a 100%);
  border-color: #2a2560;
}
[data-theme=dark] .gp__info-price small {
  color: #b6b3d9;
}
[data-theme=dark] .gp__info-price span {
  color: #b6b3d9;
}
[data-theme=dark] .gp__section {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .gp__section-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .gp__section-head h2 {
  color: #f1efff;
}
[data-theme=dark] .gp__section-head small {
  color: #b6b3d9;
}
[data-theme=dark] .gp__country {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .gp__country-text strong {
  color: #f1efff;
}
[data-theme=dark] .gp__country-text small {
  color: #8a87b3;
}
[data-theme=dark] .gp__country:hover {
  background: #1a1648;
}
[data-theme=dark] .gp__country.is-active, [data-theme=dark] .gp__country:has(input:checked) {
  background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, var(--gp1), var(--gp3)) border-box;
}
[data-theme=dark] .gp__country-badge {
  background: #1a1648;
  border-color: #3d3485;
  color: #c4b5fd;
}
[data-theme=dark] .gp__country-badge--off {
  background: #2a1f10;
  border-color: #4a2c10;
  color: #fde68a;
}
[data-theme=dark] .gp__amount {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .gp__amount-top strong {
  color: #f1efff;
}
[data-theme=dark] .gp__amount-price {
  color: #f1efff;
}
[data-theme=dark] .gp__amount-price small {
  color: #b6b3d9;
}
[data-theme=dark] .gp__amount:hover {
  background: #1a1648;
}
[data-theme=dark] .gp__amount.is-active, [data-theme=dark] .gp__amount:has(input:checked) {
  background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, var(--gp1), var(--gp3)) border-box;
}
[data-theme=dark] .gp__about-card {
  background: #15123a;
  border-color: #2a2560;
}
[data-theme=dark] .gp__about-card h3 {
  color: #f1efff;
}
[data-theme=dark] .gp__about-card p {
  color: #b6b3d9;
}
[data-theme=dark] .gp__about-card ol li {
  color: #b6b3d9;
}

@media (max-width: 768px) {
  .gp {
    padding: 16px 0 60px;
  }
  .gp__crumbs {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .gp__card {
    max-width: 100%;
    margin: 0;
    padding: 22px 24px 20px;
    aspect-ratio: 1.85/1;
    border-radius: 20px;
  }
  .gp__card-logo {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    padding: 5px;
  }
  .gp__card-region {
    font-size: 11px;
    padding: 5px 13px;
  }
  .gp__card-mid strong {
    font-size: 20px;
  }
  .gp__card-mid small {
    font-size: 9px;
    letter-spacing: 0.35em;
  }
  .gp__card-amount {
    display: none;
  }
  .gp__card-foot {
    font-size: 10.5px;
    padding-top: 9px;
  }
  .gp__info-title {
    font-size: 20px;
  }
  .gp__info-sub {
    font-size: 12px;
    line-height: 1.8;
  }
  .gp__info-sticky {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .gp__info-price {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
  }
  .gp__info-buy {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }
  .gp__countries {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .gp__country {
    padding: 10px 12px;
    gap: 8px;
  }
  .gp__country-flag {
    font-size: 20px;
  }
  .gp__country-text strong {
    font-size: 12px;
  }
  .gp__country-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
  .gp__amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .gp__amount {
    padding: 12px 10px;
    gap: 6px;
  }
  .gp__amount-top strong {
    font-size: 18px;
  }
  .gp__amount-price {
    font-size: 13px;
  }
  .gp__section {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .gp__section-head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    gap: 10px;
  }
  .gp__section-head h2 {
    font-size: 14px;
  }
  .gp__section-head small {
    font-size: 11px;
  }
  .gp__about-card {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .gp__about-card h3 {
    font-size: 13px;
  }
  .gp__about-card p, .gp__about-card ol li {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .gp__info-title {
    font-size: 19px;
  }
  .gp__card {
    padding: 18px 20px 16px;
    aspect-ratio: 1.75/1;
    border-radius: 18px;
  }
  .gp__card-logo {
    width: 44px;
    height: 44px;
  }
  .gp__card-mid strong {
    font-size: 18px;
  }
  .gp__card-foot {
    font-size: 10px;
  }
  .gp__info-perks li {
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .gp__country {
    padding: 9px 10px;
  }
  .gp__country-flag {
    font-size: 18px;
  }
  .gp__amount {
    padding: 10px 9px;
  }
  .gp__amount-top strong {
    font-size: 16px;
  }
  .gp__amount-price {
    font-size: 12px;
  }
}
/* new-cat */
.categoryNew.mobile {
  display: none;
}
.categoryNew__banner img {
  width: 100%;
}
.categoryNew_row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.categoryNew__breadcrumb {
  margin-top: 50px;
  background-color: #8ea8c2;
  border-radius: 20px 20px 0 0;
  display: inline-block;
  align-items: center;
  padding: 0 25px;
  margin-bottom: -12px;
  line-height: 62px;
}
.categoryNew__breadcrumb a {
  color: #fff;
  font-size: 16.23px;
  line-height: 62px;
}
.categoryNew__breadcrumb a:after {
  content: "...";
  font-size: 30px;
  color: #fff;
  margin: 0 5px;
}
.categoryNew__breadcrumb span {
  color: #454545;
  font-size: 16.23px;
  line-height: 62px;
}
.categoryNew__title {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 50px;
}
.categoryNew__title__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background-color: #c1d0df;
  border-radius: 0 20px 20px 0;
  flex: 1;
}
.categoryNew__title__item h2 {
  text-align: center;
  margin: 0;
  font-size: 30.4px;
  line-height: 68px;
  color: #000000;
}
.categoryNew__title__item form {
  justify-content: space-between;
  display: flex;
}
.categoryNew__title__item form .form-select {
  padding: 0 15px;
  margin-left: 15px;
  border-radius: 20px;
  border: 2px solid #4f4f4f;
  background-color: transparent;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.categoryNew__title__item form label {
  font-size: 13.04px;
  color: #4f4f4f;
  line-height: 35px;
  margin: 0;
}
.categoryNew__title__item form select {
  border: none;
  background-color: transparent;
  color: #f36030;
  font-size: 13.04px;
  line-height: 35px;
}
.categoryNew__title__showFavorite {
  flex: 0 0 195px;
  max-width: 195px;
}
.categoryNew__title__showFavorite input {
  display: none;
}
.categoryNew__title__showFavorite input:checked + label {
  background-color: #f75823;
}
.categoryNew__title__showFavorite label {
  background-color: rgba(247, 88, 35, 0.4666666667);
  border-radius: 20px 0 0 20px;
  font-size: 17.67px;
  color: #fff;
  line-height: 68px;
  display: block;
}
.categoryNew__title__showFavorite label i:before {
  color: #fff;
}
.categoryNew__item {
  display: flex;
  align-items: flex-start;
  background-color: #0f214f;
  border-radius: 18px;
  max-width: 579px;
  max-height: 185px;
  margin-bottom: 20px;
}
.categoryNew__item__image {
  position: relative;
  background-color: #f65823;
  border-radius: 18px;
  min-width: 206px;
  z-index: 1;
}
.categoryNew__item__image a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.categoryNew__item__image img {
  object-fit: contain;
  width: 190px;
  height: 190px;
  min-width: 190px;
  min-height: 185px;
  max-height: 185px;
  max-width: 190px;
  object-fit: cover;
  border-radius: 18px;
}
.categoryNew__item__title {
  justify-content: space-between;
  z-index: 0;
  position: relative;
  border-radius: 11px 0px 0 0;
  z-index: 1;
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  text-align: center;
  max-height: 72px;
  margin-right: -16px;
  padding-right: 60px;
}
.categoryNew__item__title span {
  display: block;
  color: #fff;
  text-align: center;
  font-size: 16.97px;
  font-weight: 500;
  position: relative;
}
.categoryNew__item__title span:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -23px;
  width: 14.06px;
  height: 14.06px;
  content: "";
  background-color: #f65823;
  border-radius: 50%;
}
.categoryNew__item__title > a.favorite {
  flex: 0 0 57px;
  max-width: 57px;
  text-align: center;
  line-height: 60px;
  background-image: linear-gradient(to right, #4c6a90, #21508a);
  border-radius: 18px 0 0 0;
}
.categoryNew__item__title > a.favorite i {
  color: #fff;
}
.categoryNew__item__title > a.favorite i::before {
  color: #fff;
}
.categoryNew__item__title > a.favorite.active {
  background-image: none;
  background-color: #f65823;
}
.categoryNew__item__content {
  background-color: #d8e2ec;
  border-radius: 0 0 0px 18px;
  height: 125px;
  margin-right: -20px;
  padding: 20px 32px 20px 20px;
}
.categoryNew__item__content p {
  color: #000;
  font-size: 15.34px;
  font-weight: 600;
  text-align: justify;
  margin: 0;
}

@media (max-width: 1200px) {
  .categoryNew__title__item h2 {
    font-size: 18.04px;
  }
  .categoryNew__item {
    max-width: 100%;
    margin-bottom: 20px;
  }
}
@media (max-width: 992px) {
  .categoryNew__title__item {
    height: 68px;
  }
  .categoryNew__title__item h2 {
    display: none;
  }
}
/* google-play */
.learnGooglePlay {
  margin-bottom: 50px;
}
.learnGooglePlay__breadcrumb {
  margin-top: 15px;
  padding: 0 20px;
  display: inline-block;
  align-items: center;
  margin-bottom: -12px;
  margin-bottom: 22px;
  line-height: 62px;
}
.learnGooglePlay__breadcrumb a {
  color: #999999;
  font-size: 16.23px;
  line-height: 62px;
}
.learnGooglePlay__breadcrumb a:after {
  content: "...";
  font-size: 30px;
  color: #999999;
  margin: 0 5px;
}
.learnGooglePlay__breadcrumb span {
  color: #999999;
  font-size: 16.23px;
  line-height: 62px;
}
.learnGooglePlay__item {
  background-color: #f2f2f2;
  position: relative;
  padding-bottom: 100px;
  border-radius: 21px;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.1);
}
.learnGooglePlay__item__title {
  margin-top: 65px;
}
.learnGooglePlay__item__title span {
  font-size: 29.93px;
  font-weight: 700;
  display: block;
  line-height: 100px;
  background-color: #dddddd;
  border-radius: 21px 21px 0 0;
  padding: 0 20px;
}
.learnGooglePlay__item__content {
  padding: 0 21px;
}
.learnGooglePlay__item__content h1,
.learnGooglePlay__item__content h2,
.learnGooglePlay__item__content h3,
.learnGooglePlay__item__content h4,
.learnGooglePlay__item__content h5,
.learnGooglePlay__item__content h6,
.learnGooglePlay__item__content p {
  margin: 40px 0;
  color: #000;
  font-size: 23.29px;
  font-weight: 700;
  border-radius: 30px;
  padding: 0 21px;
}
.learnGooglePlay__item__content ul li {
  width: 100%;
  margin-bottom: 40px;
}
.learnGooglePlay__item__content ul li span:first-child {
  background-color: #f7de0d;
  color: #000;
  font-size: 23.29px;
  font-weight: 700;
  border-radius: 30px;
  padding: 0 10px;
  margin-left: 22px;
}
.learnGooglePlay__item__content ul li span:last-child {
  color: #000;
  font-size: 23.29px;
  font-weight: 700;
}
.learnGooglePlay__item__content ul li img {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  object-fit: contain;
  padding: 0 21px;
}
.learnGooglePlay__item__logo {
  position: absolute;
  top: 0;
  left: 0;
}
.learnGooglePlay__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 45px;
  padding: 0 20px;
}
.learnGooglePlay__title h1 {
  font-size: 29.93px;
  font-weight: 700;
  margin: 0;
}
.learnGooglePlay__search form {
  background-color: #d3d3d3;
  border-radius: 22px;
  padding: 15px 0;
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  justify-content: center;
  flex-direction: column;
}
.learnGooglePlay__search form .form-group {
  width: 100%;
  max-width: 820px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.learnGooglePlay__search form input {
  display: block;
  width: 100%;
  max-width: 820px;
  flex: 0 0 820px;
  line-height: 72px;
  color: #6c6c6c;
  background-color: #fff;
  border-radius: 0px 21px 21px 0px;
  font-size: 20.23px;
  padding: 0 40px;
}
.learnGooglePlay__search form button {
  height: 72px;
  border-radius: 21px 0px 0px 21px;
  padding: 0 33px;
  font-size: 27.47px;
  background-color: #f7de0d;
  color: #000;
  font-weight: 500;
}

[data-theme=dark] .learnGooglePlay__item {
  background-color: #0f0b3c;
}
[data-theme=dark] .learnGooglePlay__item__title span {
  background-color: #3b426b;
  color: #fff;
}
[data-theme=dark] .learnGooglePlay__item__content h1,
[data-theme=dark] .learnGooglePlay__item__content h2,
[data-theme=dark] .learnGooglePlay__item__content h3,
[data-theme=dark] .learnGooglePlay__item__content h4,
[data-theme=dark] .learnGooglePlay__item__content h5,
[data-theme=dark] .learnGooglePlay__item__content h6,
[data-theme=dark] .learnGooglePlay__item__content p {
  color: #fff;
}
[data-theme=dark] .learnGooglePlay__item__content ul li span:last-child {
  color: #fff;
}
[data-theme=dark] .learnGooglePlay__breadcrumb a {
  color: #c7c5ee;
}
[data-theme=dark] .learnGooglePlay__breadcrumb a:after {
  color: #c7c5ee;
}
[data-theme=dark] .learnGooglePlay__breadcrumb span {
  color: #c7c5ee;
}
[data-theme=dark] .learnGooglePlay__title h1 {
  color: #c7c5ee;
}
[data-theme=dark] .learnGooglePlay__search form {
  background-color: #0f0b3c;
}
[data-theme=dark] .learnGooglePlay__search form input {
  color: #c7c5ee;
  background-color: #3b426b;
}
[data-theme=dark] .learnGooglePlay__search form input::placeholder {
  color: #c7c5ee;
}

@media (max-width: 1200px) {
  .learnGooglePlay__search form {
    padding: 15px;
  }
  .learnGooglePlay__search form .form-group {
    width: 100%;
  }
  .learnGooglePlay__search form input {
    width: 100%;
    flex: unset;
  }
}
@media (max-width: 992px) {
  .learnGooglePlay__item__content ul li img {
    padding: 0;
  }
  .learnGooglePlay__item__logo img {
    max-width: 210px;
  }
}
@media (max-width: 768px) {
  .learnGooglePlay__title {
    flex-direction: column-reverse;
    margin-bottom: 20px;
  }
  .learnGooglePlay__title h1 {
    margin-top: 25px;
    font-size: 22.14px;
  }
  .learnGooglePlay__item__content ul li {
    display: flex;
    align-items: center;
  }
  .learnGooglePlay__item__content ul li span:last-child {
    max-width: 80%;
  }
  .learnGooglePlay__item__logo img {
    max-width: 141px;
  }
}
@media (max-width: 576px) {
  .learnGooglePlay__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 63px;
    line-height: 20px;
  }
  .learnGooglePlay__breadcrumb a {
    font-size: 13.23px;
    line-height: 20px;
  }
  .learnGooglePlay__breadcrumb a::after {
    font-size: 13.23px;
  }
  .learnGooglePlay__breadcrumb span {
    font-size: 13.23px;
    white-space: no-wrap;
    line-height: 20px;
  }
  .learnGooglePlay__search form {
    padding: 20px 15px;
  }
  .learnGooglePlay__search form input {
    font-size: 13px;
    line-height: 50px;
  }
  .learnGooglePlay__search form button {
    width: 60px;
    height: 50px;
    font-size: 13px;
    padding: 0 5px;
  }
  .learnGooglePlay__item__title {
    margin-top: 30px;
  }
  .learnGooglePlay__item__title span {
    font-size: 19.93px;
    line-height: 60px;
  }
  .learnGooglePlay__item__title h1 {
    font-size: 16.93px;
  }
  .learnGooglePlay__item__content h4 {
    font-size: 20px;
    padding: 0;
    margin: 20px 0;
  }
  .learnGooglePlay__item__content ul li span {
    font-size: 16px;
  }
  .learnGooglePlay__item__content ul li span:first-child {
    font-size: 16px;
    margin-left: 12px;
    white-space: nowrap;
  }
  .learnGooglePlay__item__content ul li span:last-child {
    font-size: 16px;
  }
  .learnGooglePlay__item__logo img {
    max-width: 110px;
  }
}
.gps {
  padding: 24px 0 80px;
}
.gps__crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #6b6880;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gps__crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b6880;
  text-decoration: none;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #ebe6f5;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.gps__crumbs a:hover {
  color: #7c3aed;
  border-color: #c4b5fd;
  background: #f3f0ff;
}
.gps__crumbs a svg {
  color: #7c3aed;
}
.gps__crumbs span {
  font-weight: 800;
  color: #1a1a2e;
  padding: 4px 10px;
}
.gps__crumbs-sep {
  color: #c4b5fd;
  flex-shrink: 0;
}
.gps__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 32px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 50%, #fef9c3 100%);
  border: 1.5px solid #d1fae5;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: center;
}
.gps__hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.2), transparent 55%), radial-gradient(circle at 85% 80%, rgba(234, 179, 8, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.gps__hero-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.gps__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #065f46;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #a7f3d0;
}
.gps__hero-eyebrow svg {
  color: #10b981;
  fill: #10b981;
}
.gps__hero-title {
  font-size: 24px;
  font-weight: 900;
  color: #064e3b;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gps__hero-sub {
  font-size: 12.5px;
  color: #065f46;
  margin: 0 0 16px;
  line-height: 1.9;
  font-weight: 500;
  max-width: 640px;
}
.gps__search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.gps__search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  transition: all 0.25s ease;
}
.gps__search-field svg {
  color: #059669;
  flex-shrink: 0;
}
.gps__search-field input {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #064e3b;
  font-family: inherit;
}
.gps__search-field input::placeholder {
  color: #6b6880;
}
.gps__search-field input:focus {
  outline: none;
}
.gps__search-field:focus-within {
  background: #fff;
  border-color: #a7f3d0;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
.gps__search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  height: 44px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 18px -6px rgba(5, 150, 105, 0.45);
  font-family: inherit;
}
.gps__search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(5, 150, 105, 0.6);
}
.gps__hero-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gps__hero-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
}
.gps__hero-steps li div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gps__hero-steps li div strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #064e3b;
  letter-spacing: -0.01em;
}
.gps__hero-steps li div small {
  font-size: 10.5px;
  color: #065f46;
  font-weight: 600;
}
.gps__hero-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 4px 10px -2px rgba(5, 150, 105, 0.45);
}
.gps__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: flex-start;
}

.gps-prod {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(155deg, #ffffff 0%, #faf8fe 100%);
  border: 1.5px solid #ebe6f5;
  border-radius: 20px;
}
.gps-prod__cover {
  position: relative;
  width: 200px;
  height: 280px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 18px 36px -14px rgba(109, 40, 217, 0.5);
}
.gps-prod__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gps-prod__cover-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  background: rgba(15, 11, 72, 0.75);
  backdrop-filter: blur(8px);
  color: #fde68a;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  direction: ltr;
}
.gps-prod__cover-badge svg {
  color: #fde68a;
}
.gps-prod__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.gps-prod__kind {
  font-size: 10.5px;
  font-weight: 800;
  color: #7c3aed;
  background: #f3f0ff;
  padding: 3px 10px;
  border-radius: 20px;
  align-self: flex-start;
  letter-spacing: 0.3px;
  direction: ltr;
}
.gps-prod__title {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.gps-prod__fa {
  font-size: 13px;
  color: #6b6880;
  font-weight: 600;
  margin-top: -4px;
}
.gps-prod__meta {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gps-prod__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a4664;
  padding: 4px 10px;
  background: #faf9fd;
  border: 1px solid #ebe6f5;
  border-radius: 20px;
}
.gps-prod__meta-item svg {
  color: #7c3aed;
}
.gps-prod__desc {
  font-size: 12px;
  color: #4a4664;
  line-height: 1.9;
  margin: 4px 0 0;
  text-align: justify;
  font-weight: 500;
}
.gps-prod__price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px dashed #fcd34d;
  border-radius: 14px;
  margin-top: 6px;
}
.gps-prod__price-original, .gps-prod__price-rial {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gps-prod__price-original small, .gps-prod__price-rial small {
  font-size: 10px;
  color: #92400e;
  font-weight: 700;
}
.gps-prod__price-original strong, .gps-prod__price-rial strong {
  font-size: 18px;
  font-weight: 900;
  color: #78350f;
  letter-spacing: -0.01em;
  direction: ltr;
}
.gps-prod__price-original strong span, .gps-prod__price-rial strong span {
  font-size: 10.5px;
  font-weight: 600;
  color: #92400e;
}
.gps-prod__price-original strong {
  font-size: 20px;
}
.gps-prod__price-divider {
  width: 1.5px;
  height: 32px;
  background: linear-gradient(180deg, transparent, #fcd34d, transparent);
}
.gps-prod__price-rial {
  text-align: right;
  align-items: flex-end;
}
.gps-prod__price-rial strong {
  background: linear-gradient(135deg, #d97706, #92400e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gps-prod__badges {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gps-prod__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
}
.gps-prod__badge--green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.gps-prod__badge--blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.gps-form {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1.5px solid #ebe6f5;
  border-radius: 18px;
  box-shadow: 0 14px 32px -16px rgba(124, 58, 237, 0.15);
}
.gps-form__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed #ebe6f5;
}
.gps-form__head h3 {
  font-size: 14px;
  font-weight: 900;
  color: #1a1a2e;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.gps-form__head small {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 600;
  line-height: 1.5;
}
.gps-form__head-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.45);
  flex-shrink: 0;
}
.gps-form__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gps-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gps-form__field label {
  font-size: 11px;
  font-weight: 700;
  color: #4a4664;
  padding-right: 2px;
}
.gps-form__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #faf9fd;
  border: 1.5px solid #ebe6f5;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.gps-form__input > svg {
  color: #8a87a3;
  flex-shrink: 0;
}
.gps-form__input input {
  flex: 1;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  color: #1a1a2e;
  font-family: inherit;
}
.gps-form__input input::placeholder {
  color: #a5a2bd;
}
.gps-form__input input:focus {
  outline: none;
}
.gps-form__input:focus-within {
  border-color: #c4b5fd;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}
.gps-form__eye {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #8a87a3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.gps-form__eye:hover {
  background: #f3f0ff;
  color: #7c3aed;
}
.gps-form__hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 10.5px;
  color: #8a87a3;
  font-weight: 500;
  line-height: 1.6;
  padding: 0 2px;
}
.gps-form__hint svg {
  color: #a78bfa;
  flex-shrink: 0;
  margin-top: 2px;
}
.gps-form__tips {
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px dashed #fcd34d;
  border-radius: 10px;
}
.gps-form__tips strong {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: #78350f;
  margin-bottom: 6px;
}
.gps-form__tips ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gps-form__tips li {
  position: relative;
  padding-right: 16px;
  font-size: 10.5px;
  color: #92400e;
  font-weight: 500;
  line-height: 1.7;
}
.gps-form__tips li::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d97706;
}
.gps-form__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1.5px dashed #ebe6f5;
}
.gps-form__footer-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gps-form__footer-price small {
  font-size: 11px;
  color: #6b6880;
  font-weight: 700;
}
.gps-form__footer-price strong {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -0.01em;
  direction: ltr;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gps-form__footer-price strong span {
  font-size: 10.5px;
  color: #6b6880;
  font-weight: 600;
  -webkit-text-fill-color: #6b6880;
}
.gps-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 22px -6px rgba(5, 150, 105, 0.45);
  font-family: inherit;
}
.gps-form__submit svg {
  transition: transform 0.25s ease;
}
.gps-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(5, 150, 105, 0.6);
}
.gps-form__submit:hover svg {
  transform: translateX(-3px);
}

[data-theme=dark] .gps__crumbs a {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .gps__crumbs a:hover {
  background: #1a1648;
  color: #f1efff;
  border-color: #3d3485;
}
[data-theme=dark] .gps__crumbs span {
  color: #f1efff;
}
[data-theme=dark] .gps__crumbs-sep {
  color: #5a5790;
}
[data-theme=dark] .gps__hero {
  background: linear-gradient(135deg, #0a2e25 0%, #0d2540 50%, #2a1f10 100%);
  border-color: #1f5e4a;
}
[data-theme=dark] .gps__hero-bg {
  background: radial-gradient(circle at 15% 20%, rgba(52, 211, 153, 0.22), transparent 55%), radial-gradient(circle at 85% 80%, rgba(251, 191, 36, 0.15), transparent 55%);
}
[data-theme=dark] .gps__hero-eyebrow {
  background: rgba(10, 46, 37, 0.8);
  border-color: #1f5e4a;
  color: #6ee7b7;
}
[data-theme=dark] .gps__hero-title {
  background: linear-gradient(135deg, #a7f3d0 0%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme=dark] .gps__hero-sub {
  color: #6ee7b7;
}
[data-theme=dark] .gps__hero-steps li {
  background: rgba(10, 46, 37, 0.7);
  border-color: rgba(31, 94, 74, 0.5);
}
[data-theme=dark] .gps__hero-steps li div strong {
  color: #a7f3d0;
}
[data-theme=dark] .gps__hero-steps li div small {
  color: #6ee7b7;
}
[data-theme=dark] .gps__search-field {
  background: rgba(15, 12, 46, 0.7);
  border-color: #2a2560;
}
[data-theme=dark] .gps__search-field input {
  color: #f1efff;
}
[data-theme=dark] .gps__search-field input::placeholder {
  color: #8a87b3;
}
[data-theme=dark] .gps__search-field:focus-within {
  background: #15123a;
  border-color: #1f5e4a;
}
[data-theme=dark] .gps-prod {
  background: linear-gradient(155deg, #15123a 0%, #0f0c2e 100%);
  border-color: #2a2560;
}
[data-theme=dark] .gps-prod__kind {
  background: #1a1648;
  color: #c4b5fd;
}
[data-theme=dark] .gps-prod__title {
  color: #f1efff;
}
[data-theme=dark] .gps-prod__fa {
  color: #b6b3d9;
}
[data-theme=dark] .gps-prod__meta-item {
  background: #15123a;
  border-color: #2a2560;
  color: #b6b3d9;
}
[data-theme=dark] .gps-prod__meta-item svg {
  color: #a78bfa;
}
[data-theme=dark] .gps-prod__desc {
  color: #b6b3d9;
}
[data-theme=dark] .gps-prod__price {
  background: linear-gradient(135deg, #2a1f10 0%, #1a1308 100%);
  border-color: #4a2c10;
}
[data-theme=dark] .gps-prod__price-original small {
  color: #fcd34d;
}
[data-theme=dark] .gps-prod__price-original strong {
  color: #fde68a;
}
[data-theme=dark] .gps-prod__price-rial small {
  color: #fcd34d;
}
[data-theme=dark] .gps-prod__badge--green {
  background: #0a2e25;
  color: #34d399;
  border-color: #1f5e4a;
}
[data-theme=dark] .gps-prod__badge--blue {
  background: #0d2540;
  color: #93c5fd;
  border-color: #1e3a5f;
}
[data-theme=dark] .gps-form {
  background: #15123a;
  border-color: #2a2560;
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .gps-form__head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .gps-form__head h3 {
  color: #f1efff;
}
[data-theme=dark] .gps-form__head small {
  color: #b6b3d9;
}
[data-theme=dark] .gps-form__field label {
  color: #b6b3d9;
}
[data-theme=dark] .gps-form__input {
  background: #0d0b32;
  border-color: #2a2560;
}
[data-theme=dark] .gps-form__input input {
  color: #f1efff;
}
[data-theme=dark] .gps-form__input input::placeholder {
  color: #5a5790;
}
[data-theme=dark] .gps-form__input:focus-within {
  background: #1a1648;
}
[data-theme=dark] .gps-form__hint {
  color: #8a87b3;
}
[data-theme=dark] .gps-form__hint svg {
  color: #a78bfa;
}
[data-theme=dark] .gps-form__tips {
  background: #2a1f10;
  border-color: #4a2c10;
}
[data-theme=dark] .gps-form__tips strong {
  color: #fde68a;
}
[data-theme=dark] .gps-form__tips li {
  color: #fcd34d;
}
[data-theme=dark] .gps-form__tips li::before {
  background: #fbbf24;
}
[data-theme=dark] .gps-form__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .gps-form__footer-price small {
  color: #b6b3d9;
}
[data-theme=dark] .gps-form__footer-price strong span {
  color: #b6b3d9;
  -webkit-text-fill-color: #b6b3d9;
}

@media (max-width: 992px) {
  .gps__hero {
    grid-template-columns: 1fr;
  }
  .gps__grid {
    grid-template-columns: 1fr;
  }
  .gps-form {
    position: static;
  }
}
@media (max-width: 576px) {
  .gps__hero {
    padding: 20px;
  }
  .gps__hero-title {
    font-size: 19px;
  }
  .gps-prod {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gps-prod__cover {
    width: 140px;
    height: 200px;
    margin: 0 auto;
  }
  .gps-prod__title {
    font-size: 18px;
  }
  .gps-prod__price {
    grid-template-columns: 1fr;
    text-align: right;
  }
  .gps-prod__price-divider {
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #fcd34d, transparent);
  }
  .gps-prod__price-rial {
    align-items: flex-start;
    text-align: right;
  }
}
.googlePlaySingle,
.learnGooglePlay {
  display: none;
}

/* google-play */
/* arzi */
/* ══════════════════════════════════════════════════════
   Payment Page — Modern Redesign
══════════════════════════════════════════════════════ */
/* ── Hero ──────────────────────────────────────────── */
.pay {
  padding: 32px 0 60px;
  background: #f7f6fc;
  min-height: calc(100vh - 300px);
}

.pay__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0f0b48 0%, #372ced 100%);
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.pay__hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.pay__title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 6px;
}

.pay__subtitle {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.75;
  margin: 0;
}

.pay__hero-badges {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.pay__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.pay__badge svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Grid: Form + Sidebar ──────────────────────────── */
.pay__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.pay__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Cards ─────────────────────────────────────────── */
.pay__card {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 2px 12px rgba(15, 11, 72, 0.04);
}

.pay__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.pay__card-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b52f0, #908af5);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(91, 82, 240, 0.2);
}

.pay__card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f0b48;
  margin: 0;
}
.pay__card-title small {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.4);
}

/* ── Currency Selector ─────────────────────────────── */
.pay__currencies {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.pay__cur {
  cursor: pointer;
}
.pay__cur input {
  display: none;
}
.pay__cur-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(15, 11, 72, 0.04);
  border: 1.5px solid rgba(15, 11, 72, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: #0f0b48;
  transition: all 0.22s ease;
  user-select: none;
}
.pay__cur-flag {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
}
.pay__cur input:checked + .pay__cur-pill {
  background: #5b52f0;
  border-color: #5b52f0;
  color: #fff;
  box-shadow: 0 4px 16px rgba(91, 82, 240, 0.3);
}
.pay__cur:hover .pay__cur-pill {
  border-color: rgba(91, 82, 240, 0.3);
}

/* ── Form Fields ───────────────────────────────────── */
.pay__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.pay__row:last-child {
  margin-bottom: 0;
}

.pay__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pay__field--full {
  grid-column: 1/-1;
}

.pay__label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.65);
}

.pay__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pay__input,
.pay__select,
.pay__textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid rgba(15, 11, 72, 0.1);
  border-radius: 14px;
  background: rgba(15, 11, 72, 0.025);
  font-size: 13.5px;
  font-weight: 500;
  color: #0f0b48;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pay__input::placeholder,
.pay__select::placeholder,
.pay__textarea::placeholder {
  color: rgba(15, 11, 72, 0.3);
}
.pay__input:focus,
.pay__select:focus,
.pay__textarea:focus {
  border-color: rgba(91, 82, 240, 0.45);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.08);
  background: #fff;
}

.pay__textarea {
  height: auto;
  padding: 14px 16px;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.6;
}

.pay__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f0b48' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 36px;
  cursor: pointer;
}

.pay__input-suffix {
  position: absolute;
  left: 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(15, 11, 72, 0.35);
  pointer-events: none;
}

.pay__input-wrap .pay__input {
  padding-left: 50px;
}

/* ── File Upload ───────────────────────────────────── */
.pay__dropzone input {
  display: none;
}

.pay__dropzone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 24px;
  border: 2px dashed rgba(91, 82, 240, 0.25);
  border-radius: 16px;
  background: rgba(91, 82, 240, 0.03);
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
}
.pay__dropzone-label svg {
  color: #5b52f0;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.pay__dropzone-label:hover {
  border-color: rgba(91, 82, 240, 0.45);
  background: rgba(91, 82, 240, 0.06);
}
.pay__dropzone-label:hover svg {
  opacity: 0.8;
}

.pay__dropzone-text {
  font-size: 14px;
  font-weight: 600;
  color: #0f0b48;
}

.pay__dropzone-hint {
  font-size: 11.5px;
  color: rgba(15, 11, 72, 0.4);
}

/* ── Sidebar: Summary ──────────────────────────────── */
.pay__sidebar {
  position: sticky;
  top: 24px;
}

.pay__summary {
  background: #fff;
  border: 1px solid rgba(15, 11, 72, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(15, 11, 72, 0.04);
}

.pay__summary-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f0b48;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 11, 72, 0.07);
}

.pay__summary-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(15, 11, 72, 0.1);
}

.pay__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.6);
}

.pay__summary-val {
  font-weight: 700;
  color: #0f0b48;
}
.pay__summary-val ins {
  text-decoration: none;
}
.pay__summary-val small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
  margin-right: 3px;
}

.pay__summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(91, 82, 240, 0.08) 0%, rgba(91, 82, 240, 0.04) 100%);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f0b48;
}

.pay__summary-price {
  font-size: 18px;
  font-weight: 800;
  color: #5b52f0;
}
.pay__summary-price ins {
  text-decoration: none;
}
.pay__summary-price small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  margin-right: 3px;
}

.pay__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  background: linear-gradient(120deg, #00b389 0%, #00d4a0 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0, 179, 137, 0.3);
  margin-bottom: 14px;
}
.pay__submit svg {
  flex-shrink: 0;
}
.pay__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 179, 137, 0.4);
}
.pay__submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 179, 137, 0.25);
}

.pay__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(15, 11, 72, 0.4);
}
.pay__trust svg {
  color: #00b389;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   Dark Mode
══════════════════════════════════════════════════════ */
[data-theme=dark] .pay {
  background: #0e0c1e;
}
[data-theme=dark] .pay__hero {
  background: linear-gradient(135deg, #140e5e 0%, #5b52f0 100%);
}
[data-theme=dark] .pay__card {
  background: #161430;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
[data-theme=dark] .pay__card-title {
  color: #e4e1ff;
}
[data-theme=dark] .pay__card-title small {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .pay__label {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .pay__input,
[data-theme=dark] .pay__select,
[data-theme=dark] .pay__textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e4e1ff;
}
[data-theme=dark] .pay__input::placeholder,
[data-theme=dark] .pay__select::placeholder,
[data-theme=dark] .pay__textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .pay__input:focus,
[data-theme=dark] .pay__select:focus,
[data-theme=dark] .pay__textarea:focus {
  border-color: rgba(91, 82, 240, 0.5);
  box-shadow: 0 0 0 3px rgba(91, 82, 240, 0.12);
  background: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .pay__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e4e1ff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme=dark] .pay__input-suffix {
  color: rgba(255, 255, 255, 0.25);
}
[data-theme=dark] .pay__cur-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme=dark] .pay__cur input:checked + .pay__cur-pill {
  background: #5b52f0;
  border-color: #5b52f0;
  color: #fff;
}
[data-theme=dark] .pay__dropzone-label {
  border-color: rgba(91, 82, 240, 0.2);
  background: rgba(91, 82, 240, 0.04);
}
[data-theme=dark] .pay__dropzone-label:hover {
  border-color: rgba(91, 82, 240, 0.4);
  background: rgba(91, 82, 240, 0.08);
}
[data-theme=dark] .pay__dropzone-text {
  color: #e4e1ff;
}
[data-theme=dark] .pay__dropzone-hint {
  color: rgba(255, 255, 255, 0.3);
}
[data-theme=dark] .pay__summary {
  background: #161430;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
[data-theme=dark] .pay__summary-title {
  color: #e4e1ff;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .pay__summary-row {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme=dark] .pay__summary-val {
  color: #e4e1ff;
}
[data-theme=dark] .pay__summary-total {
  background: rgba(91, 82, 240, 0.1);
  color: #e4e1ff;
}
[data-theme=dark] .pay__summary-price {
  color: #9e98f6;
}
[data-theme=dark] .pay__trust {
  color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════
   Responsive
══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .pay__grid {
    grid-template-columns: 1fr;
  }
  .pay__sidebar {
    position: static;
  }
  .pay__hero {
    flex-direction: column;
    text-align: center;
  }
  .pay__hero-badges {
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .pay {
    padding: 16px 0 32px;
  }
  .pay__hero {
    padding: 18px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    gap: 14px;
  }
  .pay__title {
    font-size: 18px;
    margin-bottom: 3px;
  }
  .pay__subtitle {
    font-size: 11.5px;
  }
  .pay__hero-badges {
    width: 100%;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .pay__hero-badges::-webkit-scrollbar {
    display: none;
  }
  .pay__badge {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 10.5px;
    border-radius: 9px;
  }
  .pay__badge svg {
    width: 14px;
    height: 14px;
  }
  .pay__grid {
    gap: 14px;
  }
  .pay__main {
    gap: 14px;
  }
  .pay__card {
    padding: 14px;
    border-radius: 14px;
  }
  .pay__card-head {
    margin-bottom: 14px;
    gap: 10px;
  }
  .pay__card-step {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12px;
  }
  .pay__card-title {
    font-size: 13.5px;
  }
  .pay__card-title small {
    font-size: 10.5px;
  }
  .pay__currencies {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    margin: 0 -14px 14px;
    padding: 2px 14px;
  }
  .pay__currencies::-webkit-scrollbar {
    display: none;
  }
  .pay__cur {
    flex-shrink: 0;
  }
  .pay__cur-pill {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
    gap: 6px;
  }
  .pay__cur-flag {
    width: 18px;
    height: 13px;
  }
  .pay__row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .pay__field {
    gap: 5px;
  }
  .pay__label {
    font-size: 11.5px;
  }
  .pay__input,
.pay__select,
.pay__textarea {
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .pay__input-suffix {
    font-size: 11.5px;
    padding: 0 12px;
  }
  .pay__dropzone-label {
    padding: 20px 14px;
    gap: 8px;
  }
  .pay__dropzone-label svg {
    width: 28px;
    height: 28px;
  }
  .pay__dropzone-text {
    font-size: 12px;
  }
  .pay__dropzone-hint {
    font-size: 10px;
  }
  .pay__sidebar {
    position: static;
  }
  .pay__summary {
    padding: 16px;
    border-radius: 14px;
  }
  .pay__summary-title {
    font-size: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .pay__summary-rows {
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
  }
  .pay__summary-row {
    font-size: 12px;
  }
  .pay__summary-val small {
    font-size: 10px;
  }
  .pay__summary-total {
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .pay__summary-price {
    font-size: 16px;
  }
  .pay__summary-price small {
    font-size: 10.5px;
  }
  .pay__submit {
    height: 46px;
    font-size: 14px;
    border-radius: 12px;
  }
  .pay__submit svg {
    width: 16px;
    height: 16px;
  }
  .pay__trust {
    font-size: 10.5px;
  }
}
@media (max-width: 420px) {
  .pay__title {
    font-size: 16px;
  }
  .pay__subtitle {
    font-size: 11px;
  }
  .pay__card-title {
    font-size: 13px;
  }
  .pay__cur-pill {
    padding: 7px 12px;
    font-size: 11.5px;
  }
  .pay__summary-price {
    font-size: 15px;
  }
}
/* ── Floating contact widget ── */
@keyframes fab-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.9);
    opacity: 0;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes fab-option-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.fab-contact {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.fab-contact__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.fab-contact__option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 11, 72, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: fab-option-in 0.35s ease backwards;
}
.fab-contact__option:hover {
  transform: translateX(4px);
  box-shadow: 0 12px 28px rgba(15, 11, 72, 0.25);
}
.fab-contact__option:nth-child(1) {
  animation-delay: 0.08s;
}
.fab-contact__option:nth-child(2) {
  animation-delay: 0.16s;
}
.fab-contact__label {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f1a4e;
  white-space: nowrap;
}
.fab-contact__ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.fab-contact__option--chat .fab-contact__ico {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}
.fab-contact__option--call .fab-contact__ico {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
.fab-contact__toggle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
  padding: 0;
}
.fab-contact__toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.65), 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.fab-contact__toggle-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.25s ease, transform 0.3s ease;
  line-height: 0;
}
.fab-contact__toggle-ico--close {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-90deg);
}
.fab-contact__pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #7c3aed;
  animation: fab-pulse 2.2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.fab-contact.is-open .fab-contact__options {
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
}
.fab-contact.is-open .fab-contact__toggle {
  transform: rotate(180deg);
}
.fab-contact.is-open .fab-contact__toggle .fab-contact__toggle-ico--default {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(90deg);
}
.fab-contact.is-open .fab-contact__toggle .fab-contact__toggle-ico--close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0);
}
.fab-contact.is-open .fab-contact__pulse {
  display: none;
}

@media (max-width: 767px) {
  .fab-contact {
    display: none !important;
  }
}
[data-theme=dark] .fab-contact__option {
  background: #1a1740;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .fab-contact__option:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .fab-contact__label {
  color: #e4e1ff;
}
[data-theme=dark] .fab-contact__toggle {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* ── Responsive cleanup (negate legacy negative-margin hacks) ── */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

.wrapper {
  overflow-x: clip;
}

@media (max-width: 767px) {
  *,
*::before,
*::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  *::-webkit-scrollbar,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
  .icon-denta {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .discount {
    margin-top: 0 !important;
    padding-top: 48px !important;
  }
  .discount__header {
    margin-bottom: 24px !important;
  }
  .pre-order {
    margin-top: 0 !important;
  }
}
@media (max-width: 992px) {
  .discount {
    padding: 36px 0 !important;
  }
  .pre-order {
    margin-top: 0 !important;
  }
}
@media (max-width: 767px) {
  .feautures,
.top-product,
.product,
.discount,
.quick-services,
.ai-deals,
.ai-news,
.arzi-promo,
.newonvan,
.journal,
.testimonials,
.pre-order,
.categories-intro,
.all-services,
.flash-deal,
.rel-ai,
.product-ai {
    margin: 0 0 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .discount {
    padding: 22px 0 !important;
  }
  .arzi-promo {
    padding: 24px 0 !important;
  }
  .ai-deals {
    padding: 22px 0 !important;
  }
  .testimonials {
    padding: 22px 0 !important;
  }
  .quick-services {
    padding: 28px 0 32px !important;
  }
  .all-services {
    padding: 28px 0 32px !important;
  }
  .newonvan {
    padding: 22px 0 !important;
  }
  .ai-news {
    padding: 22px 0 !important;
  }
  .product {
    padding: 22px 0 24px !important;
  }
  .product__header,
.discount__header,
.quick-services__header,
.ai-deals__header,
.ai-news__header,
.newonvan__header,
.journal__header,
.rel-ai__head,
.testimonials__header,
.categories-intro__header,
.all-services__header {
    margin-bottom: 12px !important;
  }
  .top-product {
    margin-top: 10px !important;
  }
  .product__header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .product__header-title {
    font-size: 16px !important;
  }
  .product__header-more {
    margin-right: auto;
    font-size: 11.5px !important;
  }
  .product__header-logo img {
    width: 28px !important;
    height: 28px !important;
  }
  .product__header-sort {
    flex-basis: 100%;
    order: 3;
  }
  .discount__header {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .discount__header-info-title-big {
    font-size: 16px !important;
  }
  .discount__header-info-title {
    font-size: 12px !important;
  }
  .discount__header-more {
    margin-right: auto !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }
}
@media (max-width: 576px) {
  .discount {
    padding: 24px 0 !important;
  }
  .container {
    padding: 0 14px;
  }
}
/* ── Dark mode global contrast overrides — MUST BE LAST ── */
[data-theme=dark] body, [data-theme=dark] p, [data-theme=dark] span, [data-theme=dark] li, [data-theme=dark] td, [data-theme=dark] th, [data-theme=dark] label,
[data-theme=dark] h1, [data-theme=dark] h2, [data-theme=dark] h3, [data-theme=dark] h4, [data-theme=dark] h5, [data-theme=dark] h6,
[data-theme=dark] .site-footer, [data-theme=dark] .newonvan, [data-theme=dark] .ai-news, [data-theme=dark] .ai-deals,
[data-theme=dark] .product, [data-theme=dark] .discount, [data-theme=dark] .feautures, [data-theme=dark] .category, [data-theme=dark] .quick-services,
[data-theme=dark] .panel, [data-theme=dark] .cart, [data-theme=dark] .single-top, [data-theme=dark] .blog, [data-theme=dark] .faq {
  color: #e4e1ff;
}
[data-theme=dark] h1, [data-theme=dark] h2, [data-theme=dark] h3, [data-theme=dark] h4, [data-theme=dark] h5, [data-theme=dark] h6,
[data-theme=dark] strong, [data-theme=dark] b {
  color: #f1efff;
}
[data-theme=dark] a:not([class]) {
  color: #e4e1ff;
}
[data-theme=dark] a:not([class]):hover {
  color: #a78bfa;
}
[data-theme=dark] .site-header-wrapper,
[data-theme=dark] .site-header__top,
[data-theme=dark] .site-header__subnav,
[data-theme=dark] .site-header__center,
[data-theme=dark] .site-header__search {
  color: #e4e1ff;
}
[data-theme=dark] .sh-top__links a,
[data-theme=dark] .sh-top__contact {
  color: #e4e1ff !important;
}
[data-theme=dark] .sh-top__links a:hover,
[data-theme=dark] .sh-top__contact:hover {
  color: #fff !important;
}
[data-theme=dark] .sh-top__contact {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .sh-top__contact:hover {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme=dark] .sh-top__contact svg {
  opacity: 0.85;
}
[data-theme=dark] .sh-subnav__auth-link {
  color: #e4e1ff !important;
}
[data-theme=dark] .sh-subnav__auth-link:hover {
  background: rgba(167, 139, 250, 0.14);
  color: #fff !important;
}
[data-theme=dark] .sh-subnav__list a {
  color: #b6b3d9 !important;
}
[data-theme=dark] .sh-subnav__list a:hover {
  color: #fff !important;
}
[data-theme=dark] .sh-subnav__list li::after {
  color: rgba(255, 255, 255, 0.22);
}
[data-theme=dark] .sh-center__nav a {
  color: #e4e1ff !important;
}
[data-theme=dark] .sh-center__nav a svg {
  opacity: 0.8;
}
[data-theme=dark] .sh-center__nav a:hover {
  color: #fff !important;
  background: rgba(167, 139, 250, 0.14);
}
[data-theme=dark] .sh-center__nav a:hover svg {
  opacity: 1;
}
[data-theme=dark] .sh-center__auth a {
  color: #e4e1ff !important;
}
[data-theme=dark] .sh-center__auth a:hover {
  color: #fff !important;
}
[data-theme=dark] .sh-nav__cat-btn {
  color: #fff !important;
}
[data-theme=dark] .sh-nav__cat-btn:hover {
  filter: brightness(1.15);
}
[data-theme=dark] .sh-nav__megamenu,
[data-theme=dark] .megamenu {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
  color: #e4e1ff !important;
}
[data-theme=dark] .megamenu__inner {
  background: transparent !important;
}
[data-theme=dark] .mm-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-left-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme=dark] .mm-content,
[data-theme=dark] .mm-panel {
  background: transparent !important;
  color: #e4e1ff !important;
}
[data-theme=dark] .mm-cat {
  background: transparent !important;
}
[data-theme=dark] .mm-cat:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .mm-cat.active {
  background: rgba(167, 139, 250, 0.14) !important;
}
[data-theme=dark] .mm-cat__label {
  color: #e4e1ff !important;
}
[data-theme=dark] .mm-cat.active .mm-cat__label, [data-theme=dark] .mm-cat:hover .mm-cat__label {
  color: #fff !important;
}
[data-theme=dark] .mm-cat__ico {
  background: rgba(255, 255, 255, 0.06);
  color: #b6b3d9;
}
[data-theme=dark] .mm-cat.active .mm-cat__ico, [data-theme=dark] .mm-cat:hover .mm-cat__ico {
  background: rgba(167, 139, 250, 0.2);
  color: #fff;
}
[data-theme=dark] .mm-panel__viewall {
  color: #a78bfa !important;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.1) 0%, transparent 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme=dark] .mm-panel__viewall:hover {
  background: rgba(167, 139, 250, 0.14) !important;
  color: #fff !important;
}
[data-theme=dark] .mm-accordion__item {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .mm-accordion__head {
  color: #e4e1ff !important;
  background: transparent !important;
}
[data-theme=dark] .mm-accordion__head:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}
[data-theme=dark] .mm-accordion__ico {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #b6b3d9 !important;
}
[data-theme=dark] .is-open > .mm-accordion__head {
  background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.14) 100%) !important;
  color: #fff !important;
}
[data-theme=dark] .is-open .mm-accordion__ico {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #fff !important;
}
[data-theme=dark] .mm-accordion__body {
  background: transparent !important;
}
[data-theme=dark] .mm-accordion__body a {
  color: #e4e1ff !important;
}
[data-theme=dark] .mm-accordion__body a::before {
  background: rgba(167, 139, 250, 0.7) !important;
}
[data-theme=dark] .mm-accordion__body a:hover {
  background: rgba(167, 139, 250, 0.14) !important;
  color: #fff !important;
}
[data-theme=dark] .sh-search,
[data-theme=dark] .sh-search__bar {
  color: #e4e1ff;
}
[data-theme=dark] .sh-search input, [data-theme=dark] .sh-search input::placeholder,
[data-theme=dark] .sh-search__bar input,
[data-theme=dark] .sh-search__bar input::placeholder {
  color: #b6b3d9;
}
[data-theme=dark] .sh-search input,
[data-theme=dark] .sh-search__bar input {
  color: #e4e1ff;
}
[data-theme=dark] .sh-search input::placeholder,
[data-theme=dark] .sh-search__bar input::placeholder {
  color: #8a87b3;
}
[data-theme=dark] .sh-search__bar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .sh-search__bar:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(167, 139, 250, 0.45);
}
[data-theme=dark] .sh-search__lens {
  color: #b6b3d9;
}
[data-theme=dark] .sh-search__adv {
  color: #b6b3d9;
}
[data-theme=dark] .sh-search__adv:hover {
  color: #fff;
}
[data-theme=dark] .sh-search__panel,
[data-theme=dark] .ajax-search {
  background: #13112a;
  border-color: rgba(255, 255, 255, 0.08);
  color: #e4e1ff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
[data-theme=dark] .sh-search__group-label {
  color: #b6b3d9;
}
[data-theme=dark] .sh-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #e4e1ff;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .sh-chip:hover {
  background: rgba(167, 139, 250, 0.14);
  color: #fff;
  border-color: rgba(167, 139, 250, 0.5);
}
[data-theme=dark] .sh-result {
  color: #e4e1ff;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .sh-result:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .sh-result__title {
  color: #f1efff;
}
[data-theme=dark] .sh-result__meta small, [data-theme=dark] .sh-result__tag span {
  color: #b6b3d9;
}
[data-theme=dark] .sh-center__buy,
[data-theme=dark] .sh-center__panel-btn {
  color: #fff !important;
}
[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
[data-theme=dark] textarea,
[data-theme=dark] select {
  color: #e4e1ff;
}
[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])::placeholder,
[data-theme=dark] textarea::placeholder,
[data-theme=dark] select::placeholder {
  color: #8a87b3;
}
[data-theme=dark] .product__item-name-en,
[data-theme=dark] .product__item-info-title,
[data-theme=dark] .discount__item-info-title,
[data-theme=dark] .ai-deals__item-title,
[data-theme=dark] .newonvan__item-title {
  color: #f1efff !important;
}
[data-theme=dark] .product__item-name-fa,
[data-theme=dark] .discount__item-footer-price .unit,
[data-theme=dark] .ai-deals__item-price-old,
[data-theme=dark] .newonvan__item-tag {
  color: #b6b3d9 !important;
}
[data-theme=dark] .text-muted,
[data-theme=dark] .muted,
[data-theme=dark] small.muted {
  color: #b6b3d9 !important;
}
[data-theme=dark] .site-footer__links li a {
  color: #b6b3d9;
}
[data-theme=dark] .site-footer__links li a:hover {
  color: #fff;
}
[data-theme=dark] .site-footer__col-title {
  color: #f1efff;
}
[data-theme=dark] .breadcrumb a,
[data-theme=dark] .breadcrumb span,
[data-theme=dark] .breadcromb a,
[data-theme=dark] .breadcromb span {
  color: #b6b3d9;
}
[data-theme=dark] .breadcrumb a:hover,
[data-theme=dark] .breadcromb a:hover {
  color: #fff;
}
[data-theme=dark] .btn--ghost, [data-theme=dark] .btn--outline,
[data-theme=dark] .button--ghost,
[data-theme=dark] .button--outline {
  color: #e4e1ff;
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme=dark] .btn--ghost:hover, [data-theme=dark] .btn--outline:hover,
[data-theme=dark] .button--ghost:hover,
[data-theme=dark] .button--outline:hover {
  color: #fff;
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.5);
}
[data-theme=dark] .edu-intro__wrap {
  background: linear-gradient(135deg, #13112a 0%, #1a1733 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .edu-intro__title {
  color: #f1efff !important;
}
[data-theme=dark] .edu-intro__subtitle,
[data-theme=dark] .edu-intro__feature {
  color: #b6b3d9 !important;
}
[data-theme=dark] .edu-intro__feature {
  color: #e4e1ff !important;
}
[data-theme=dark] .edu-intro__stat {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .edu-intro__stat-num {
  color: #f1efff !important;
}
[data-theme=dark] .edu-intro__stat-label {
  color: #b6b3d9 !important;
}
[data-theme=dark] .edu-intro__brands {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme=dark] .edu-intro__brands-label {
  color: #b6b3d9 !important;
}
[data-theme=dark] .edu-intro__brand {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e4e1ff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .edu-intro__cta--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e4e1ff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme=dark] .edu-intro__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
[data-theme=dark] .edu-sites__title,
[data-theme=dark] .edu-card__name,
[data-theme=dark] .edu-card__price-val {
  color: #f1efff !important;
}
[data-theme=dark] .edu-sites__subtitle,
[data-theme=dark] .edu-card__desc,
[data-theme=dark] .edu-card__price-from,
[data-theme=dark] .edu-card__price-val span,
[data-theme=dark] .edu-card__meta-item span {
  color: #b6b3d9 !important;
}
[data-theme=dark] .edu-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .edu-card__meta-item {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme=dark] .edu-card__price-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .adobe-products__title,
[data-theme=dark] .ad-card__name,
[data-theme=dark] .ad-card__price strong {
  color: #f1efff !important;
}
[data-theme=dark] .adobe-products__subtitle,
[data-theme=dark] .ad-card__desc,
[data-theme=dark] .ad-card__specs li,
[data-theme=dark] .ad-card__price del,
[data-theme=dark] .ad-card__price strong span {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ad-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .ad-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .adobe-products__filter {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .adobe-products__filter-btn {
  color: #b6b3d9 !important;
}
[data-theme=dark] .adobe-products__filter-btn--active {
  background: #1f1a3d !important;
  color: #f1efff !important;
}
[data-theme=dark] .ms-products__title,
[data-theme=dark] .ms-card__price strong {
  color: #f1efff !important;
}
[data-theme=dark] .ms-products__subtitle,
[data-theme=dark] .ms-card__desc,
[data-theme=dark] .ms-card__features li,
[data-theme=dark] .ms-card__price del,
[data-theme=dark] .ms-card__price strong span {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ms-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .ms-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .ms-products__filter {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .ms-products__filter-btn {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ms-products__filter-btn--active {
  background: #1f1a3d !important;
  color: #f1efff !important;
}
[data-theme=dark] .av-products__title,
[data-theme=dark] .av-card__name,
[data-theme=dark] .av-card__price strong {
  color: #f1efff !important;
}
[data-theme=dark] .av-products__subtitle,
[data-theme=dark] .av-card__desc,
[data-theme=dark] .av-card__p-label,
[data-theme=dark] .av-card__price del,
[data-theme=dark] .av-card__price strong span {
  color: #b6b3d9 !important;
}
[data-theme=dark] .av-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .av-card__protection {
  background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme=dark] .av-card__p-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .av-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .av-products__sort {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .av-products__sort select {
  color: #e4e1ff !important;
  background: transparent !important;
}
[data-theme=dark] .ai-tools__title,
[data-theme=dark] .ai-card__name,
[data-theme=dark] .ai-card__price strong {
  color: #f1efff !important;
}
[data-theme=dark] .ai-tools__subtitle,
[data-theme=dark] .ai-card__desc,
[data-theme=dark] .ai-card__type,
[data-theme=dark] .ai-card__stat,
[data-theme=dark] .ai-card__price del,
[data-theme=dark] .ai-card__price strong span {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ai-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .ai-card__type {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .ai-card__stat {
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme=dark] .ai-card__foot {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .ai-tools__tabs {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .ai-tools__tab {
  color: #b6b3d9 !important;
}
[data-theme=dark] .gc-cards__title,
[data-theme=dark] .gc-card__price strong {
  color: #f1efff !important;
}
[data-theme=dark] .gc-cards__subtitle,
[data-theme=dark] .gc-card__price span,
[data-theme=dark] .gc-card__price strong em {
  color: #b6b3d9 !important;
}
[data-theme=dark] .gc-card {
  background: #13112a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .gc-card__denoms > span {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e4e1ff !important;
}
[data-theme=dark] .gc-card__foot-price {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme=dark] .gc-cards__chips {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .gc-cards__chip {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ps-games__title {
  color: #f1efff !important;
}
[data-theme=dark] .ps-games__subtitle {
  color: #b6b3d9 !important;
}
[data-theme=dark] .ps-games__chips {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .ps-games__chip {
  color: #b6b3d9 !important;
}
[data-theme=dark] .pc-games__title {
  color: #f1efff !important;
}
[data-theme=dark] .pc-games__subtitle {
  color: #b6b3d9 !important;
}
[data-theme=dark] .pc-games__chips {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .pc-games__chip {
  color: #b6b3d9 !important;
}
[data-theme=dark] .mg-games__title {
  color: #f1efff !important;
}
[data-theme=dark] .mg-games__title-accent {
  color: #ff5585 !important;
}
[data-theme=dark] .mg-games__subtitle {
  color: #b6b3d9 !important;
}
[data-theme=dark] .mg-games__chips {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme=dark] .mg-games__chip {
  color: #b6b3d9 !important;
}
[data-theme=dark] .mg-games__chip--active {
  color: #ffd500 !important;
}