@charset "UTF-8";
/* External fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/* Core styles */
@import '../scss/bootstrap/bootstrap.min.css';
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Correct the line-height for all headings in Chrome mobile, Firefox,
 * iOS Safari, Microsoft Edge and IE.
 */
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
  -moz-appearance: button;
       appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-appearance: textfeild;
       appearance: textfeild;
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-appearance: textfeild;
       appearance: textfeild;
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.w-400 {
  max-width: 400px;
}

.w-401 {
  max-width: 401px;
}

.w-402 {
  max-width: 402px;
}

.w-403 {
  max-width: 403px;
}

.w-404 {
  max-width: 404px;
}

.w-405 {
  max-width: 405px;
}

.w-406 {
  max-width: 406px;
}

.w-407 {
  max-width: 407px;
}

.w-408 {
  max-width: 408px;
}

.w-409 {
  max-width: 409px;
}

.w-410 {
  max-width: 410px;
}

.w-411 {
  max-width: 411px;
}

.w-412 {
  max-width: 412px;
}

.w-413 {
  max-width: 413px;
}

.w-414 {
  max-width: 414px;
}

.w-415 {
  max-width: 415px;
}

.w-416 {
  max-width: 416px;
}

.w-417 {
  max-width: 417px;
}

.w-418 {
  max-width: 418px;
}

.w-419 {
  max-width: 419px;
}

.w-420 {
  max-width: 420px;
}

.w-421 {
  max-width: 421px;
}

.w-422 {
  max-width: 422px;
}

.w-423 {
  max-width: 423px;
}

.w-424 {
  max-width: 424px;
}

.w-425 {
  max-width: 425px;
}

.w-426 {
  max-width: 426px;
}

.w-427 {
  max-width: 427px;
}

.w-428 {
  max-width: 428px;
}

.w-429 {
  max-width: 429px;
}

.w-430 {
  max-width: 430px;
}

.w-431 {
  max-width: 431px;
}

.w-432 {
  max-width: 432px;
}

.w-433 {
  max-width: 433px;
}

.w-434 {
  max-width: 434px;
}

.w-435 {
  max-width: 435px;
}

.w-436 {
  max-width: 436px;
}

.w-437 {
  max-width: 437px;
}

.w-438 {
  max-width: 438px;
}

.w-439 {
  max-width: 439px;
}

.w-440 {
  max-width: 440px;
}

.w-441 {
  max-width: 441px;
}

.w-442 {
  max-width: 442px;
}

.w-443 {
  max-width: 443px;
}

.w-444 {
  max-width: 444px;
}

.w-445 {
  max-width: 445px;
}

.w-446 {
  max-width: 446px;
}

.w-447 {
  max-width: 447px;
}

.w-448 {
  max-width: 448px;
}

.w-449 {
  max-width: 449px;
}

.w-450 {
  max-width: 450px;
}

.w-451 {
  max-width: 451px;
}

.w-452 {
  max-width: 452px;
}

.w-453 {
  max-width: 453px;
}

.w-454 {
  max-width: 454px;
}

.w-455 {
  max-width: 455px;
}

.w-456 {
  max-width: 456px;
}

.w-457 {
  max-width: 457px;
}

.w-458 {
  max-width: 458px;
}

.w-459 {
  max-width: 459px;
}

.w-460 {
  max-width: 460px;
}

.w-461 {
  max-width: 461px;
}

.w-462 {
  max-width: 462px;
}

.w-463 {
  max-width: 463px;
}

.w-464 {
  max-width: 464px;
}

.w-465 {
  max-width: 465px;
}

.w-466 {
  max-width: 466px;
}

.w-467 {
  max-width: 467px;
}

.w-468 {
  max-width: 468px;
}

.w-469 {
  max-width: 469px;
}

.w-470 {
  max-width: 470px;
}

.w-471 {
  max-width: 471px;
}

.w-472 {
  max-width: 472px;
}

.w-473 {
  max-width: 473px;
}

.w-474 {
  max-width: 474px;
}

.w-475 {
  max-width: 475px;
}

.w-476 {
  max-width: 476px;
}

.w-477 {
  max-width: 477px;
}

.w-478 {
  max-width: 478px;
}

.w-479 {
  max-width: 479px;
}

.w-480 {
  max-width: 480px;
}

.w-481 {
  max-width: 481px;
}

.w-482 {
  max-width: 482px;
}

.w-483 {
  max-width: 483px;
}

.w-484 {
  max-width: 484px;
}

.w-485 {
  max-width: 485px;
}

.w-486 {
  max-width: 486px;
}

.w-487 {
  max-width: 487px;
}

.w-488 {
  max-width: 488px;
}

.w-489 {
  max-width: 489px;
}

.w-490 {
  max-width: 490px;
}

.w-491 {
  max-width: 491px;
}

.w-492 {
  max-width: 492px;
}

.w-493 {
  max-width: 493px;
}

.w-494 {
  max-width: 494px;
}

.w-495 {
  max-width: 495px;
}

.w-496 {
  max-width: 496px;
}

.w-497 {
  max-width: 497px;
}

.w-498 {
  max-width: 498px;
}

.w-499 {
  max-width: 499px;
}

.w-500 {
  max-width: 500px;
}

.w-501 {
  max-width: 501px;
}

.w-502 {
  max-width: 502px;
}

.w-503 {
  max-width: 503px;
}

.w-504 {
  max-width: 504px;
}

.w-505 {
  max-width: 505px;
}

.w-506 {
  max-width: 506px;
}

.w-507 {
  max-width: 507px;
}

.w-508 {
  max-width: 508px;
}

.w-509 {
  max-width: 509px;
}

.w-510 {
  max-width: 510px;
}

.w-511 {
  max-width: 511px;
}

.w-512 {
  max-width: 512px;
}

.w-513 {
  max-width: 513px;
}

.w-514 {
  max-width: 514px;
}

.w-515 {
  max-width: 515px;
}

.w-516 {
  max-width: 516px;
}

.w-517 {
  max-width: 517px;
}

.w-518 {
  max-width: 518px;
}

.w-519 {
  max-width: 519px;
}

.w-520 {
  max-width: 520px;
}

.w-521 {
  max-width: 521px;
}

.w-522 {
  max-width: 522px;
}

.w-523 {
  max-width: 523px;
}

.w-524 {
  max-width: 524px;
}

.w-525 {
  max-width: 525px;
}

.w-526 {
  max-width: 526px;
}

.w-527 {
  max-width: 527px;
}

.w-528 {
  max-width: 528px;
}

.w-529 {
  max-width: 529px;
}

.w-530 {
  max-width: 530px;
}

.w-531 {
  max-width: 531px;
}

.w-532 {
  max-width: 532px;
}

.w-533 {
  max-width: 533px;
}

.w-534 {
  max-width: 534px;
}

.w-535 {
  max-width: 535px;
}

.w-536 {
  max-width: 536px;
}

.w-537 {
  max-width: 537px;
}

.w-538 {
  max-width: 538px;
}

.w-539 {
  max-width: 539px;
}

.w-540 {
  max-width: 540px;
}

.w-541 {
  max-width: 541px;
}

.w-542 {
  max-width: 542px;
}

.w-543 {
  max-width: 543px;
}

.w-544 {
  max-width: 544px;
}

.w-545 {
  max-width: 545px;
}

.w-546 {
  max-width: 546px;
}

.w-547 {
  max-width: 547px;
}

.w-548 {
  max-width: 548px;
}

.w-549 {
  max-width: 549px;
}

.w-550 {
  max-width: 550px;
}

.w-551 {
  max-width: 551px;
}

.w-552 {
  max-width: 552px;
}

.w-553 {
  max-width: 553px;
}

.w-554 {
  max-width: 554px;
}

.w-555 {
  max-width: 555px;
}

.w-556 {
  max-width: 556px;
}

.w-557 {
  max-width: 557px;
}

.w-558 {
  max-width: 558px;
}

.w-559 {
  max-width: 559px;
}

.w-560 {
  max-width: 560px;
}

.w-561 {
  max-width: 561px;
}

.w-562 {
  max-width: 562px;
}

.w-563 {
  max-width: 563px;
}

.w-564 {
  max-width: 564px;
}

.w-565 {
  max-width: 565px;
}

.w-566 {
  max-width: 566px;
}

.w-567 {
  max-width: 567px;
}

.w-568 {
  max-width: 568px;
}

.w-569 {
  max-width: 569px;
}

.w-570 {
  max-width: 570px;
}

.w-571 {
  max-width: 571px;
}

.w-572 {
  max-width: 572px;
}

.w-573 {
  max-width: 573px;
}

.w-574 {
  max-width: 574px;
}

.w-575 {
  max-width: 575px;
}

.w-576 {
  max-width: 576px;
}

.w-577 {
  max-width: 577px;
}

.w-578 {
  max-width: 578px;
}

.w-579 {
  max-width: 579px;
}

.w-580 {
  max-width: 580px;
}

.w-581 {
  max-width: 581px;
}

.w-582 {
  max-width: 582px;
}

.w-583 {
  max-width: 583px;
}

.w-584 {
  max-width: 584px;
}

.w-585 {
  max-width: 585px;
}

.w-586 {
  max-width: 586px;
}

.w-587 {
  max-width: 587px;
}

.w-588 {
  max-width: 588px;
}

.w-589 {
  max-width: 589px;
}

.w-590 {
  max-width: 590px;
}

.w-591 {
  max-width: 591px;
}

.w-592 {
  max-width: 592px;
}

.w-593 {
  max-width: 593px;
}

.w-594 {
  max-width: 594px;
}

.w-595 {
  max-width: 595px;
}

.w-596 {
  max-width: 596px;
}

.w-597 {
  max-width: 597px;
}

.w-598 {
  max-width: 598px;
}

.w-599 {
  max-width: 599px;
}

.w-600 {
  max-width: 600px;
}

.w-601 {
  max-width: 601px;
}

.w-602 {
  max-width: 602px;
}

.w-603 {
  max-width: 603px;
}

.w-604 {
  max-width: 604px;
}

.w-605 {
  max-width: 605px;
}

.w-606 {
  max-width: 606px;
}

.w-607 {
  max-width: 607px;
}

.w-608 {
  max-width: 608px;
}

.w-609 {
  max-width: 609px;
}

.w-610 {
  max-width: 610px;
}

.w-611 {
  max-width: 611px;
}

.w-612 {
  max-width: 612px;
}

.w-613 {
  max-width: 613px;
}

.w-614 {
  max-width: 614px;
}

.w-615 {
  max-width: 615px;
}

.w-616 {
  max-width: 616px;
}

.w-617 {
  max-width: 617px;
}

.w-618 {
  max-width: 618px;
}

.w-619 {
  max-width: 619px;
}

.w-620 {
  max-width: 620px;
}

.w-621 {
  max-width: 621px;
}

.w-622 {
  max-width: 622px;
}

.w-623 {
  max-width: 623px;
}

.w-624 {
  max-width: 624px;
}

.w-625 {
  max-width: 625px;
}

.w-626 {
  max-width: 626px;
}

.w-627 {
  max-width: 627px;
}

.w-628 {
  max-width: 628px;
}

.w-629 {
  max-width: 629px;
}

.w-630 {
  max-width: 630px;
}

.w-631 {
  max-width: 631px;
}

.w-632 {
  max-width: 632px;
}

.w-633 {
  max-width: 633px;
}

.w-634 {
  max-width: 634px;
}

.w-635 {
  max-width: 635px;
}

.w-636 {
  max-width: 636px;
}

.w-637 {
  max-width: 637px;
}

.w-638 {
  max-width: 638px;
}

.w-639 {
  max-width: 639px;
}

.w-640 {
  max-width: 640px;
}

.w-641 {
  max-width: 641px;
}

.w-642 {
  max-width: 642px;
}

.w-643 {
  max-width: 643px;
}

.w-644 {
  max-width: 644px;
}

.w-645 {
  max-width: 645px;
}

.w-646 {
  max-width: 646px;
}

.w-647 {
  max-width: 647px;
}

.w-648 {
  max-width: 648px;
}

.w-649 {
  max-width: 649px;
}

.w-650 {
  max-width: 650px;
}

.w-651 {
  max-width: 651px;
}

.w-652 {
  max-width: 652px;
}

.w-653 {
  max-width: 653px;
}

.w-654 {
  max-width: 654px;
}

.w-655 {
  max-width: 655px;
}

.w-656 {
  max-width: 656px;
}

.w-657 {
  max-width: 657px;
}

.w-658 {
  max-width: 658px;
}

.w-659 {
  max-width: 659px;
}

.w-660 {
  max-width: 660px;
}

.w-661 {
  max-width: 661px;
}

.w-662 {
  max-width: 662px;
}

.w-663 {
  max-width: 663px;
}

.w-664 {
  max-width: 664px;
}

.w-665 {
  max-width: 665px;
}

.w-666 {
  max-width: 666px;
}

.w-667 {
  max-width: 667px;
}

.w-668 {
  max-width: 668px;
}

.w-669 {
  max-width: 669px;
}

.w-670 {
  max-width: 670px;
}

.w-671 {
  max-width: 671px;
}

.w-672 {
  max-width: 672px;
}

.w-673 {
  max-width: 673px;
}

.w-674 {
  max-width: 674px;
}

.w-675 {
  max-width: 675px;
}

.w-676 {
  max-width: 676px;
}

.w-677 {
  max-width: 677px;
}

.w-678 {
  max-width: 678px;
}

.w-679 {
  max-width: 679px;
}

.w-680 {
  max-width: 680px;
}

.w-681 {
  max-width: 681px;
}

.w-682 {
  max-width: 682px;
}

.w-683 {
  max-width: 683px;
}

.w-684 {
  max-width: 684px;
}

.w-685 {
  max-width: 685px;
}

.w-686 {
  max-width: 686px;
}

.w-687 {
  max-width: 687px;
}

.w-688 {
  max-width: 688px;
}

.w-689 {
  max-width: 689px;
}

.w-690 {
  max-width: 690px;
}

.w-691 {
  max-width: 691px;
}

.w-692 {
  max-width: 692px;
}

.w-693 {
  max-width: 693px;
}

.w-694 {
  max-width: 694px;
}

.w-695 {
  max-width: 695px;
}

.w-696 {
  max-width: 696px;
}

.w-697 {
  max-width: 697px;
}

.w-698 {
  max-width: 698px;
}

.w-699 {
  max-width: 699px;
}

.w-700 {
  max-width: 700px;
}

.w-701 {
  max-width: 701px;
}

.w-702 {
  max-width: 702px;
}

.w-703 {
  max-width: 703px;
}

.w-704 {
  max-width: 704px;
}

.w-705 {
  max-width: 705px;
}

.w-706 {
  max-width: 706px;
}

.w-707 {
  max-width: 707px;
}

.w-708 {
  max-width: 708px;
}

.w-709 {
  max-width: 709px;
}

.w-710 {
  max-width: 710px;
}

.w-711 {
  max-width: 711px;
}

.w-712 {
  max-width: 712px;
}

.w-713 {
  max-width: 713px;
}

.w-714 {
  max-width: 714px;
}

.w-715 {
  max-width: 715px;
}

.w-716 {
  max-width: 716px;
}

.w-717 {
  max-width: 717px;
}

.w-718 {
  max-width: 718px;
}

.w-719 {
  max-width: 719px;
}

.w-720 {
  max-width: 720px;
}

.w-721 {
  max-width: 721px;
}

.w-722 {
  max-width: 722px;
}

.w-723 {
  max-width: 723px;
}

.w-724 {
  max-width: 724px;
}

.w-725 {
  max-width: 725px;
}

.w-726 {
  max-width: 726px;
}

.w-727 {
  max-width: 727px;
}

.w-728 {
  max-width: 728px;
}

.w-729 {
  max-width: 729px;
}

.w-730 {
  max-width: 730px;
}

.w-731 {
  max-width: 731px;
}

.w-732 {
  max-width: 732px;
}

.w-733 {
  max-width: 733px;
}

.w-734 {
  max-width: 734px;
}

.w-735 {
  max-width: 735px;
}

.w-736 {
  max-width: 736px;
}

.w-737 {
  max-width: 737px;
}

.w-738 {
  max-width: 738px;
}

.w-739 {
  max-width: 739px;
}

.w-740 {
  max-width: 740px;
}

.w-741 {
  max-width: 741px;
}

.w-742 {
  max-width: 742px;
}

.w-743 {
  max-width: 743px;
}

.w-744 {
  max-width: 744px;
}

.w-745 {
  max-width: 745px;
}

.w-746 {
  max-width: 746px;
}

.w-747 {
  max-width: 747px;
}

.w-748 {
  max-width: 748px;
}

.w-749 {
  max-width: 749px;
}

.w-750 {
  max-width: 750px;
}

.w-751 {
  max-width: 751px;
}

.w-752 {
  max-width: 752px;
}

.w-753 {
  max-width: 753px;
}

.w-754 {
  max-width: 754px;
}

.w-755 {
  max-width: 755px;
}

.w-756 {
  max-width: 756px;
}

.w-757 {
  max-width: 757px;
}

.w-758 {
  max-width: 758px;
}

.w-759 {
  max-width: 759px;
}

.w-760 {
  max-width: 760px;
}

.w-761 {
  max-width: 761px;
}

.w-762 {
  max-width: 762px;
}

.w-763 {
  max-width: 763px;
}

.w-764 {
  max-width: 764px;
}

.w-765 {
  max-width: 765px;
}

.w-766 {
  max-width: 766px;
}

.w-767 {
  max-width: 767px;
}

.w-768 {
  max-width: 768px;
}

.w-769 {
  max-width: 769px;
}

.w-770 {
  max-width: 770px;
}

.w-771 {
  max-width: 771px;
}

.w-772 {
  max-width: 772px;
}

.w-773 {
  max-width: 773px;
}

.w-774 {
  max-width: 774px;
}

.w-775 {
  max-width: 775px;
}

.w-776 {
  max-width: 776px;
}

.w-777 {
  max-width: 777px;
}

.w-778 {
  max-width: 778px;
}

.w-779 {
  max-width: 779px;
}

.w-780 {
  max-width: 780px;
}

.w-781 {
  max-width: 781px;
}

.w-782 {
  max-width: 782px;
}

.w-783 {
  max-width: 783px;
}

.w-784 {
  max-width: 784px;
}

.w-785 {
  max-width: 785px;
}

.w-786 {
  max-width: 786px;
}

.w-787 {
  max-width: 787px;
}

.w-788 {
  max-width: 788px;
}

.w-789 {
  max-width: 789px;
}

.w-790 {
  max-width: 790px;
}

.w-791 {
  max-width: 791px;
}

.w-792 {
  max-width: 792px;
}

.w-793 {
  max-width: 793px;
}

.w-794 {
  max-width: 794px;
}

.w-795 {
  max-width: 795px;
}

.w-796 {
  max-width: 796px;
}

.w-797 {
  max-width: 797px;
}

.w-798 {
  max-width: 798px;
}

.w-799 {
  max-width: 799px;
}

.w-800 {
  max-width: 800px;
}

.w-801 {
  max-width: 801px;
}

.w-802 {
  max-width: 802px;
}

.w-803 {
  max-width: 803px;
}

.w-804 {
  max-width: 804px;
}

.w-805 {
  max-width: 805px;
}

.w-806 {
  max-width: 806px;
}

.w-807 {
  max-width: 807px;
}

.w-808 {
  max-width: 808px;
}

.w-809 {
  max-width: 809px;
}

.w-810 {
  max-width: 810px;
}

.w-811 {
  max-width: 811px;
}

.w-812 {
  max-width: 812px;
}

.w-813 {
  max-width: 813px;
}

.w-814 {
  max-width: 814px;
}

.w-815 {
  max-width: 815px;
}

.w-816 {
  max-width: 816px;
}

.w-817 {
  max-width: 817px;
}

.w-818 {
  max-width: 818px;
}

.w-819 {
  max-width: 819px;
}

.w-820 {
  max-width: 820px;
}

.w-821 {
  max-width: 821px;
}

.w-822 {
  max-width: 822px;
}

.w-823 {
  max-width: 823px;
}

.w-824 {
  max-width: 824px;
}

.w-825 {
  max-width: 825px;
}

.w-826 {
  max-width: 826px;
}

.w-827 {
  max-width: 827px;
}

.w-828 {
  max-width: 828px;
}

.w-829 {
  max-width: 829px;
}

.w-830 {
  max-width: 830px;
}

.w-831 {
  max-width: 831px;
}

.w-832 {
  max-width: 832px;
}

.w-833 {
  max-width: 833px;
}

.w-834 {
  max-width: 834px;
}

.w-835 {
  max-width: 835px;
}

.w-836 {
  max-width: 836px;
}

.w-837 {
  max-width: 837px;
}

.w-838 {
  max-width: 838px;
}

.w-839 {
  max-width: 839px;
}

.w-840 {
  max-width: 840px;
}

.w-841 {
  max-width: 841px;
}

.w-842 {
  max-width: 842px;
}

.w-843 {
  max-width: 843px;
}

.w-844 {
  max-width: 844px;
}

.w-845 {
  max-width: 845px;
}

.w-846 {
  max-width: 846px;
}

.w-847 {
  max-width: 847px;
}

.w-848 {
  max-width: 848px;
}

.w-849 {
  max-width: 849px;
}

.w-850 {
  max-width: 850px;
}

.w-851 {
  max-width: 851px;
}

.w-852 {
  max-width: 852px;
}

.w-853 {
  max-width: 853px;
}

.w-854 {
  max-width: 854px;
}

.w-855 {
  max-width: 855px;
}

.w-856 {
  max-width: 856px;
}

.w-857 {
  max-width: 857px;
}

.w-858 {
  max-width: 858px;
}

.w-859 {
  max-width: 859px;
}

.w-860 {
  max-width: 860px;
}

.w-861 {
  max-width: 861px;
}

.w-862 {
  max-width: 862px;
}

.w-863 {
  max-width: 863px;
}

.w-864 {
  max-width: 864px;
}

.w-865 {
  max-width: 865px;
}

.w-866 {
  max-width: 866px;
}

.w-867 {
  max-width: 867px;
}

.w-868 {
  max-width: 868px;
}

.w-869 {
  max-width: 869px;
}

.w-870 {
  max-width: 870px;
}

.w-871 {
  max-width: 871px;
}

.w-872 {
  max-width: 872px;
}

.w-873 {
  max-width: 873px;
}

.w-874 {
  max-width: 874px;
}

.w-875 {
  max-width: 875px;
}

.w-876 {
  max-width: 876px;
}

.w-877 {
  max-width: 877px;
}

.w-878 {
  max-width: 878px;
}

.w-879 {
  max-width: 879px;
}

.w-880 {
  max-width: 880px;
}

.w-881 {
  max-width: 881px;
}

.w-882 {
  max-width: 882px;
}

.w-883 {
  max-width: 883px;
}

.w-884 {
  max-width: 884px;
}

.w-885 {
  max-width: 885px;
}

.w-886 {
  max-width: 886px;
}

.w-887 {
  max-width: 887px;
}

.w-888 {
  max-width: 888px;
}

.w-889 {
  max-width: 889px;
}

.w-890 {
  max-width: 890px;
}

.w-891 {
  max-width: 891px;
}

.w-892 {
  max-width: 892px;
}

.w-893 {
  max-width: 893px;
}

.w-894 {
  max-width: 894px;
}

.w-895 {
  max-width: 895px;
}

.w-896 {
  max-width: 896px;
}

.w-897 {
  max-width: 897px;
}

.w-898 {
  max-width: 898px;
}

.w-899 {
  max-width: 899px;
}

.w-900 {
  max-width: 900px;
}

.w-901 {
  max-width: 901px;
}

.w-902 {
  max-width: 902px;
}

.w-903 {
  max-width: 903px;
}

.w-904 {
  max-width: 904px;
}

.w-905 {
  max-width: 905px;
}

.w-906 {
  max-width: 906px;
}

.w-907 {
  max-width: 907px;
}

.w-908 {
  max-width: 908px;
}

.w-909 {
  max-width: 909px;
}

.w-910 {
  max-width: 910px;
}

.w-911 {
  max-width: 911px;
}

.w-912 {
  max-width: 912px;
}

.w-913 {
  max-width: 913px;
}

.w-914 {
  max-width: 914px;
}

.w-915 {
  max-width: 915px;
}

.w-916 {
  max-width: 916px;
}

.w-917 {
  max-width: 917px;
}

.w-918 {
  max-width: 918px;
}

.w-919 {
  max-width: 919px;
}

.w-920 {
  max-width: 920px;
}

.w-921 {
  max-width: 921px;
}

.w-922 {
  max-width: 922px;
}

.w-923 {
  max-width: 923px;
}

.w-924 {
  max-width: 924px;
}

.w-925 {
  max-width: 925px;
}

.w-926 {
  max-width: 926px;
}

.w-927 {
  max-width: 927px;
}

.w-928 {
  max-width: 928px;
}

.w-929 {
  max-width: 929px;
}

.w-930 {
  max-width: 930px;
}

.w-931 {
  max-width: 931px;
}

.w-932 {
  max-width: 932px;
}

.w-933 {
  max-width: 933px;
}

.w-934 {
  max-width: 934px;
}

.w-935 {
  max-width: 935px;
}

.w-936 {
  max-width: 936px;
}

.w-937 {
  max-width: 937px;
}

.w-938 {
  max-width: 938px;
}

.w-939 {
  max-width: 939px;
}

.w-940 {
  max-width: 940px;
}

.w-941 {
  max-width: 941px;
}

.w-942 {
  max-width: 942px;
}

.w-943 {
  max-width: 943px;
}

.w-944 {
  max-width: 944px;
}

.w-945 {
  max-width: 945px;
}

.w-946 {
  max-width: 946px;
}

.w-947 {
  max-width: 947px;
}

.w-948 {
  max-width: 948px;
}

.w-949 {
  max-width: 949px;
}

.w-950 {
  max-width: 950px;
}

.w-951 {
  max-width: 951px;
}

.w-952 {
  max-width: 952px;
}

.w-953 {
  max-width: 953px;
}

.w-954 {
  max-width: 954px;
}

.w-955 {
  max-width: 955px;
}

.w-956 {
  max-width: 956px;
}

.w-957 {
  max-width: 957px;
}

.w-958 {
  max-width: 958px;
}

.w-959 {
  max-width: 959px;
}

.w-960 {
  max-width: 960px;
}

.w-961 {
  max-width: 961px;
}

.w-962 {
  max-width: 962px;
}

.w-963 {
  max-width: 963px;
}

.w-964 {
  max-width: 964px;
}

.w-965 {
  max-width: 965px;
}

.w-966 {
  max-width: 966px;
}

.w-967 {
  max-width: 967px;
}

.w-968 {
  max-width: 968px;
}

.w-969 {
  max-width: 969px;
}

.w-970 {
  max-width: 970px;
}

.w-971 {
  max-width: 971px;
}

.w-972 {
  max-width: 972px;
}

.w-973 {
  max-width: 973px;
}

.w-974 {
  max-width: 974px;
}

.w-975 {
  max-width: 975px;
}

.w-976 {
  max-width: 976px;
}

.w-977 {
  max-width: 977px;
}

.w-978 {
  max-width: 978px;
}

.w-979 {
  max-width: 979px;
}

.w-980 {
  max-width: 980px;
}

.w-981 {
  max-width: 981px;
}

.w-982 {
  max-width: 982px;
}

.w-983 {
  max-width: 983px;
}

.w-984 {
  max-width: 984px;
}

.w-985 {
  max-width: 985px;
}

.w-986 {
  max-width: 986px;
}

.w-987 {
  max-width: 987px;
}

.w-988 {
  max-width: 988px;
}

.w-989 {
  max-width: 989px;
}

.w-990 {
  max-width: 990px;
}

.w-991 {
  max-width: 991px;
}

.w-992 {
  max-width: 992px;
}

.w-993 {
  max-width: 993px;
}

.w-994 {
  max-width: 994px;
}

.w-995 {
  max-width: 995px;
}

.w-996 {
  max-width: 996px;
}

.w-997 {
  max-width: 997px;
}

.w-998 {
  max-width: 998px;
}

.w-999 {
  max-width: 999px;
}

.w-1000 {
  max-width: 1000px;
}

.w-1001 {
  max-width: 1001px;
}

.w-1002 {
  max-width: 1002px;
}

.w-1003 {
  max-width: 1003px;
}

.w-1004 {
  max-width: 1004px;
}

.w-1005 {
  max-width: 1005px;
}

.w-1006 {
  max-width: 1006px;
}

.w-1007 {
  max-width: 1007px;
}

.w-1008 {
  max-width: 1008px;
}

.w-1009 {
  max-width: 1009px;
}

.w-1010 {
  max-width: 1010px;
}

.w-1011 {
  max-width: 1011px;
}

.w-1012 {
  max-width: 1012px;
}

.w-1013 {
  max-width: 1013px;
}

.w-1014 {
  max-width: 1014px;
}

.w-1015 {
  max-width: 1015px;
}

.w-1016 {
  max-width: 1016px;
}

.w-1017 {
  max-width: 1017px;
}

.w-1018 {
  max-width: 1018px;
}

.w-1019 {
  max-width: 1019px;
}

.w-1020 {
  max-width: 1020px;
}

.w-1021 {
  max-width: 1021px;
}

.w-1022 {
  max-width: 1022px;
}

.w-1023 {
  max-width: 1023px;
}

.w-1024 {
  max-width: 1024px;
}

.w-1025 {
  max-width: 1025px;
}

.w-1026 {
  max-width: 1026px;
}

.w-1027 {
  max-width: 1027px;
}

.w-1028 {
  max-width: 1028px;
}

.w-1029 {
  max-width: 1029px;
}

.w-1030 {
  max-width: 1030px;
}

.w-1031 {
  max-width: 1031px;
}

.w-1032 {
  max-width: 1032px;
}

.w-1033 {
  max-width: 1033px;
}

.w-1034 {
  max-width: 1034px;
}

.w-1035 {
  max-width: 1035px;
}

.w-1036 {
  max-width: 1036px;
}

.w-1037 {
  max-width: 1037px;
}

.w-1038 {
  max-width: 1038px;
}

.w-1039 {
  max-width: 1039px;
}

.w-1040 {
  max-width: 1040px;
}

.w-1041 {
  max-width: 1041px;
}

.w-1042 {
  max-width: 1042px;
}

.w-1043 {
  max-width: 1043px;
}

.w-1044 {
  max-width: 1044px;
}

.w-1045 {
  max-width: 1045px;
}

.w-1046 {
  max-width: 1046px;
}

.w-1047 {
  max-width: 1047px;
}

.w-1048 {
  max-width: 1048px;
}

.w-1049 {
  max-width: 1049px;
}

.w-1050 {
  max-width: 1050px;
}

.w-1051 {
  max-width: 1051px;
}

.w-1052 {
  max-width: 1052px;
}

.w-1053 {
  max-width: 1053px;
}

.w-1054 {
  max-width: 1054px;
}

.w-1055 {
  max-width: 1055px;
}

.w-1056 {
  max-width: 1056px;
}

.w-1057 {
  max-width: 1057px;
}

.w-1058 {
  max-width: 1058px;
}

.w-1059 {
  max-width: 1059px;
}

.w-1060 {
  max-width: 1060px;
}

.w-1061 {
  max-width: 1061px;
}

.w-1062 {
  max-width: 1062px;
}

.w-1063 {
  max-width: 1063px;
}

.w-1064 {
  max-width: 1064px;
}

.w-1065 {
  max-width: 1065px;
}

.w-1066 {
  max-width: 1066px;
}

.w-1067 {
  max-width: 1067px;
}

.w-1068 {
  max-width: 1068px;
}

.w-1069 {
  max-width: 1069px;
}

.w-1070 {
  max-width: 1070px;
}

.w-1071 {
  max-width: 1071px;
}

.w-1072 {
  max-width: 1072px;
}

.w-1073 {
  max-width: 1073px;
}

.w-1074 {
  max-width: 1074px;
}

.w-1075 {
  max-width: 1075px;
}

.w-1076 {
  max-width: 1076px;
}

.w-1077 {
  max-width: 1077px;
}

.w-1078 {
  max-width: 1078px;
}

.w-1079 {
  max-width: 1079px;
}

.w-1080 {
  max-width: 1080px;
}

.w-1081 {
  max-width: 1081px;
}

.w-1082 {
  max-width: 1082px;
}

.w-1083 {
  max-width: 1083px;
}

.w-1084 {
  max-width: 1084px;
}

.w-1085 {
  max-width: 1085px;
}

.w-1086 {
  max-width: 1086px;
}

.w-1087 {
  max-width: 1087px;
}

.w-1088 {
  max-width: 1088px;
}

.w-1089 {
  max-width: 1089px;
}

.w-1090 {
  max-width: 1090px;
}

.w-1091 {
  max-width: 1091px;
}

.w-1092 {
  max-width: 1092px;
}

.w-1093 {
  max-width: 1093px;
}

.w-1094 {
  max-width: 1094px;
}

.w-1095 {
  max-width: 1095px;
}

.w-1096 {
  max-width: 1096px;
}

.w-1097 {
  max-width: 1097px;
}

.w-1098 {
  max-width: 1098px;
}

.w-1099 {
  max-width: 1099px;
}

.w-1100 {
  max-width: 1100px;
}

.w-1101 {
  max-width: 1101px;
}

.w-1102 {
  max-width: 1102px;
}

.w-1103 {
  max-width: 1103px;
}

.w-1104 {
  max-width: 1104px;
}

.w-1105 {
  max-width: 1105px;
}

.w-1106 {
  max-width: 1106px;
}

.w-1107 {
  max-width: 1107px;
}

.w-1108 {
  max-width: 1108px;
}

.w-1109 {
  max-width: 1109px;
}

.w-1110 {
  max-width: 1110px;
}

.w-1111 {
  max-width: 1111px;
}

.w-1112 {
  max-width: 1112px;
}

.w-1113 {
  max-width: 1113px;
}

.w-1114 {
  max-width: 1114px;
}

.w-1115 {
  max-width: 1115px;
}

.w-1116 {
  max-width: 1116px;
}

.w-1117 {
  max-width: 1117px;
}

.w-1118 {
  max-width: 1118px;
}

.w-1119 {
  max-width: 1119px;
}

.w-1120 {
  max-width: 1120px;
}

.w-1121 {
  max-width: 1121px;
}

.w-1122 {
  max-width: 1122px;
}

.w-1123 {
  max-width: 1123px;
}

.w-1124 {
  max-width: 1124px;
}

.w-1125 {
  max-width: 1125px;
}

.w-1126 {
  max-width: 1126px;
}

.w-1127 {
  max-width: 1127px;
}

.w-1128 {
  max-width: 1128px;
}

.w-1129 {
  max-width: 1129px;
}

.w-1130 {
  max-width: 1130px;
}

.w-1131 {
  max-width: 1131px;
}

.w-1132 {
  max-width: 1132px;
}

.w-1133 {
  max-width: 1133px;
}

.w-1134 {
  max-width: 1134px;
}

.w-1135 {
  max-width: 1135px;
}

.w-1136 {
  max-width: 1136px;
}

.w-1137 {
  max-width: 1137px;
}

.w-1138 {
  max-width: 1138px;
}

.w-1139 {
  max-width: 1139px;
}

.w-1140 {
  max-width: 1140px;
}

.w-1141 {
  max-width: 1141px;
}

.w-1142 {
  max-width: 1142px;
}

.w-1143 {
  max-width: 1143px;
}

.w-1144 {
  max-width: 1144px;
}

.w-1145 {
  max-width: 1145px;
}

.w-1146 {
  max-width: 1146px;
}

.w-1147 {
  max-width: 1147px;
}

.w-1148 {
  max-width: 1148px;
}

.w-1149 {
  max-width: 1149px;
}

.w-1150 {
  max-width: 1150px;
}

.w-1151 {
  max-width: 1151px;
}

.w-1152 {
  max-width: 1152px;
}

.w-1153 {
  max-width: 1153px;
}

.w-1154 {
  max-width: 1154px;
}

.w-1155 {
  max-width: 1155px;
}

.w-1156 {
  max-width: 1156px;
}

.w-1157 {
  max-width: 1157px;
}

.w-1158 {
  max-width: 1158px;
}

.w-1159 {
  max-width: 1159px;
}

.w-1160 {
  max-width: 1160px;
}

.w-1161 {
  max-width: 1161px;
}

.w-1162 {
  max-width: 1162px;
}

.w-1163 {
  max-width: 1163px;
}

.w-1164 {
  max-width: 1164px;
}

.w-1165 {
  max-width: 1165px;
}

.w-1166 {
  max-width: 1166px;
}

.w-1167 {
  max-width: 1167px;
}

.w-1168 {
  max-width: 1168px;
}

.w-1169 {
  max-width: 1169px;
}

.w-1170 {
  max-width: 1170px;
}

.w-1171 {
  max-width: 1171px;
}

.w-1172 {
  max-width: 1172px;
}

.w-1173 {
  max-width: 1173px;
}

.w-1174 {
  max-width: 1174px;
}

.w-1175 {
  max-width: 1175px;
}

.w-1176 {
  max-width: 1176px;
}

.w-1177 {
  max-width: 1177px;
}

.w-1178 {
  max-width: 1178px;
}

.w-1179 {
  max-width: 1179px;
}

.w-1180 {
  max-width: 1180px;
}

.w-1181 {
  max-width: 1181px;
}

.w-1182 {
  max-width: 1182px;
}

.w-1183 {
  max-width: 1183px;
}

.w-1184 {
  max-width: 1184px;
}

.w-1185 {
  max-width: 1185px;
}

.w-1186 {
  max-width: 1186px;
}

.w-1187 {
  max-width: 1187px;
}

.w-1188 {
  max-width: 1188px;
}

.w-1189 {
  max-width: 1189px;
}

.w-1190 {
  max-width: 1190px;
}

.w-1191 {
  max-width: 1191px;
}

.w-1192 {
  max-width: 1192px;
}

.w-1193 {
  max-width: 1193px;
}

.w-1194 {
  max-width: 1194px;
}

.w-1195 {
  max-width: 1195px;
}

.w-1196 {
  max-width: 1196px;
}

.w-1197 {
  max-width: 1197px;
}

.w-1198 {
  max-width: 1198px;
}

.w-1199 {
  max-width: 1199px;
}

.w-1200 {
  max-width: 1200px;
}

.w-1201 {
  max-width: 1201px;
}

.w-1202 {
  max-width: 1202px;
}

.w-1203 {
  max-width: 1203px;
}

.w-1204 {
  max-width: 1204px;
}

.w-1205 {
  max-width: 1205px;
}

.w-1206 {
  max-width: 1206px;
}

.w-1207 {
  max-width: 1207px;
}

.w-1208 {
  max-width: 1208px;
}

.w-1209 {
  max-width: 1209px;
}

.w-1210 {
  max-width: 1210px;
}

.w-1211 {
  max-width: 1211px;
}

.w-1212 {
  max-width: 1212px;
}

.w-1213 {
  max-width: 1213px;
}

.w-1214 {
  max-width: 1214px;
}

.w-1215 {
  max-width: 1215px;
}

.w-1216 {
  max-width: 1216px;
}

.w-1217 {
  max-width: 1217px;
}

.w-1218 {
  max-width: 1218px;
}

.w-1219 {
  max-width: 1219px;
}

.w-1220 {
  max-width: 1220px;
}

.w-1221 {
  max-width: 1221px;
}

.w-1222 {
  max-width: 1222px;
}

.w-1223 {
  max-width: 1223px;
}

.w-1224 {
  max-width: 1224px;
}

.w-1225 {
  max-width: 1225px;
}

.w-1226 {
  max-width: 1226px;
}

.w-1227 {
  max-width: 1227px;
}

.w-1228 {
  max-width: 1228px;
}

.w-1229 {
  max-width: 1229px;
}

.w-1230 {
  max-width: 1230px;
}

.w-1231 {
  max-width: 1231px;
}

.w-1232 {
  max-width: 1232px;
}

.w-1233 {
  max-width: 1233px;
}

.w-1234 {
  max-width: 1234px;
}

.w-1235 {
  max-width: 1235px;
}

.w-1236 {
  max-width: 1236px;
}

.w-1237 {
  max-width: 1237px;
}

.w-1238 {
  max-width: 1238px;
}

.w-1239 {
  max-width: 1239px;
}

.w-1240 {
  max-width: 1240px;
}

.w-1241 {
  max-width: 1241px;
}

.w-1242 {
  max-width: 1242px;
}

.w-1243 {
  max-width: 1243px;
}

.w-1244 {
  max-width: 1244px;
}

.w-1245 {
  max-width: 1245px;
}

.w-1246 {
  max-width: 1246px;
}

.w-1247 {
  max-width: 1247px;
}

.w-1248 {
  max-width: 1248px;
}

.w-1249 {
  max-width: 1249px;
}

.w-1250 {
  max-width: 1250px;
}

.w-1251 {
  max-width: 1251px;
}

.w-1252 {
  max-width: 1252px;
}

.w-1253 {
  max-width: 1253px;
}

.w-1254 {
  max-width: 1254px;
}

.w-1255 {
  max-width: 1255px;
}

.w-1256 {
  max-width: 1256px;
}

.w-1257 {
  max-width: 1257px;
}

.w-1258 {
  max-width: 1258px;
}

.w-1259 {
  max-width: 1259px;
}

.w-1260 {
  max-width: 1260px;
}

.w-1261 {
  max-width: 1261px;
}

.w-1262 {
  max-width: 1262px;
}

.w-1263 {
  max-width: 1263px;
}

.w-1264 {
  max-width: 1264px;
}

.w-1265 {
  max-width: 1265px;
}

.w-1266 {
  max-width: 1266px;
}

.w-1267 {
  max-width: 1267px;
}

.w-1268 {
  max-width: 1268px;
}

.w-1269 {
  max-width: 1269px;
}

.w-1270 {
  max-width: 1270px;
}

.w-1271 {
  max-width: 1271px;
}

.w-1272 {
  max-width: 1272px;
}

.w-1273 {
  max-width: 1273px;
}

.w-1274 {
  max-width: 1274px;
}

.w-1275 {
  max-width: 1275px;
}

.w-1276 {
  max-width: 1276px;
}

.w-1277 {
  max-width: 1277px;
}

.w-1278 {
  max-width: 1278px;
}

.w-1279 {
  max-width: 1279px;
}

.w-1280 {
  max-width: 1280px;
}

.w-1281 {
  max-width: 1281px;
}

.w-1282 {
  max-width: 1282px;
}

.w-1283 {
  max-width: 1283px;
}

.w-1284 {
  max-width: 1284px;
}

.w-1285 {
  max-width: 1285px;
}

.w-1286 {
  max-width: 1286px;
}

.w-1287 {
  max-width: 1287px;
}

.w-1288 {
  max-width: 1288px;
}

.w-1289 {
  max-width: 1289px;
}

.w-1290 {
  max-width: 1290px;
}

.w-1291 {
  max-width: 1291px;
}

.w-1292 {
  max-width: 1292px;
}

.w-1293 {
  max-width: 1293px;
}

.w-1294 {
  max-width: 1294px;
}

.w-1295 {
  max-width: 1295px;
}

.w-1296 {
  max-width: 1296px;
}

.w-1297 {
  max-width: 1297px;
}

.w-1298 {
  max-width: 1298px;
}

.w-1299 {
  max-width: 1299px;
}

.cgap-1 {
  gap: 1px;
}

.cgap-2 {
  gap: 2px;
}

.cgap-3 {
  gap: 3px;
}

.cgap-4 {
  gap: 4px;
}

.cgap-5 {
  gap: 5px;
}

.cgap-6 {
  gap: 6px;
}

.cgap-7 {
  gap: 7px;
}

.cgap-8 {
  gap: 8px;
}

.cgap-9 {
  gap: 9px;
}

.cgap-10 {
  gap: 10px;
}

.cgap-11 {
  gap: 11px;
}

.cgap-12 {
  gap: 12px;
}

.cgap-13 {
  gap: 13px;
}

.cgap-14 {
  gap: 14px;
}

.cgap-15 {
  gap: 15px;
}

.cgap-16 {
  gap: 16px;
}

.cgap-17 {
  gap: 17px;
}

.cgap-18 {
  gap: 18px;
}

.cgap-19 {
  gap: 19px;
}

.cgap-20 {
  gap: 20px;
}

.cgap-21 {
  gap: 21px;
}

.cgap-22 {
  gap: 22px;
}

.cgap-23 {
  gap: 23px;
}

.cgap-24 {
  gap: 24px;
}

.cgap-25 {
  gap: 25px;
}

.cgap-26 {
  gap: 26px;
}

.cgap-27 {
  gap: 27px;
}

.cgap-28 {
  gap: 28px;
}

.cgap-29 {
  gap: 29px;
}

.cgap-30 {
  gap: 30px;
}

.cgap-31 {
  gap: 31px;
}

.cgap-32 {
  gap: 32px;
}

.cgap-33 {
  gap: 33px;
}

.cgap-34 {
  gap: 34px;
}

.cgap-35 {
  gap: 35px;
}

.cgap-36 {
  gap: 36px;
}

.cgap-37 {
  gap: 37px;
}

.cgap-38 {
  gap: 38px;
}

.cgap-39 {
  gap: 39px;
}

.cgap-40 {
  gap: 40px;
}

.cgap-41 {
  gap: 41px;
}

.cgap-42 {
  gap: 42px;
}

.cgap-43 {
  gap: 43px;
}

.cgap-44 {
  gap: 44px;
}

.cgap-45 {
  gap: 45px;
}

.cgap-46 {
  gap: 46px;
}

.cgap-47 {
  gap: 47px;
}

.cgap-48 {
  gap: 48px;
}

.cgap-49 {
  gap: 49px;
}

.cgap-50 {
  gap: 50px;
}

.cgap-51 {
  gap: 51px;
}

.cgap-52 {
  gap: 52px;
}

.cgap-53 {
  gap: 53px;
}

.cgap-54 {
  gap: 54px;
}

.cgap-55 {
  gap: 55px;
}

.cgap-56 {
  gap: 56px;
}

.cgap-57 {
  gap: 57px;
}

.cgap-58 {
  gap: 58px;
}

.cgap-59 {
  gap: 59px;
}

.cgap-60 {
  gap: 60px;
}

.cgap-61 {
  gap: 61px;
}

.cgap-62 {
  gap: 62px;
}

.cgap-63 {
  gap: 63px;
}

.cgap-64 {
  gap: 64px;
}

.cgap-65 {
  gap: 65px;
}

.cgap-66 {
  gap: 66px;
}

.cgap-67 {
  gap: 67px;
}

.cgap-68 {
  gap: 68px;
}

.cgap-69 {
  gap: 69px;
}

.cgap-70 {
  gap: 70px;
}

.cgap-71 {
  gap: 71px;
}

.cgap-72 {
  gap: 72px;
}

.cgap-73 {
  gap: 73px;
}

.cgap-74 {
  gap: 74px;
}

.cgap-75 {
  gap: 75px;
}

.cgap-76 {
  gap: 76px;
}

.cgap-77 {
  gap: 77px;
}

.cgap-78 {
  gap: 78px;
}

.cgap-79 {
  gap: 79px;
}

.cgap-80 {
  gap: 80px;
}

.cgap-81 {
  gap: 81px;
}

.cgap-82 {
  gap: 82px;
}

.cgap-83 {
  gap: 83px;
}

.cgap-84 {
  gap: 84px;
}

.cgap-85 {
  gap: 85px;
}

.cgap-86 {
  gap: 86px;
}

.cgap-87 {
  gap: 87px;
}

.cgap-88 {
  gap: 88px;
}

.cgap-89 {
  gap: 89px;
}

.cgap-90 {
  gap: 90px;
}

.cgap-91 {
  gap: 91px;
}

.cgap-92 {
  gap: 92px;
}

.cgap-93 {
  gap: 93px;
}

.cgap-94 {
  gap: 94px;
}

.cgap-95 {
  gap: 95px;
}

.cgap-96 {
  gap: 96px;
}

.cgap-97 {
  gap: 97px;
}

.cgap-98 {
  gap: 98px;
}

.cgap-99 {
  gap: 99px;
}

:root {
  --main-font: 'Inter', sans-serif;
  --primary-color: #f16723;
  --color-FBD7C5: #fbd7c5;
  --color-F5EAE3: #f5eae3;
  --color-F7F5F2: #f7f5f2;
  --color-black: #000000;
  --color-white: #ffffff;
  --text-gray: #666666;
  --text-gray-light: #333333;
  --text-gray-dark: #999999;
  --text-sm: 14px;
}

.fs-14 {
  font-size: 14px;
}

.text-gray {
  color: var(--text-gray);
}

.text-gray-dark {
  color: var(--text-gray-dark);
}

.text-gray-light {
  color: var(--text-gray-light);
}

.text-sm {
  font-size: var(--text-sm) !important;
}

body {
  background: var(--color-white);
  font-family: var(--main-font);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  word-break: break-word;
}

img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

main {
  position: relative;
  margin-top: 66px;
}
@media (min-width: 1200px) {
  main {
    margin-top: 69px;
  }
}
@media (min-width: 1600px) {
  main {
    margin-top: 80px;
  }
}

a {
  transition: all 0.3s ease-in-out;
}

.gap-10 {
  gap: 10px;
}

.gap-12 {
  gap: 12px;
}

.widget-cousrse-list .cousrse-list {
  padding: 0 16px;
  background: var(--color-white);
  position: relative;
}
.widget-cousrse-list .cousrse-list--item {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--text-gray);
  transition: all 0.3s;
}
.widget-cousrse-list .cousrse-list--item:hover {
  color: var(--primary-color);
}
.widget-cousrse-list .cousrse-list--item img {
  flex: 0 0 auto;
  width: 20px;
}
.widget-cousrse-list .cousrse-list--item:not(:last-child) {
  border-bottom: 1px solid #cccccc;
}

.common-grid-list {
  position: relative;
}
.common-grid-list .common-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 4px;
  color: var(--color-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  transition: all 0.3s;
}
.common-grid-list .common-arrow-btn img {
  flex: 0 0 auto;
  width: 16px;
}
.common-grid-list .common-arrow-btn.btn-orange {
  background: var(--primary-color);
}
.common-grid-list .common-arrow-btn.btn-orange:hover {
  background: var(--color-black);
}
.common-grid-list .common-arrow-btn.btn-black {
  background: var(--color-black);
}
.common-grid-list .common-arrow-btn.btn-black:hover {
  background: var(--primary-color);
}

.rating {
  position: relative;
  width: 96px;
  height: 16px;
}
.rating::before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCA5NiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMTcwMjEgMEw1LjgzNTg3IDYuMTUzODVIMS43ODgxNGUtMDdMNS4yNTIyOCA5Ljg0NjE1TDIuOTE3OTMgMTZMOC4xNzAyMSAxMi4zMDc3TDEzLjQyMjUgMTZMMTEuMDg4MSA5Ljg0NjE1TDE2LjM0MDQgNi4xNTM4NUgxMC41MDQ2TDguMTcwMjEgMFpNOC4xOTk4IDMuNTM4NDhMOS41MjE0NyA3LjIxNjM3SDEyLjUyNTJMOS42NDE1OSA5LjIwNjc2TDEwLjkyMzIgMTIuNTM4NUw4LjE5OTggMTAuNTcxMUw1LjQ3NjM4IDEyLjUzODVMNi43NTggOS4yMDY3NkwzLjg3NDM4IDcuMjE2MzdINi44NzgxM0w4LjE5OTggMy41Mzg0OFoiIGZpbGw9IiNGRkI2MDYiLz4KPHBhdGggZD0iTTI3LjgyOTggMEwyNS40OTU0IDYuMTUzODVIMTkuNjU5NkwyNC45MTE5IDkuODQ2MTVMMjIuNTc3NSAxNkwyNy44Mjk4IDEyLjMwNzdMMzMuMDgyMSAxNkwzMC43NDc3IDkuODQ2MTVMMzYgNi4xNTM4NUgzMC4xNjQxTDI3LjgyOTggMFpNMjcuODU5NCAzLjUzODQ4TDI5LjE4MTEgNy4yMTYzN0gzMi4xODQ4TDI5LjMwMTIgOS4yMDY3NkwzMC41ODI4IDEyLjUzODVMMjcuODU5NCAxMC41NzExTDI1LjEzNiAxMi41Mzg1TDI2LjQxNzYgOS4yMDY3NkwyMy41MzQgNy4yMTYzN0gyNi41Mzc3TDI3Ljg1OTQgMy41Mzg0OFoiIGZpbGw9IiNGRkI2MDYiLz4KPHBhdGggZD0iTTg3LjgyOTggMEw4NS40OTU0IDYuMTUzODVINzkuNjU5Nkw4NC45MTE5IDkuODQ2MTVMODIuNTc3NSAxNkw4Ny44Mjk4IDEyLjMwNzdMOTMuMDgyMSAxNkw5MC43NDc3IDkuODQ2MTVMOTYgNi4xNTM4NUg5MC4xNjQxTDg3LjgyOTggMFpNODcuODU5NCAzLjUzODQ4TDg5LjE4MTEgNy4yMTYzN0g5Mi4xODQ4TDg5LjMwMTIgOS4yMDY3Nkw5MC41ODI4IDEyLjUzODVMODcuODU5NCAxMC41NzExTDg1LjEzNiAxMi41Mzg1TDg2LjQxNzYgOS4yMDY3Nkw4My41MzQgNy4yMTYzN0g4Ni41Mzc3TDg3Ljg1OTQgMy41Mzg0OFoiIGZpbGw9IiNGRkI2MDYiLz4KPHBhdGggZD0iTTY3LjgyOTggMEw2NS40OTU0IDYuMTUzODVINTkuNjU5Nkw2NC45MTE5IDkuODQ2MTVMNjIuNTc3NSAxNkw2Ny44Mjk4IDEyLjMwNzdMNzMuMDgyMSAxNkw3MC43NDc3IDkuODQ2MTVMNzYgNi4xNTM4NUg3MC4xNjQxTDY3LjgyOTggMFpNNjcuODU5NCAzLjUzODQ4TDY5LjE4MTEgNy4yMTYzN0g3Mi4xODQ4TDY5LjMwMTIgOS4yMDY3Nkw3MC41ODI4IDEyLjUzODVMNjcuODU5NCAxMC41NzExTDY1LjEzNiAxMi41Mzg1TDY2LjQxNzYgOS4yMDY3Nkw2My41MzQgNy4yMTYzN0g2Ni41Mzc3TDY3Ljg1OTQgMy41Mzg0OFoiIGZpbGw9IiNGRkI2MDYiLz4KPHBhdGggZD0iTTQ3LjgyOTggMEw0NS40OTU0IDYuMTUzODVIMzkuNjU5Nkw0NC45MTE5IDkuODQ2MTVMNDIuNTc3NSAxNkw0Ny44Mjk4IDEyLjMwNzdMNTMuMDgyMSAxNkw1MC43NDc3IDkuODQ2MTVMNTYgNi4xNTM4NUg1MC4xNjQxTDQ3LjgyOTggMFpNNDcuODU5NCAzLjUzODQ4TDQ5LjE4MTEgNy4yMTYzN0g1Mi4xODQ4TDQ5LjMwMTIgOS4yMDY3Nkw1MC41ODI4IDEyLjUzODVMNDcuODU5NCAxMC41NzExTDQ1LjEzNiAxMi41Mzg1TDQ2LjQxNzYgOS4yMDY3Nkw0My41MzQgNy4yMTYzN0g0Ni41Mzc3TDQ3Ljg1OTQgMy41Mzg0OFoiIGZpbGw9IiNGRkI2MDYiLz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.rating .onrating {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: 100%;
  z-index: 1;
}
.rating .onrating::before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCA5NiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTIuMzA3N0wyLjg1NzE0IDE2TDUuMTQyODYgOS44NDYxNUwwIDYuMTUzODVINS43MTQyOUw4IDBMMTAuMjg1NyA2LjE1Mzg1SDE2TDEwLjg1NzEgOS44NDYxNUwxMy4xNDI5IDE2TDggMTIuMzA3N1oiIGZpbGw9IiNGOEI4MUYiLz4KPHBhdGggZD0iTTI4IDEyLjMwNzdMMjIuODU3MSAxNkwyNS4xNDI5IDkuODQ2MTVMMjAgNi4xNTM4NUgyNS43MTQzTDI4IDBMMzAuMjg1NyA2LjE1Mzg1SDM2TDMwLjg1NzEgOS44NDYxNUwzMy4xNDI5IDE2TDI4IDEyLjMwNzdaIiBmaWxsPSIjRjhCODFGIi8+CjxwYXRoIGQ9Ik00OCAxMi4zMDc3TDQyLjg1NzEgMTZMNDUuMTQyOSA5Ljg0NjE1TDQwIDYuMTUzODVINDUuNzE0M0w0OCAwTDUwLjI4NTcgNi4xNTM4NUg1Nkw1MC44NTcxIDkuODQ2MTVMNTMuMTQyOSAxNkw0OCAxMi4zMDc3WiIgZmlsbD0iI0Y4QjgxRiIvPgo8cGF0aCBkPSJNNjggMTIuMzA3N0w2Mi44NTcxIDE2TDY1LjE0MjkgOS44NDYxNUw2MCA2LjE1Mzg1SDY1LjcxNDNMNjggMEw3MC4yODU3IDYuMTUzODVINzZMNzAuODU3MSA5Ljg0NjE1TDczLjE0MjkgMTZMNjggMTIuMzA3N1oiIGZpbGw9IiNGOEI4MUYiLz4KPHBhdGggZD0iTTg4IDEyLjMwNzdMODIuODU3MSAxNkw4NS4xNDI5IDkuODQ2MTVMODAgNi4xNTM4NUg4NS43MTQzTDg4IDBMOTAuMjg1NyA2LjE1Mzg1SDk2TDkwLjg1NzEgOS44NDYxNUw5My4xNDI5IDE2TDg4IDEyLjMwNzdaIiBmaWxsPSIjRjhCODFGIi8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}

.fixed-element {
  position: fixed;
  bottom: 14%;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fixed-element strong a {
  color: #fff;
}
@media (min-width: 768px) {
  .fixed-element {
    bottom: 30px;
  }
}
.fixed-element .backtop-btn {
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.fixed-element .backtop-btn.show {
  opacity: 1;
  pointer-events: all;
}
.site-breadcrumb * {
  font-size: 16px;
  line-height: 100%;
  color: var(--color-black) !important;
  text-decoration: none;
}
.site-breadcrumb *::before {
  color: var(--color-black) !important;
}
.site-breadcrumb .active {
  color: var(--primary-color) !important;
}

.common-site-title {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0;
}

.social-link {
  width: 32px;
  border-radius: 13px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1040px;
  }
}

.comment-item {
  padding: 20px 16px;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  background: var(--color-white);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.comment-item:not(:last-child) {
  margin-bottom: 20px;
}
.comment-item .comment-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 100%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
}
.comment-item .comment-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.comment-item .comment-body {
  flex: 1;
}
.comment-item .rating {
  margin-bottom: 10px;
}
.comment-item .comment-name {
  font-size: 18px;
  line-height: 1;
  color: var(--color-black);
  font-weight: 600;
  margin-bottom: 14px;
}
.comment-item .comment-desc {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}

.danhgia-comment--inner {
  padding: 20px 16px;
  background: var(--color-white);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.danhgia-comment--inner .comment-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 100%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
}
.danhgia-comment--inner .comment-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.danhgia-comment--inner .comment-form {
  flex: 1;
  margin-top: 16px;
}
.danhgia-comment--inner .comment-form .comment-name {
  font-size: 18px;
  line-height: 1;
  color: var(--color-black);
  font-weight: 600;
  margin-bottom: 10px;
}
.danhgia-comment--inner .comment-form .form-rating {
  position: relative;
  height: 32px;
  margin-bottom: 10px;
}
.danhgia-comment--inner .comment-form .form-rating .rate {
  float: left;
  height: 32px;
}
.danhgia-comment--inner .comment-form .form-rating .rate:not(:checked) > input {
  position: absolute;
  top: -9999px;
  line-height: 1;
}
.danhgia-comment--inner .comment-form .form-rating .rate:not(:checked) > label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  color: #ccc;
}
.danhgia-comment--inner .comment-form .form-rating .rate:not(:checked) > label:before {
  content: "★";
}
.danhgia-comment--inner .comment-form .form-rating .rate > input:checked ~ label {
  color: #f8b81f;
}
.danhgia-comment--inner .comment-form .form-rating .rate:not(:checked) > label:hover,
.danhgia-comment--inner .comment-form .form-rating .rate:not(:checked) > label:hover ~ label {
  color: #f8b81f;
}
.danhgia-comment--inner .comment-form .form-rating .rate > input:checked + label:hover,
.danhgia-comment--inner .comment-form .form-rating .rate > input:checked + label:hover ~ label,
.danhgia-comment--inner .comment-form .form-rating .rate > input:checked ~ label:hover,
.danhgia-comment--inner .comment-form .form-rating .rate > input:checked ~ label:hover ~ label,
.danhgia-comment--inner .comment-form .form-rating .rate > label:hover ~ input:checked ~ label {
  color: #f8b81f;
}
.danhgia-comment--inner .comment-form .form-rating .invalid-feedback {
  clear: both;
}
.danhgia-comment--inner .comment-form .form-group {
  margin-bottom: 10px;
}
.danhgia-comment--inner .comment-form .form-group textarea {
  min-height: 84px;
  border: 1px solid #d9d9d9;
  background: var(--color-white);
  border-radius: 4px;
  padding: 16px;
}
.danhgia-comment--inner .comment-form .comment-form-submit {
  padding: 6px 31px;
  border-radius: 4px;
  display: block;
  margin-left: auto;
  background: var(--primary-color);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
  border: 1px solid transparent;
  transition: all 0.3s;
}
.danhgia-comment--inner .comment-form .comment-form-submit:hover {
  background: var(--color-black);
}

.accordion .accordion-button {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
  background: var(--primary-color);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 14px;
  box-shadow: none;
}
@media (min-width: 768px) {
  .accordion .accordion-button {
    font-size: 18px;
  }
}
@media (min-width: 1400px) {
  .accordion .accordion-button {
    font-size: 20px;
  }
}
.accordion .accordion-button span {
  flex: 1;
}
.accordion .accordion-button::after {
  margin-left: 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.accordion .accordion-button.collapsed {
  color: var(--color-black);
  background: rgb(247, 245, 242);
}
.accordion .accordion-button.collapsed::after {
  margin-left: 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f16723' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.btn-main, .modal-add-to-cart .related-courses .btn-add-all-to-cart, .wishlist-site .wishlist-empty .btn-primary {
  color: #fff;
  font-weight: 600;
  line-height: normal;
  border-radius: 4px;
  background: #f26724;
  padding: 12px;
  width: 100%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .btn-main, .modal-add-to-cart .related-courses .btn-add-all-to-cart, .wishlist-site .wishlist-empty .btn-primary {
    padding: 18px;
  }
}

@media screen and (min-width: 1200px) {
  .mb-xl-9 {
    margin-bottom: 36px !important;
  }
}

[class*=title-heading] {
  color: #000;
  font-weight: 600;
  line-height: normal;
}

.color-orange {
  color: var(--primary-color);
}

.title-heading--lg {
  font-size: 24px;
}
@media screen and (min-width: 992px) {
  .title-heading--lg {
    font-size: 28px;
  }
}
.title-heading--md {
  font-size: 20px;
  font-weight: 600;
}
@media screen and (min-width: 992px) {
  .title-heading--md {
    font-size: 24px;
  }
}
.title-heading--sm {
  font-size: 18px;
  font-weight: 600;
}
@media screen and (min-width: 992px) {
  .title-heading--sm {
    font-size: 22px;
  }
}

@media screen and (min-width: 1440px) {
  .container-v2 {
    max-width: 1304px;
  }
}

a {
  text-decoration: none;
}

.fz-12 {
  font-size: 12px;
}

.fz-13 {
  font-size: 13px;
}

.fz-14 {
  font-size: 14px;
}

.fz-16 {
  font-size: 16px;
}

.fz-18 {
  font-size: 18px;
}

.fz-20 {
  font-size: 20px;
}

.fz-24 {
  font-size: 24px;
}

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

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

.flex-1 {
  flex: 1;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.text-black, .rating-star .rating-num, .khoahoc-item .khoahoc-body .rating-gr .rating-num {
  color: var(--color-black) !important;
}

.tag-category {
  color: #f16723;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  border-radius: 30px;
  background: #f5eae3;
  padding: 0px 6px;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

.p-12 {
  padding: 12px;
}

.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.mb-36 {
  margin-bottom: 24px;
}
@media screen and (min-width: 992px) {
  .mb-36 {
    margin-bottom: 36px;
  }
}

.gap-6 {
  gap: 6px;
}

.leading-normal {
  line-height: normal;
}

.leading-1 {
  line-height: 4px;
}

.leading-2 {
  line-height: 8px;
}

.leading-3 {
  line-height: 12px;
}

.leading-4 {
  line-height: 16px;
}

.leading-5 {
  line-height: 20px;
}

.leading-6 {
  line-height: 24px;
}

.leading-7 {
  line-height: 28px;
}

.leading-8 {
  line-height: 32px;
}

.leading-9 {
  line-height: 36px;
}

.leading-10 {
  line-height: 40px;
}

#liveToast {
  width: 100%;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  padding: 16px 20px;
}

.border-b-0 {
  border-bottom: 0 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.fancybox__container {
  z-index: 99999;
  --fancybox-bg: rgba(0, 0, 0, 0.6);
}

.btn-buy-order-cc {
  border-radius: 4px;
  background: #f26724;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  padding: 12px 16px;
  width: -moz-fit-content;
  width: fit-content;
}

/* Components */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  z-index: 1001;
  transition: all 0.3s;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.header .header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
@media screen and (min-width: 1200px) {
  .header .header-inner {
    padding: 14px;
    gap: 12px;
  }
}
@media screen and (min-width: 1680px) {
  .header .header-inner {
    padding: 14px 30px;
  }
}
.header .header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  flex-shrink: 0;
}
@media screen and (min-width: 1200px) {
  .header .header-left {
    gap: 12px;
    flex: 1;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-left {
    gap: 20px;
  }
}
@media screen and (min-width: 1680px) {
  .header .header-left {
    gap: 30px;
  }
}
.header .header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
@media screen and (min-width: 1200px) {
  .header .header-right {
    gap: 8px;
  }
}
@media screen and (min-width: 1280px) {
  .header .header-right {
    gap: 20px;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-right {
    gap: 20px;
  }
}
@media screen and (min-width: 1680px) {
  .header .header-right {
    gap: 32px;
  }
}
.header .header-logo {
  width: 120px;
  flex-shrink: 0;
}
@media screen and (min-width: 1200px) {
  .header .header-logo {
    width: 130px;
  }
}
@media screen and (min-width: 1680px) {
  .header .header-logo {
    width: 180px;
  }
}
.header .header-widget {
  position: relative;
  display: none;
}
@media screen and (min-width: 1200px) {
  .header .header-widget {
    display: block;
  }
}
.header .header-widget:hover .widget-body {
  opacity: 1;
  pointer-events: all;
}
.header .header-widget .widget-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-weight: 500;
  color: var(--text-gray);
}
@media screen and (min-width: 1200px) {
  .header .header-widget .widget-btn {
    font-size: 14px;
    padding: 0;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-widget .widget-btn {
    font-size: 16px;
  }
}
.header .header-widget .widget-body {
  position: absolute;
  top: 100%;
  left: 0;
  width: 250%;
  padding-top: 30px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.header .header-widget .widget-body .cousrse-list {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
}
.header .header-widget .widget-body .cousrse-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
.header .header-widget .widget-body .cousrse-list::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}
.header .header-widget .widget-body .cousrse-list::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: var(--primary-color);
}
@media screen and (min-width: 1200px) {
  .header .header-widget .widget-body .cousrse-list {
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-widget .widget-body .cousrse-list {
    max-height: unset;
    overflow: visible;
  }
}
@media screen and (min-width: 1200px) {
  .header .header-widget .widget-body {
    padding-top: 23px;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-widget .widget-body {
    padding-top: 30px;
  }
}
.header .header-search {
  display: none;
}
.header .header-search .block-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;
  border-radius: 30px;
  background: #f7f7f7;
}
.header .header-search .block-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-weight: 500;
  color: var(--color-black);
}
@media screen and (min-width: 1200px) {
  .header .header-search .block-search input {
    font-size: 14px;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-search .block-search input {
    font-size: 16px;
  }
}
.header .header-search .block-search input::-moz-placeholder {
  opacity: 1;
  color: var(--text-gray);
}
.header .header-search .block-search input::placeholder {
  opacity: 1;
  color: var(--text-gray);
}
.header .header-search .block-search button {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
}
.header .header-search .block-search button img {
  max-width: 20px;
}
@media screen and (min-width: 1200px) {
  .header .header-search {
    display: block;
    width: 52.6%;
    max-width: 524px;
  }
}
.header .header-nav-list {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (min-width: 1200px) {
  .header .header-nav-list {
    gap: 8px;
    display: flex;
  }
}
@media screen and (min-width: 1280px) {
  .header .header-nav-list {
    gap: 16px;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-nav-list {
    gap: 20px;
  }
}
.header .header-nav-list .nav-list-item {
  text-decoration: none;
  color: var(--text-gray);
  transition: all 0.3s;
}
@media screen and (min-width: 1200px) {
  .header .header-nav-list .nav-list-item {
    font-size: 14px;
  }
}
@media screen and (min-width: 1440px) {
  .header .header-nav-list .nav-list-item {
    font-size: 16px;
  }
}
.header .header-nav-list .nav-list-item:hover {
  color: var(--primary-color);
}
.header .header-cart {
  display: block;
}
.header .authen-btn {
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  font-weight: 600;
  color: var(--color-white);
  transition: all 0.3s;
}
.header .authen-btn:hover {
  background: var(--color-black);
  border: 1px solid var(--color-black);
}
.header .authen-btn.btn-pc {
  display: none;
}
@media screen and (min-width: 1200px) {
  .header .authen-btn.btn-pc {
    display: block;
  }
}
.header .authen-btn.btn-mb {
  display: block;
  background: transparent;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
}
.header .authen-btn.btn-mb img {
  max-width: 24px;
}
@media screen and (min-width: 1200px) {
  .header .authen-btn.btn-mb {
    display: none;
  }
}
.header .header-menu-btn {
  cursor: pointer;
  margin-left: 10px;
}
@media screen and (min-width: 1200px) {
  .header .header-menu-btn {
    display: none;
  }
}
.header .header-menu-btn .bar {
  height: 2px;
  background: var(--primary-color);
  margin: 7px 0;
  transition: all 0.55s cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 24px;
}
.header .header-menu-btn.active .bar:nth-child(2) {
  opacity: 0;
}
.header .header-menu-btn.active .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.header .header-menu-btn.active .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
@media screen and (min-width: 1200px) {
  .header .header-mobile-menu {
    display: none;
  }
}
.header .header-mobile-menu {
  position: fixed;
  top: 63px;
  right: 0;
  background: var(--color-white);
  height: calc(100% - 63px);
  width: 100%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.3s;
  padding-bottom: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.header .header-mobile-menu .mobile-menu-item:not(:last-child) {
  border-bottom: 1px solid #cccccc;
}
.header .header-mobile-menu .item-collapse .collapse-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  transition: all 0.3s;
  padding: 14px 16px;
  font-size: 20px;
  color: #666666;
}
.header .header-mobile-menu .item-collapse .collapse-btn.collapsed {
  color: #666666;
}
.header .header-mobile-menu .item-collapse .collapse-btn.collapsed img {
  transform: rotate(0deg);
}
.header .header-mobile-menu .item-collapse .collapse-btn:not(.collapsed) {
  color: #f16723;
}
.header .header-mobile-menu .item-collapse .collapse-btn:not(.collapsed) img {
  transform: rotate(180deg);
  filter: brightness(0) saturate(100%) invert(43%) sepia(80%) saturate(826%) hue-rotate(343deg) brightness(96%) contrast(97%);
}
.header .header-mobile-menu .item-collapse .widget-cousrse-list .cousrse-list {
  background: #f7f7f7;
}
.header .header-mobile-menu .item-link {
  padding: 14px 16px;
  display: block;
  font-size: 20px;
  color: var(--text-gray);
  text-decoration: none;
  transition: all 0.3s;
}
.header .header-mobile-menu .item-link:not(:last-child) {
  border-bottom: 1px solid #cccccc;
}
.header .header-mobile-menu .item-link:hover {
  color: var(--primary-color);
}
.header .header-mobile-menu .block-search {
  margin: 20px auto 0;
  width: calc(100% - 32px);
  border-radius: 30px;
  background: #f7f7f7;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1450980392) inset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 20px;
  position: relative;
}
.header .header-mobile-menu .block-search input {
  background: transparent;
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  font-weight: 500;
  line-height: normal;
  outline: none;
  box-shadow: none;
  padding-right: 30px;
}
.header .header-mobile-menu .block-search input::-moz-placeholder {
  color: #666;
}
.header .header-mobile-menu .block-search input::placeholder {
  color: #666;
}
.header .header-mobile-menu .block-search button {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .header-mobile-menu.show {
  transition: all 0.3s;
  opacity: 1;
  pointer-events: all;
}
.header-user {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: #666;
  position: relative;
}
.header-user--btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: #666;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  padding: 0;
}
@media screen and (max-width: 1199px) {
  .header-user--btn::after {
    display: none;
  }
}
.header-user--btn-pc {
  display: none;
}
@media screen and (min-width: 1200px) {
  .header-user--btn-pc {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}
.header-user--btn-pc span {
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 1200px) {
  .header-user--btn-pc span {
    font-size: 14px;
  }
}
@media screen and (min-width: 1680px) {
  .header-user--btn-pc span {
    font-size: 16px;
  }
}
.header-user--btn-pc img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.header-user--btn-mb {
  display: block;
}
@media screen and (min-width: 1200px) {
  .header-user--btn-mb {
    display: none;
  }
}
.header-user--menu {
  right: -15% !important;
  transform: translate(0) !important;
  top: calc(100% + 20px) !important;
}
@media screen and (min-width: 992px) {
  .header-user--menu {
    right: 0 !important;
  }
}
@media screen and (min-width: 1200px) {
  .header-user--menu {
    top: calc(100% + 18px) !important;
  }
}
@media screen and (min-width: 1680px) {
  .header-user--menu {
    top: calc(100% + 25px) !important;
  }
}
.header-user--menu {
  border: 0;
  width: 229px;
  padding: 8px 8px 16px 8px;
  border-radius: 0px 0px 12px 12px;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
.header-user--menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s;
  font-size: 14px;
}
@media screen and (min-width: 1200px) {
  .header-user--menu-item {
    padding: 12px 8px;
    font-size: 16px;
  }
  .header-user--menu-item:not(:last-child) {
    margin-bottom: 4px;
  }
}
.header-user--menu-item:hover, .header-user--menu-item.active {
  background: #f7f5f2;
  color: #000;
}

.header-notification {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.header-notification.has-notification .header-notification--icon span {
  display: inline-block;
}
.header-notification.has-notification .header-notification--icon svg .path-bg {
  fill: #f16723;
}
.header-notification--icon::after {
  display: none;
}
.header-notification--icon svg .path-bg {
  fill: #fff;
}
.header-notification--icon span {
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: #eb1010;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  display: none;
  text-align: center;
  padding: 1px 3px;
}
.header-notification .dropdown-all-notification {
  padding: 8px 8px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border: 0;
  width: 330px;
}
@media screen and (min-width: 1024px) {
  .header-notification .dropdown-all-notification {
    padding: 16px;
    width: 350px;
  }
}
.header-notification .dropdown-all-notification h2 {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}
.header-notification .dropdown-show-read .dropdown-toggle::after {
  display: none;
}
.header-notification .dropdown-show-read .dropdown-menu {
  border-radius: 0px 0px 12px 12px;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px;
}
.header-notification .dropdown-show-read .dropdown-item {
  color: #333;
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.header-notification .dropdown-show-read .dropdown-item:hover {
  background: transparent;
}
.header-notification .nav-tabs {
  margin: 0 0 16px;
  border: 0;
}
.header-notification .nav-tabs .nav-link {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  padding: 4px 12px;
  border-radius: 30px;
  border: 1px solid transparent;
}
.header-notification .nav-tabs .nav-link.active {
  background: rgba(241, 103, 35, 0.1);
}
.header-notification .tab-content .status {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
}
.header-notification .tab-pane .show-all {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  margin-top: 16px;
  display: block;
  border-radius: 22px;
  background: rgba(241, 103, 35, 0.1);
  padding: 10px 16px;
  margin-top: 24px;
  text-align: center;
}
.header-notification .tab-pane .wrapper {
  max-height: 410px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #f16723 #f9f9f9;
}
@media screen and (min-width: 1200px) {
  .header-notification .tab-pane .wrapper {
    max-height: 400px;
  }
}
@media screen and (min-width: 1440px) {
  .header-notification .tab-pane .wrapper {
    max-height: 500px;
  }
}
.header-notification .tab-pane .wrapper::-webkit-scrollbar {
  width: 4px;
}
.header-notification .tab-pane .wrapper::-webkit-scrollbar-thumb {
  background: #f16723;
}
.header-notification .notification-item {
  padding: 8px 12px;
  display: grid;
  align-items: center;
  grid-template-columns: 60px 1fr 8px;
  gap: 12px;
  transition: all 0.3s ease;
  border-radius: 8px;
}
.header-notification .notification-item:hover, .header-notification .notification-item.active {
  background: #f9f9f9;
}
.header-notification .notification-image img {
  width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.header-notification .notification-name a {
  color: #333;
  font-size: 15px;
  line-height: 140%;
}
.header-notification .notification-name a strong {
  font-weight: 600;
}
.header-notification .notification-name span {
  margin-top: 4px;
  color: #666;
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
  display: block;
}
.header-notification .notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
}
.header-notification .no-notification {
  padding: 60px 0 100px;
  margin-top: 24px;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
@media screen and (min-width: 1200px) {
  .header-notification .no-notification {
    padding-bottom: 180px;
  }
}

.footer {
  position: relative;
  overflow: hidden;
}
.footer .footer--inner {
  background: var(--color-black);
}
.footer .footer-top {
  padding: 20px 0;
}
.footer .footer-top--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
@media screen and (min-width: 1200px) {
  .footer .footer-top--inner {
    gap: 60px;
  }
}
.footer .top-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  flex-shrink: 0;
}
.footer .footer-logo {
  flex: 0 0 auto;
  width: 158px;
}
@media (min-width: 768px) {
  .footer .footer-logo {
    width: 194px;
  }
}
.footer .social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 10px;
}
@media (min-width: 768px) {
  .footer .social {
    width: auto;
  }
}
.footer .social .social-link {
  flex: 0 0 auto;
  width: 32px;
}
.footer .top-right {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 992px) {
  .footer .top-right {
    flex: 1;
    width: auto;
  }
}
.footer .top-right .title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.3888888889;
  color: var(--color-white);
  margin-bottom: 5px;
}
.footer .top-right .info-list {
  display: flex;
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 5px;
  flex-wrap: wrap;
}
.footer .top-right .info-list .info-list-item {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7857142857;
  color: var(--color-white);
}
.footer .top-right .info-list .info-list-item:first-child {
  width: 100%;
}
.footer .top-right .info-list .info-list-item span {
  font-weight: 700;
}
.footer .footer-bottom {
  border-top: 1px solid var(--color-white);
  padding: 10px 0;
}
.footer .footer-bot--inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer .bot-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 10px;
}
.footer .bot-nav .bot-nav-item {
  font-size: 14px;
  line-height: 1.7857142857;
  color: var(--color-white);
  font-weight: 500;
  display: block;
  text-decoration: none;
  transition: all 0.3s;
}
.footer .bot-nav .bot-nav-item:hover {
  color: var(--primary-color);
}
.footer .bot-copyright {
  font-size: 14px;
  line-height: 1.7857142857;
  color: var(--color-white);
  font-weight: 400;
}

.common-headtitle {
  position: relative;
  display: block;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .common-headtitle {
    display: inline-block;
  }
}
.common-headtitle .title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 600;
  font-size: 28px;
  color: var(--color-black);
  background: var(--color-white);
  z-index: 1;
  padding-right: 10px;
}
.common-headtitle .line {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(100% - 0.75rem);
  height: 1px;
  background: var(--color-black);
}
@media (min-width: 768px) {
  .common-headtitle .line {
    width: 160px;
    left: 100%;
  }
}

.khoahoc-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.khoahoc-item .khoahoc-item-head {
  position: relative;
}
.khoahoc-item .khoahoc-item-head .khoahoc-image {
  border-top-left-radius: 54px;
  position: relative;
  display: block;
  overflow: hidden;
}
.khoahoc-item .khoahoc-item-head .khoahoc-image img,
.khoahoc-item .khoahoc-item-head .khoahoc-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.khoahoc-item .khoahoc-item-head .khoahoc-image::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}
.khoahoc-item .khoahoc-item-head .khoahoc-image:hover img {
  transform: scale(1.1);
}
.khoahoc-item .khoahoc-item-head .khoahoc-limit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f26724;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
  pointer-events: none;
  opacity: 0;
}
.khoahoc-item .khoahoc-item-head .khoahoc-limit img {
  flex: 0 0 auto;
  width: 20px;
}
.khoahoc-item .khoahoc-item-head .khoahoc-limit * {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
}
.khoahoc-item.limited .khoahoc-item-head .khoahoc-limit {
  opacity: 1;
}
.khoahoc-item .khoahoc-add-wishlist.active:hover .icon.active {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}
.khoahoc-item .khoahoc-add-wishlist.active:hover .dislike {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  width: 103px;
  transform: scale(1);
}
.khoahoc-item .khoahoc-add-wishlist .icon,
.khoahoc-item .khoahoc-add-wishlist .dislike {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.khoahoc-item .khoahoc-add-wishlist .icon {
  width: 32px;
  border-radius: 50%;
}
.khoahoc-item .khoahoc-add-wishlist .icon svg .fill-bg {
  fill: transparent;
  transition: fill 0.3s ease;
}
.khoahoc-item .khoahoc-add-wishlist .icon svg .fill-border {
  fill: #000;
  transition: fill 0.3s ease;
}
.khoahoc-item .khoahoc-add-wishlist .icon.active svg .fill-bg {
  fill: var(--primary-color);
}
.khoahoc-item .khoahoc-add-wishlist .icon.active svg .fill-border {
  fill: var(--primary-color);
}
.khoahoc-item .khoahoc-add-wishlist .dislike {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 30px;
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: scale(0.8);
}
.khoahoc-item .khoahoc-item-main {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-bottom-right-radius: 54px;
  background: #f7f5f2;
  padding: 19px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.khoahoc-item .khoahoc-tag {
  display: inline-block;
  padding: 0 6px;
  background: #f5eae3;
  border-radius: 30px;
  color: var(--primary-color);
  font-weight: 500;
  line-height: normal;
  min-height: 19px;
}
.khoahoc-item .khoahoc-name {
  flex: 1;
}
.khoahoc-item .khoahoc-name a {
  display: block;
  font-weight: 500;
  color: var(--color-black);
  font-size: 20px;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.3s;
}
.khoahoc-item .khoahoc-name a:hover {
  color: var(--primary-color);
}
.khoahoc-item .khoahoc-body {
  margin-top: auto;
}
.khoahoc-item .khoahoc-body .rating-gr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.khoahoc-item .khoahoc-body .rating-gr .rating-num {
  font-size: 14px;
  line-height: normal;
  font-weight: 400;
}
.khoahoc-item .khoahoc-body .price-gr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.khoahoc-item .khoahoc-body .price-gr .new-price {
  font-weight: 600;
  font-size: 28px;
  line-height: normal;
  color: var(--primary-color);
}
.khoahoc-item .khoahoc-body .price-gr .old-price {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-decoration: line-through;
  color: var(--text-gray);
}
.khoahoc-item .khoahoc-body .info-gr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item .icon {
  flex: 0 0 auto;
  width: 16px;
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item .content {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2307692308;
  color: var(--text-gray);
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #cccccc;
  opacity: 0;
  pointer-events: none;
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item:not(:first-child) {
  margin-left: 20px;
  padding-left: 20px;
}
.khoahoc-item .khoahoc-body .info-gr .info-gr-item:not(:first-child)::before {
  opacity: 1;
}
.khoahoc-item .line {
  width: 100%;
  height: 1px;
  border: 1px dashed #d9d9d9;
  margin: 12px 0 16px;
}

.rating-star {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rating-star .rating {
  position: relative;
  width: 96px;
  height: 16px;
}
.rating-star .rating::before {
  content: "";
  position: absolute;
  background-image: url(../images/star-o.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.rating-star .rating .onrating {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
}
.rating-star .rating .onrating::before {
  content: "";
  position: absolute;
  background-image: url(../images/star.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.rating-star .rating-num {
  font-size: 14px;
  line-height: normal;
  font-weight: 400;
}

.progress-percentage .progress-circle {
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  height: 36px;
  width: 36px;
  position: relative;
}
.progress-percentage .progress-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  background: url(../images/icon-cup.png) no-repeat center center #f7f5f2;
  background-size: 16px;
  height: 88%;
  width: 88%;
  border-radius: 50%;
}
.progress-percentage .progress-circle::after {
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
}

.progress-circle[data-progress="0"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(90deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="1"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(93.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="2"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(97.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="3"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(100.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="4"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(104.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="5"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(108deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="6"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(111.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="7"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(115.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="8"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(118.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="9"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(122.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="10"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(126deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="11"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="12"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="13"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="14"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="15"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(144deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="16"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(147.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="17"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(151.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="18"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(154.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="19"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(158.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="20"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(162deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="21"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(165.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="22"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(169.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="23"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(172.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="24"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(176.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="25"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(180deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="26"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(183.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="27"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(187.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="28"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(190.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="29"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(194.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="30"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(198deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="31"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(201.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="32"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(205.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="33"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(208.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="34"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(212.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="35"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(216deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="36"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(219.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="37"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(223.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="38"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(226.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="39"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(230.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="40"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(234deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="41"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(237.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="42"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(241.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="43"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(244.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="44"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(248.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="45"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(252deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="46"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(255.6deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="47"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(259.2deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="48"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(262.8deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="49"]::after {
  background-image: linear-gradient(90deg, #e2d6d0 50%, transparent 50%, transparent), linear-gradient(266.4deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="50"]::after {
  background-image: linear-gradient(-90deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="51"]::after {
  background-image: linear-gradient(-86.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="52"]::after {
  background-image: linear-gradient(-82.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="53"]::after {
  background-image: linear-gradient(-79.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="54"]::after {
  background-image: linear-gradient(-75.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="55"]::after {
  background-image: linear-gradient(-72deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="56"]::after {
  background-image: linear-gradient(-68.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="57"]::after {
  background-image: linear-gradient(-64.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="58"]::after {
  background-image: linear-gradient(-61.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="59"]::after {
  background-image: linear-gradient(-57.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="60"]::after {
  background-image: linear-gradient(-54deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="61"]::after {
  background-image: linear-gradient(-50.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="62"]::after {
  background-image: linear-gradient(-46.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="63"]::after {
  background-image: linear-gradient(-43.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="64"]::after {
  background-image: linear-gradient(-39.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="65"]::after {
  background-image: linear-gradient(-36deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="66"]::after {
  background-image: linear-gradient(-32.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="67"]::after {
  background-image: linear-gradient(-28.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="68"]::after {
  background-image: linear-gradient(-25.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="69"]::after {
  background-image: linear-gradient(-21.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="70"]::after {
  background-image: linear-gradient(-18deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="71"]::after {
  background-image: linear-gradient(-14.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="72"]::after {
  background-image: linear-gradient(-10.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="73"]::after {
  background-image: linear-gradient(-7.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="74"]::after {
  background-image: linear-gradient(-3.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="75"]::after {
  background-image: linear-gradient(0deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="76"]::after {
  background-image: linear-gradient(3.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="77"]::after {
  background-image: linear-gradient(7.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="78"]::after {
  background-image: linear-gradient(10.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="79"]::after {
  background-image: linear-gradient(14.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="80"]::after {
  background-image: linear-gradient(18deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="81"]::after {
  background-image: linear-gradient(21.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="82"]::after {
  background-image: linear-gradient(25.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="83"]::after {
  background-image: linear-gradient(28.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="84"]::after {
  background-image: linear-gradient(32.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="85"]::after {
  background-image: linear-gradient(36deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="86"]::after {
  background-image: linear-gradient(39.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="87"]::after {
  background-image: linear-gradient(43.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="88"]::after {
  background-image: linear-gradient(46.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="89"]::after {
  background-image: linear-gradient(50.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="90"]::after {
  background-image: linear-gradient(54deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="91"]::after {
  background-image: linear-gradient(57.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="92"]::after {
  background-image: linear-gradient(61.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="93"]::after {
  background-image: linear-gradient(64.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="94"]::after {
  background-image: linear-gradient(68.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="95"]::after {
  background-image: linear-gradient(72deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="96"]::after {
  background-image: linear-gradient(75.6deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="97"]::after {
  background-image: linear-gradient(79.2deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="98"]::after {
  background-image: linear-gradient(82.8deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="99"]::after {
  background-image: linear-gradient(86.4deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.progress-circle[data-progress="100"]::after {
  background-image: linear-gradient(90deg, var(--primary-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary-color) 50%, #e2d6d0 50%, #e2d6d0);
}

.common-site-banner {
  position: relative;
  padding: 60px 0;
  background: var(--color-white);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.common-site-banner .site-banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.common-site-banner .site-banner-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(241, 103, 35, 0.85);
  z-index: 1;
}
.common-site-banner .site-banner-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.common-site-banner .site-banner-main {
  position: relative;
  z-index: 1;
}
.common-site-banner .site-banner-main--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.common-site-banner .title {
  font-size: 36px;
  margin-bottom: 16px;
  color: var(--color-white);
  margin-top: 0;
}
.common-site-banner .breadcrumb * {
  font-size: 16px;
  line-height: 100%;
  color: var(--color-white) !important;
  text-decoration: none;
}
.common-site-banner .breadcrumb *::before {
  color: var(--color-white) !important;
}

.paginate-site {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.paginate-site > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  aspect-ratio: 1/1;
  color: var(--color-black);
  font-size: 20px;
  line-height: 100%;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.54px;
  border-radius: 50%;
  text-decoration: none;
}
.paginate-site > *:not(.svg, .dot).is-active {
  background: var(--primary-color);
  color: var(--color-white);
  font-weight: 600;
}

.header-secondary {
  padding: 12px 0;
  background: #fff;
  position: relative;
  z-index: 9999;
}
@media screen and (min-width: 1200px) {
  .header-secondary {
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
  }
}
@media screen and (min-width: 1680px) {
  .header-secondary .container-fluid {
    --bs-gutter-x: 60px;
  }
}
.header-secondary .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media screen and (min-width: 1200px) {
  .header-secondary .wrapper {
    flex-wrap: nowrap;
  }
}
.header-secondary .logo {
  width: 130px;
  display: inline-flex;
  flex-direction: 0;
}
@media screen and (min-width: 1680px) {
  .header-secondary .logo {
    width: 180px;
  }
}
.header-secondary .header__actions {
  order: 3;
  flex-grow: 1;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.1);
  margin: 0 -12px;
  border-bottom: 1px solid #eaeaea;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .header-secondary .header__actions {
    width: auto;
    box-shadow: none;
    border-bottom: none;
    margin: 0 0 0 18px;
    padding: 0;
    order: 2;
    align-items: stretch;
  }
}
@media screen and (min-width: 1440px) {
  .header-secondary .header__actions {
    margin-left: 48px;
  }
}
.header-secondary .header__title {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 10px;
  flex-grow: 1;
  width: 100%;
  margin-top: 0;
}
@media screen and (min-width: 1200px) {
  .header-secondary .header__title {
    margin-bottom: 0;
    margin-top: 0;
    order: unset;
    flex-grow: unset;
    width: unset;
    align-self: center;
    white-space: nowrap;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (min-width: 1440px) {
  .header-secondary .header__title {
    max-width: 450px;
  }
}
@media screen and (min-width: 1680px) {
  .header-secondary .header__title {
    max-width: 500px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .header-secondary .header__progress {
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px solid #eaeaea;
  }
}
@media screen and (min-width: 1440px) {
  .header-secondary .header__progress {
    padding-left: 24px;
    margin-left: 24px;
    border-left: 1px solid #eaeaea;
  }
}
.header-secondary .header__wishlist.active .bg-icon,
.header-secondary .header__wishlist.active .stroke-icon {
  fill: #f16723;
}
.header-secondary .header__wishlist, .header-secondary .header__share-course {
  padding-left: 24px;
  margin-left: 24px;
  border-left: 1px solid #eaeaea;
  color: #000;
}
.header-secondary .header__wishlist.active, .header-secondary .header__wishlist:hover, .header-secondary .header__share-course.active, .header-secondary .header__share-course:hover {
  color: var(--primary-color);
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .header-secondary .header__wishlist, .header-secondary .header__share-course {
    padding-left: 12px;
    margin-left: 12px;
  }
}
.header-secondary .btn-back {
  order: 2;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 8px 16px;
  height: 42px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.header-secondary .btn-back:hover {
  background: var(--primary-color);
  color: #fff;
}
.header-secondary .btn-back:hover svg path {
  fill: #fff;
}

/* Page-specific styles */
.home-banner-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .home-banner-section {
    margin-bottom: 80px;
  }
}
.home-banner-section .home-banner-slider {
  position: relative;
}
.home-banner-section .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .home-banner-section .swiper-pagination {
    margin-top: 20px;
  }
}
.home-banner-section .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background: #fbd7c5;
  opacity: 1;
}
@media (min-width: 768px) {
  .home-banner-section .swiper-pagination .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    margin: 0 3px;
  }
}
@media (min-width: 1400px) {
  .home-banner-section .swiper-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    margin: 0 5px;
  }
}
.home-banner-section .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary-color);
}
.home-banner-section .swiper-button-next,
.home-banner-section .swiper-button-prev {
  color: #c7c7c7;
  height: 40px;
}
.home-banner-section .swiper-button-next::after,
.home-banner-section .swiper-button-prev::after {
  font-size: 40px;
  font-weight: 700;
}

.home-sapo-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .home-sapo-section {
    margin-bottom: 80px;
  }
}
.home-sapo-section .home-sapo--inner {
  max-width: 1209px;
  margin: 0 auto;
}
.home-sapo-section .home-sapo-content {
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  color: var(--color-black);
}
@media (min-width: 768px) {
  .home-sapo-section .home-sapo-content {
    font-size: 24px;
  }
}
@media (min-width: 992px) {
  .home-sapo-section .home-sapo-content {
    font-size: 28px;
  }
}
@media (min-width: 1400px) {
  .home-sapo-section .home-sapo-content {
    font-size: 36px;
  }
}
.home-sapo-section .home-sapo-content span {
  display: block;
}

.home-khoahoc-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .home-khoahoc-section {
    margin-bottom: 80px;
  }
}

.home-uudai-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .home-uudai-section {
    margin-bottom: 80px;
  }
}

.home-news-section {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  margin-bottom: 40px;
}
.home-news-section .swiper-pagination {
  position: static;
  margin: 20px 0;
  text-align: center;
}
.home-news-section .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--color-white);
  opacity: 0.3;
}
.home-news-section .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}
@media (min-width: 992px) {
  .home-news-section {
    margin-bottom: 80px;
    padding: 80px 0;
  }
}
@media (min-width: 768px) {
  .home-news-section .common-headtitle .title {
    background: transparent;
  }
}
.home-news-section .home-news-background {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  height: 72.33%;
  overflow: hidden;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.home-news-section .home-news-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(241, 103, 35, 0.9);
  z-index: 1;
}
.home-news-section .home-news-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (min-width: 768px) {
  .home-news-section .home-news-background {
    top: 0;
    bottom: unset;
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .home-news-section .home-news-background {
    border-top-left-radius: 200px;
    border-bottom-right-radius: 200px;
  }
}
@media (min-width: 1300px) {
  .home-news-section .home-news-background {
    max-width: 93.75vw;
  }
}
.home-news-section .home-news--inner {
  position: relative;
  z-index: 1;
}
.home-news-section .home-news-mb-slider {
  position: relative;
  padding-bottom: 40px;
  margin-bottom: 20px;
}
.home-news-section .home-news-mb-slider .news-list-item {
  margin-bottom: 0;
}
.home-news-section .home-news-mb-slider .swiper-pagination {
  bottom: 0;
  margin-top: 0;
}
.home-news-section .home-news-mb-slider .swiper-pagination .swiper-pagination-bullet {
  background: var(--color-white);
}

.home-about-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .home-about-section {
    margin-bottom: 80px;
  }
}
.home-about-section .home-about-media {
  position: relative;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .home-about-section .home-about-media {
    margin-bottom: 0;
  }
}
.home-about-section .home-about-media .about-image {
  width: 87%;
  position: relative;
  display: block;
  overflow: hidden;
}
.home-about-section .home-about-media .about-image img,
.home-about-section .home-about-media .about-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.home-about-section .home-about-media .about-image::before {
  content: "";
  display: block;
  padding-bottom: 102%;
}
.home-about-section .home-about-media .about-image {
  border-top-left-radius: 118px;
}
.home-about-section .home-about-media .about-video {
  position: relative;
  border: 8px solid var(--color-white);
  max-width: 64.94%;
  margin-top: -17px;
  border-radius: 36px;
  margin-left: auto;
  overflow: hidden;
}
.home-about-section .home-about-media .about-video .video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.home-about-section .home-about-media .about-video .video {
  position: relative;
  display: block;
  overflow: hidden;
}
.home-about-section .home-about-media .about-video .video img,
.home-about-section .home-about-media .about-video .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.home-about-section .home-about-media .about-video .video::before {
  content: "";
  display: block;
  padding-bottom: 54.34%;
}
.home-about-section .home-about-main {
  position: relative;
}
.home-about-section .about-main-head {
  max-width: 309px;
  font-weight: 600;
  font-size: 24px;
  color: var(--primary-color);
  margin-bottom: 20px;
}
.home-about-section .about-main-body {
  font-size: 16px;
  color: var(--color-black);
  font-weight: 400;
}
.home-about-section .about-main-list {
  position: relative;
}
.home-about-section .about-main-list .about-main-list-item {
  margin-bottom: 20px;
  padding-left: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .home-about-section .about-main-list .about-main-list-item {
    padding-left: 20px;
  }
}
.home-about-section .about-main-list .about-main-list-item .icon {
  flex: 0 0 auto;
  width: 48px;
}
.home-about-section .about-main-list .about-main-list-item .content {
  flex: 1;
  margin-left: 30px;
}
@media (min-width: 768px) {
  .home-about-section .about-main-list .about-main-list-item .content {
    margin-left: 46px;
  }
}
.home-about-section .about-main-list .about-main-list-item .content .title {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 6px;
}
.home-about-section .about-main-list .about-main-list-item .content .sapo {
  font-size: 16px;
  color: var(--color-black);
  font-weight: 400;
}

.news-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 1200px) {
  .news-list-item {
    flex-direction: row;
    gap: 12px;
  }
}
.news-list-item .list-item-image {
  flex: 0 0 auto;
  width: 90%;
  position: relative;
  display: block;
  overflow: hidden;
}
.news-list-item .list-item-image img,
.news-list-item .list-item-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.news-list-item .list-item-image::before {
  content: "";
  display: block;
  padding-bottom: 56.37%;
}
.news-list-item .list-item-image {
  border-top-left-radius: 54px;
  z-index: 1;
}
@media (min-width: 1200px) {
  .news-list-item .list-item-image {
    width: 259px;
  }
}
.news-list-item .list-item-image img {
  transition: all 0.3s;
}
.news-list-item .list-item-image:hover img {
  transform: scale(1.1);
}
.news-list-item .list-item-main {
  position: relative;
  padding: 20px 12px;
  width: 100%;
}
@media (min-width: 1200px) {
  .news-list-item .list-item-main {
    margin-top: 30px;
    padding: 20px 12px 20px 0;
  }
}
.news-list-item .list-item-main::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 141%;
  width: 100%;
  background: var(--color-white);
  border-bottom-right-radius: 54px;
}
@media (min-width: 1200px) {
  .news-list-item .list-item-main::before {
    top: 0;
    bottom: unset;
    width: 141%;
    height: 100%;
  }
}
.news-list-item .list-item-main .list-item-main--inner {
  position: relative;
  z-index: 1;
  background: var(--color-white);
}
.news-list-item .list-item-main .date {
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 10px;
  line-height: 100%;
}
.news-list-item .list-item-main .list-item-title {
  font-size: 20px;
  line-height: 1.2;
  min-height: 48px;
  font-weight: 500;
  color: var(--color-black);
  display: block;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s;
}
.news-list-item .list-item-main .list-item-title:hover {
  color: var(--primary-color);
}
.news-list-item .list-item-main .sapo {
  font-weight: 400;
  color: #8c8c8c;
  font-size: 16px;
  line-height: 1.1875;
  min-height: 38px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-list-item .list-item-main .list-item-action {
  display: inline-block;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 16px;
}
.news-list-item.news-item-column {
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.news-list-item.news-item-column .list-item-image {
  width: 90%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.news-list-item.news-item-column .list-item-main {
  padding: 20px 12px;
  margin-top: 0;
}
.news-list-item.news-item-column .list-item-main::before {
  top: unset;
  bottom: 0;
  right: 0;
  height: 141%;
  width: 100%;
  background: var(--color-white);
  border-bottom-right-radius: 54px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.khoahoc-list-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 60px;
  min-height: 65vh;
}
@media (min-width: 768px) {
  .khoahoc-list-wrapper {
    padding-top: 32px;
    padding-bottom: 80px;
  }
}
.khoahoc-list-wrapper .khoahoc-list-head {
  margin-bottom: 32px;
  font-size: 20px;
  color: var(--color-black);
  font-weight: 600;
  line-height: normal;
}
.khoahoc-list-wrapper .khoahoc-list-head span {
  color: var(--primary-color);
}
.khoahoc-list-wrapper .paginate-site {
  margin-top: 20px;
}

.khoahoc-detail-wrapper {
  position: relative;
}
.khoahoc-detail-wrapper .khoahoc-detail-head {
  position: relative;
  overflow: hidden;
  background: #f7f5f2;
  padding: 30px 0;
}
@media (min-width: 992px) {
  .khoahoc-detail-wrapper .khoahoc-detail-head {
    padding: 50px 0;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-video {
  position: relative;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  .khoahoc-detail-wrapper .khoahoc-detail-video {
    margin-bottom: 0;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-video .video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.khoahoc-detail-wrapper .khoahoc-detail-video .video {
  position: relative;
  display: block;
  overflow: hidden;
}
.khoahoc-detail-wrapper .khoahoc-detail-video .video img,
.khoahoc-detail-wrapper .khoahoc-detail-video .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.khoahoc-detail-wrapper .khoahoc-detail-video .video::before {
  content: "";
  display: block;
  padding-bottom: 56.28%;
}
.khoahoc-detail-wrapper .khoahoc-detail-info {
  margin-top: 20px;
}
.khoahoc-detail-wrapper .khoahoc-detail-info .title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 100%;
  color: var(--color-black);
  font-weight: 700;
}
@media (min-width: 768px) {
  .khoahoc-detail-wrapper .khoahoc-detail-info .title {
    font-size: 36px;
    margin-bottom: 20px;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-info .desc {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}
.khoahoc-detail-wrapper .khoahoc-detail-info .info-w-icon {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.khoahoc-detail-wrapper .khoahoc-detail-info .info-w-icon .icon {
  flex: 0 0 auto;
  width: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.khoahoc-detail-wrapper .khoahoc-detail-info .info-w-icon .text {
  font-size: 16px;
  line-height: 100%;
  font-weight: 400;
  color: var(--color-black);
}
.khoahoc-detail-wrapper .khoahoc-detail-info .rating-gr {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.khoahoc-detail-wrapper .khoahoc-detail-info .rating-gr .rating-num {
  font-size: 16px;
  color: var(--color-black);
  line-height: 100%;
  font-weight: 400;
}
.khoahoc-detail-wrapper .khoahoc-detail-main {
  position: relative;
  padding: 30px 0;
}
@media (min-width: 768px) {
  .khoahoc-detail-wrapper .khoahoc-detail-main {
    padding: 50px 0;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-nav {
  display: grid;
  justify-content: flex-start;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  overflow: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  grid-template-columns: unset;
}
.khoahoc-detail-wrapper .khoahoc-detail-nav::-webkit-scrollbar {
  display: none;
  width: 0;
}
.khoahoc-detail-wrapper .khoahoc-detail-nav > * {
  scroll-snap-align: start;
}
@media (min-width: 992px) {
  .khoahoc-detail-wrapper .khoahoc-detail-nav {
    gap: 0;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-nav .nav-item {
  /* &:nth-child(1),
  &:nth-child(2) {
  	flex: 0 0 100%;
  	max-width: calc(50% - (10px / 2));
  }

  &:nth-child(n + 3) {
  	flex: 0 0 100%;
  	max-width: calc((100% / 3) - (10px / 3 * 2));
  }

  @media (min-width: 992px) {
  	flex: 1 !important;

  	& > * {
  		flex: 1 !important;
  	}
  } */
}
.khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link {
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 2px solid #dddddd;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  color: var(--text-gray);
  transition: all 0.3s;
  padding: 10px 16px;
}
@media (min-width: 992px) {
  .khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link {
    font-size: 14px;
  }
}
@media screen and (min-width: 1200px) {
  .khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link {
    min-width: 171px;
  }
}
@media (min-width: 1400px) {
  .khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link {
    font-size: 16px;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link:hover {
  color: var(--primary-color);
}
.khoahoc-detail-wrapper .khoahoc-detail-nav .nav-link.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}
.khoahoc-detail-wrapper .khoahoc-detail-side {
  position: sticky;
  top: 0;
  margin-bottom: 60px;
  background: var(--color-white);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 24px 12px;
}
@media (min-width: 768px) {
  .khoahoc-detail-wrapper .khoahoc-detail-side {
    margin-bottom: 0;
    top: 80px;
  }
}
@media (min-width: 1200px) {
  .khoahoc-detail-wrapper .khoahoc-detail-side {
    top: 100px;
  }
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group {
  margin-bottom: 20px;
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group label span {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  display: block;
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group label span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group label span:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--primary-color);
  border-radius: 50%;
  display: none;
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group label input {
  display: none;
}
.khoahoc-detail-wrapper .khoahoc-detail-side .expried-group label input:checked + span:after {
  display: block;
}
.khoahoc-detail-wrapper .detail-side-action {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .khoahoc-detail-wrapper .detail-side-action {
    margin-bottom: 40px;
  }
}
.khoahoc-detail-wrapper .detail-side-action .side-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  padding: 16px;
  background: var(--primary-color);
  color: var(--color-white);
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 4px;
  transition: all 0.3s;
}
.khoahoc-detail-wrapper .detail-side-action .side-action:hover:not(.btn-add-wishlist) {
  background: var(--color-black);
}
.khoahoc-detail-wrapper .detail-side-action .side-action:not(:last-child) {
  margin-bottom: 12px;
}
.khoahoc-detail-wrapper .detail-side-action .btn-add-wishlist {
  background: transparent;
  border: 1px solid var(--orange, #f16723);
  color: #000;
}
.khoahoc-detail-wrapper .detail-side-action .btn-add-wishlist.active svg path {
  fill: var(--orange, #f16723);
  stroke: var(--orange, #f16723);
}
.khoahoc-detail-wrapper .detail-side-block:not(:last-child) {
  margin-bottom: 40px;
}
.khoahoc-detail-wrapper .detail-side-block .side-block-head {
  font-weight: 500;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 16px;
}
.khoahoc-detail-wrapper .detail-side-block .side-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #dddddd;
}
.khoahoc-detail-wrapper .detail-side-block .side-info-item:first-child {
  padding-top: 0;
}
.khoahoc-detail-wrapper .detail-side-block .side-info-item .title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.khoahoc-detail-wrapper .detail-side-block .side-info-item .title .icon {
  flex: 0 0 auto;
  width: 24px;
  flex-shrink: 0;
}
.khoahoc-detail-wrapper .detail-side-block .side-info-item .text {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}
.khoahoc-detail-wrapper .detail-side-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.khoahoc-detail-wrapper .detail-side-social .social-link {
  flex: 0 0 auto;
}
.khoahoc-detail-wrapper .detail-side-promotion {
  margin-bottom: 20px;
}
.khoahoc-detail-wrapper .detail-side-promotion .promotion-price {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.khoahoc-detail-wrapper .detail-side-promotion .promotion-price .price .new-price {
  font-weight: 600;
  font-size: 36px;
  line-height: 100%;
  color: #ff0000;
  margin-bottom: 10px;
}
.khoahoc-detail-wrapper .detail-side-promotion .promotion-price .price .old-price {
  font-size: 16px;
  line-height: 100%;
  text-decoration: line-through;
  color: #969696;
  font-weight: 600;
}
.khoahoc-detail-wrapper .detail-side-promotion .promotion-price .discount {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  font-size: 15px;
  line-height: 100%;
  color: var(--primary-color);
}
.khoahoc-detail-wrapper .detail-side-promotion .promotion-time {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-direction: column;
}
@media (min-width: 1200px) {
  .khoahoc-detail-wrapper .detail-side-promotion .promotion-time {
    flex-direction: row;
    align-items: center;
  }
}
.khoahoc-detail-wrapper .detail-side-coupon {
  position: relative;
  display: flex;
}
.khoahoc-detail-wrapper .detail-side-coupon input {
  flex: 1;
  width: 100%;
  border: 1px dashed #f16723;
  background: rgba(241, 103, 35, 0.1);
  padding: 10px 12px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  outline: none;
  box-shadow: none;
}
.khoahoc-detail-wrapper .detail-side-coupon button {
  padding: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background: var(--primary-color);
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  border: 1px solid transparent;
  outline: none;
  box-shadow: none;
  transition: all 0.3s;
}
.khoahoc-detail-wrapper .detail-side-coupon button:hover {
  background: var(--color-black);
}
.khoahoc-detail-wrapper .khoahoc-detail-relative {
  position: relative;
  padding-bottom: 80px;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-relative-head {
  margin-bottom: 30px;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider {
  position: relative;
  padding-bottom: 40px;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider .swiper-slide {
  height: auto;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider .swiper-pagination {
  bottom: 0;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--primary-color);
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-next,
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-prev {
  width: 30px;
  height: 40px;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-next::after,
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-prev::after {
  color: var(--primary-color);
  font-size: 30px;
  font-weight: 700;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-prev {
  left: -40px;
}
.khoahoc-detail-wrapper .khoahoc-detail-relative .khoahoc-detail-slider.khoahoc-slider-pc .swiper-button-next {
  right: -40px;
}

.khoahoc-tongquan-notice {
  padding: 10px;
  border-radius: 4px;
  background: rgba(241, 103, 35, 0.1);
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
@media (min-width: 992px) {
  .khoahoc-tongquan-notice {
    gap: 30px;
    align-items: center;
  }
}
.khoahoc-tongquan-notice .notice-tag {
  display: block;
  padding: 5px;
  border-radius: 4px;
  background: var(--primary-color);
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  flex-shrink: 0;
}
.khoahoc-tongquan-notice .notice-date {
  font-weight: 500;
  color: var(--primary-color);
  font-size: 16px;
  line-height: 1;
}
.khoahoc-tongquan-notice .notice-text {
  font-weight: 400;
}
.khoahoc-tongquan-notice .notice-info {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.khoahoc-tongquan-notice .notice-info p {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .khoahoc-tongquan-notice .notice-info {
    flex-direction: row;
    gap: 30px;
    align-items: center;
  }
}

.khoahoc-tongquan-body {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-black);
}

.khoahoc-chuongtrinh-wrapper .accordion-body {
  padding: 4px 12px;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  gap: 10px;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item > div:first-child {
  flex: 0 0 auto;
  width: 100%;
  align-items: flex-start;
}
@media (min-width: 992px) {
  .khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item > div:first-child {
    width: auto;
    align-items: center;
  }
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item > div:last-child {
  justify-content: flex-end;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .icon {
  flex: 0 0 auto;
  width: 20px;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .chuongtrinh-item-title {
  flex: 1;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
  text-align: left;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .date {
  flex: 0 0 100%;
  max-width: 90px;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .date .preview {
  border-radius: 4px;
  padding: 6px 18px;
  background: #4f71c6;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .date .question {
  padding: 4px 14px;
  border-radius: 4px;
  background: #eefaf8;
  color: #007369;
  font-size: 14px;
  font-weight: 400;
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item .date .time {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
}
.khoahoc-chuongtrinh-wrapper .chuongtrinh-preview-item:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}

.khoahoc-giangvien-wrapper .giangvien-info {
  margin-bottom: 20px;
}
.khoahoc-giangvien-wrapper .giangvien-image {
  position: relative;
  display: block;
  overflow: hidden;
}
.khoahoc-giangvien-wrapper .giangvien-image img,
.khoahoc-giangvien-wrapper .giangvien-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.khoahoc-giangvien-wrapper .giangvien-image::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.khoahoc-giangvien-wrapper .giangvien-image {
  margin-bottom: 10px;
}
.khoahoc-giangvien-wrapper .giangvien-name {
  font-size: 20px;
  color: var(--color-black);
  font-weight: 500;
  margin-bottom: 10px;
}
.khoahoc-giangvien-wrapper .giangvien-pos {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
  margin-bottom: 0;
}
.khoahoc-giangvien-wrapper .giangvien-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
}

.khoahoc-danhgia-wrapper .danhgia-overview-total {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  background: var(--color-white);
  border-radius: 4px;
  padding: 30px;
}
@media (min-width: 992px) {
  .khoahoc-danhgia-wrapper .danhgia-overview-total {
    padding: 0;
    margin-bottom: 0;
  }
}
.khoahoc-danhgia-wrapper .danhgia-overview-total .total-number {
  font-weight: 500;
  font-size: 36px;
  color: var(--primary-color);
  line-height: 1;
}
.khoahoc-danhgia-wrapper .danhgia-overview-total .rating-gr {
  text-align: center;
}
.khoahoc-danhgia-wrapper .danhgia-overview-total .rating {
  margin-bottom: 10px;
}
.khoahoc-danhgia-wrapper .danhgia-overview-total .rating-num {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-black);
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart {
  padding: 10px 0;
}
@media (min-width: 992px) {
  .khoahoc-danhgia-wrapper .danhgia-overview-chart {
    padding: 3px 0;
  }
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line {
  position: relative;
  display: flex;
  align-items: center;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line:not(:last-child) {
  margin-bottom: 10px;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line {
  gap: 9px;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .star {
  display: flex;
  align-items: center;
  gap: 9px;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .star span {
  flex: 0 0 13px;
  color: var(--color-black);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .star svg {
  flex: 0 0 16px;
  display: block;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .progress-bar-rating {
  width: 100%;
  display: inline-block;
  height: 8px;
  background-color: #dddddd;
  border-radius: 100px;
  position: relative;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .progress-bar-rating .rate-count-show {
  position: absolute;
  display: inline-block;
  height: 8px;
  border-radius: 3px;
  top: 0;
  left: 0;
  max-width: 100%;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .progress-bar-rating .five-star {
  background: #f8b81f;
}
.khoahoc-danhgia-wrapper .danhgia-overview-chart .box-evaluation-line .total-rate {
  flex: 0 0 7%;
  color: var(--color-black);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  text-align: right;
}
.khoahoc-danhgia-wrapper .danhgia-overview-comment {
  margin-top: 30px;
}
.khoahoc-danhgia-wrapper .danhgia-overview-comment .danhgia-comment-cta {
  margin-top: 40px;
  text-align: center;
}
.khoahoc-danhgia-wrapper .danhgia-overview-comment .danhgia-comment-cta button {
  padding: 16px;
  min-width: 100%;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  transition: all 0.3s;
}
.khoahoc-danhgia-wrapper .danhgia-overview-comment .danhgia-comment-cta button:hover {
  background: var(--primary-color);
  color: var(--color-white);
}
@media (min-width: 768px) {
  .khoahoc-danhgia-wrapper .danhgia-overview-comment .danhgia-comment-cta button {
    min-width: 48%;
    width: auto;
  }
}
.khoahoc-danhgia-wrapper .danhgia-comment-section {
  margin-top: 30px;
}

.khoahoc-chuongtrinhModal .modal-content {
  position: relative;
  padding: 40px 20px;
  background: var(--color-white);
}
.khoahoc-chuongtrinhModal .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 20px;
  font-weight: 100;
  outline: none;
}
.khoahoc-chuongtrinhModal .modal-title {
  font-weight: 500;
  font-size: 28px;
  color: var(--color-black);
  margin-bottom: 20px;
}
.khoahoc-chuongtrinhModal .media {
  margin-bottom: 60px;
}
.khoahoc-chuongtrinhModal .media img,
.khoahoc-chuongtrinhModal .media video,
.khoahoc-chuongtrinhModal .media iframe {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.khoahoc-chuongtrinhModal .media video,
.khoahoc-chuongtrinhModal .media iframe {
  aspect-ratio: 16/9;
}
.khoahoc-chuongtrinhModal .chuongtrinh-name {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

.khoahoc-detail-mb-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px 8px;
  background: var(--color-white);
  box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 10;
  transition: all 0.3s;
}
.khoahoc-detail-mb-action .detail-mb-action {
  display: block;
  text-align: center;
  padding: 16px 8px;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 4px;
  transition: all 0.3s;
  border: 1px solid var(--primary-color);
  font-size: 14px;
}
.khoahoc-detail-mb-action .detail-mb-action.btn-add-wishlist {
  max-height: 52px;
}
.khoahoc-detail-mb-action .detail-mb-action.btn-add-wishlist.active svg path {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}
.khoahoc-detail-mb-action .detail-mb-action:not(.btn-add-wishlist) {
  background: var(--primary-color);
  color: var(--color-white);
}
.khoahoc-detail-mb-action .detail-mb-action:hover {
  background: var(--color-black);
}
.khoahoc-detail-mb-action.hide {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

#flipdown {
  margin: 0;
}
#flipdown .psgTimer_numbers {
  display: flex;
}
#flipdown .psgTimer_numbers > div {
  width: 50px;
}
#flipdown .psgTimer_numbers > div::after {
  height: 16px;
  line-height: 100%;
  font-size: 16px;
  top: 50%;
  right: -3px;
  transform: translateY(-50%);
}
#flipdown .psgTimer_numbers > div > div {
  width: auto;
  height: auto;
  padding: 4px;
  background: var(--primary-color);
  color: var(--color-white);
  line-height: 100%;
  font-size: 16px;
}
#flipdown .psgTimer_numbers > div > div:first-child {
  margin-right: 1px;
}
#flipdown .psgTimer_labels > div {
  width: 50px;
  color: var(--color-black);
  text-transform: none;
}

.timkiem-head {
  position: relative;
  padding: 60px 0;
  background: var(--color-white);
}
.timkiem-head .timkiem-head-backgorund {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.timkiem-head .timkiem-head-backgorund::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(241, 103, 35, 0.85);
  z-index: 1;
}
.timkiem-head .timkiem-head-backgorund img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.timkiem-head .timkiem-head-main {
  position: relative;
  z-index: 1;
}
.timkiem-head .timkiem-head-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--color-white);
  margin-bottom: 20px;
}
.timkiem-head .timkiem-head-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f7f7;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;
  border-radius: 30px;
  padding: 10px 20px;
}
.timkiem-head .timkiem-head-search input {
  flex: 1;
  width: 100%;
  outline: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
.timkiem-head .timkiem-head-search button {
  flex: 0 0 auto;
  width: 20px;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.timkiem-body {
  position: relative;
  background: var(--color-white);
  padding: 40px 0;
}

.timkiem-body-head {
  margin-bottom: 30px;
}

.timkiem-result-info {
  margin-bottom: 60px;
}
.timkiem-result-info .result-info-text {
  font-size: 22px;
  color: var(--color-black);
  font-weight: 600;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .timkiem-result-info .result-info-text {
    font-size: 36px;
  }
}
.timkiem-result-info .result-info-count {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
}
.timkiem-result-info .result-info-count span {
  color: var(--primary-color);
}

.timkiem-result-cta {
  display: block;
  padding: 10px 12px;
  flex: 1;
  text-align: center;
  background: #eeeeee;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-gray);
  transition: all 0.3s;
}
@media (min-width: 768px) {
  .timkiem-result-cta {
    flex: 0 0 auto;
    min-width: 200px;
  }
}
.timkiem-result-cta:hover {
  background: var(--primary-color);
  color: var(--color-white);
}
.timkiem-result-cta.active {
  background: var(--primary-color);
  color: var(--color-white);
}

.timkiem-notfound-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0 60px;
  min-height: 50vh;
}
.timkiem-notfound-wrapper .img-notfound {
  max-width: 300px;
  margin-bottom: 20px;
}
.timkiem-notfound-wrapper .notfound-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
  text-align: center;
}

.baiviet-list-wrapper {
  position: relative;
  padding: 80px 0 80px;
  background: var(--color-white);
}
.baiviet-list-wrapper.baiviet-list-mb {
  padding: 80px 0;
}

.baiviet-list-side {
  position: sticky;
  padding: 40px 12px;
  background: var(--color-white);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .baiviet-list-side {
    top: 80px;
  }
}
@media (min-width: 1200px) {
  .baiviet-list-side {
    top: 100px;
  }
}
.baiviet-list-side .side-block-title {
  font-size: 28px;
  color: var(--color-black);
  margin-bottom: 20px;
  font-weight: 500;
}
.baiviet-list-side .side-block:not(:last-child) {
  margin-bottom: 60px;
}
.baiviet-list-side .baiviet-side-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  display: flex;
  align-items: center;
  gap: 12px;
}
.baiviet-list-side .baiviet-side-item:last-child {
  margin-bottom: 0;
}
.baiviet-list-side .baiviet-side-item .item-image {
  flex: 0 0 auto;
  width: 100px;
  position: relative;
  display: block;
  overflow: hidden;
}
.baiviet-list-side .baiviet-side-item .item-image img,
.baiviet-list-side .baiviet-side-item .item-image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.3s;
}
.baiviet-list-side .baiviet-side-item .item-image::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.baiviet-list-side .baiviet-side-item .item-image {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}
.baiviet-list-side .baiviet-side-item .item-image img {
  transition: all 0.3s;
}
.baiviet-list-side .baiviet-side-item .item-image:hover img {
  transform: scale(1.1);
}
.baiviet-list-side .baiviet-side-item .item-info {
  flex: 1;
}
.baiviet-list-side .baiviet-side-item .item-info .date {
  font-weight: 500;
  font-size: 16px;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.baiviet-list-side .baiviet-side-item .item-info .item-title {
  font-weight: 500;
  font-size: 20px;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s;
  text-decoration: none;
}
.baiviet-list-side .baiviet-side-item .item-info .item-title:hover {
  color: var(--primary-color);
}

.collapse-wrapper {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}

.phanloai-item {
  padding: 14px 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  display: block;
  width: 100%;
  text-align: left;
  transition: all 0.3s;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-gray);
  border: 0;
}
.phanloai-item:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}
.phanloai-item.active, .phanloai-item:hover {
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
}
.phanloai-item:first-child {
  padding-top: 0;
}

.baiviet-mb-phanloai {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 10px 0;
  z-index: 3;
}
.baiviet-mb-phanloai .mb-phanloai-btn {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  width: 100%;
  gap: 10px;
  font-weight: 500;
  font-size: 20px;
  color: var(--color-black);
  border-radius: 4px;
  background: rgba(241, 103, 35, 0.1);
  border: 0;
}
.baiviet-mb-phanloai .mb-phanloai-btn[aria-expanded=true] {
  border-bottom: 1px solid var(--primary-color);
  border-radius: 4px 4px 0 0;
}
.baiviet-mb-phanloai .mb-phanloai-btn img {
  flex: 0 0 auto;
  width: 24px;
}
.baiviet-mb-phanloai .phanloai-item {
  font-size: 16px;
  padding: 12px;
}
.baiviet-mb-phanloai .phanloai-item:first-child {
  padding-top: 12px;
}
.baiviet-mb-phanloai.pinned {
  position: fixed;
  top: 63px;
}

.baiviet-detail-wrapper {
  position: relative;
  padding: 30px 0 80px;
  background: var(--color-white);
}
.baiviet-detail-wrapper.baiviet-detail-mb {
  padding: 80px 0;
}
.baiviet-detail-wrapper .site-breadcrumb {
  margin-bottom: 30px;
}
.baiviet-detail-wrapper .baiviet-detail-head {
  margin-bottom: 42px;
}
.baiviet-detail-wrapper .baiviet-detail-head .title {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--color-black);
  font-weight: 500;
}
@media (min-width: 768px) {
  .baiviet-detail-wrapper .baiviet-detail-head .title {
    font-size: 28px;
  }
}
@media (min-width: 1200px) {
  .baiviet-detail-wrapper .baiviet-detail-head .title {
    font-size: 36px;
    margin-bottom: 40px;
  }
}
.baiviet-detail-wrapper .baiviet-detail-head .baiviet-detail-social {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-black);
}
.baiviet-detail-wrapper .baiviet-detail-head .social {
  display: flex;
  align-items: center;
  gap: 13px;
}
.baiviet-detail-wrapper .baiviet-detail-main {
  font-weight: 400;
  font-size: 15px;
  color: var(--color-black);
  margin-bottom: 70px;
}
.baiviet-detail-wrapper .baiviet-detail-main img,
.baiviet-detail-wrapper .baiviet-detail-main video,
.baiviet-detail-wrapper .baiviet-detail-main iframe {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .baiviet-detail-wrapper .baiviet-detail-main img,
  .baiviet-detail-wrapper .baiviet-detail-main video,
  .baiviet-detail-wrapper .baiviet-detail-main iframe {
    margin-bottom: 30px;
  }
}
.baiviet-detail-wrapper .baiviet-detail-main video,
.baiviet-detail-wrapper .baiviet-detail-main iframe {
  aspect-ratio: 16/9;
}
.baiviet-detail-wrapper .detail-comment-head {
  margin-bottom: 20px;
}
.baiviet-detail-wrapper .detail-comment-head .head-title {
  margin-bottom: 0;
  font-size: 28px;
  color: var(--color-black);
  font-weight: 500;
}
.baiviet-detail-wrapper .detail-comment-form {
  margin-bottom: 20px;
}
.baiviet-detail-wrapper .form-comment-nologin {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  background: #f7f5f2;
  border-radius: 4px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.baiviet-detail-wrapper .form-comment-nologin .icon {
  flex: 0 0 auto;
  width: 32px;
}
.baiviet-detail-wrapper .form-comment-nologin .comment-cta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}
.baiviet-detail-wrapper .form-comment-nologin .comment-cta .login-cta {
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--primary-color);
  color: var(--color-white);
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
  border: 1px solid var(--primary-color);
}
.baiviet-detail-wrapper .form-comment-nologin .comment-cta .login-cta:hover {
  background: var(--color-black);
  border: 1px solid var(--color-black);
}
.baiviet-detail-wrapper .detail-comment-cta {
  margin-top: 40px;
  text-align: center;
}
.baiviet-detail-wrapper .detail-comment-cta button {
  padding: 16px;
  min-width: 100%;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  transition: all 0.3s;
}
.baiviet-detail-wrapper .detail-comment-cta button:hover {
  background: var(--primary-color);
  color: var(--color-white);
}
@media (min-width: 768px) {
  .baiviet-detail-wrapper .detail-comment-cta button {
    min-width: 48%;
    width: auto;
  }
}

.faq-wrapper {
  position: relative;
  padding: 40px 0 80px;
  background: var(--color-white);
  min-height: 65vh;
}
.faq-wrapper.faq-mb-wrapper {
  padding: 80px 0;
}

.faq-side-block {
  position: sticky;
  top: 0;
  margin-bottom: 60px;
}
.faq-side-block .faq-side-title {
  font-size: 28px;
  color: var(--color-black);
  font-weight: 500;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .faq-side-block {
    margin-bottom: 0;
    top: 80px;
  }
}
@media (min-width: 1200px) {
  .faq-side-block {
    top: 100px;
  }
}

.faq-block:not(:last-child) {
  margin-bottom: 60px;
}
.faq-block .faq-block-title {
  font-weight: 500;
  font-size: 24px;
  color: var(--color-black);
  margin-bottom: 20px;
}
.faq-block .accordion-body {
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
}
@media (min-width: 768px) {
  .faq-block .accordion-body {
    padding: 16px 40px;
  }
}

/* Page-Phase 1 specific styles */
.wishlist-site .row-gaps {
  row-gap: 16px;
  margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .wishlist-site .row-gaps {
    row-gap: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .wishlist-site .row-gaps {
    row-gap: 40px;
  }
}
.wishlist-site .wishlist-empty {
  max-width: 487px;
  padding: 60px 0;
  margin: 0 auto;
  color: #0a0a27;
  font-size: 16px;
  line-height: 140%;
}
.wishlist-site .wishlist-empty h2 {
  color: #000;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 1200px) {
  .wishlist-site .wishlist-empty h2 {
    font-size: 28px;
  }
}
.modal-asset {
  font-size: 16px;
  font-weight: 400;
  color: #000;
}
.modal-asset .or {
  text-align: center;
  color: #999;
  position: relative;
}
.modal-asset .or span {
  background: #fff;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.modal-asset .or::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e2e4ee;
  height: 1px;
  width: 100%;
}
.modal-asset .text-gray {
  color: #292929;
}
.modal-asset .btn-close {
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0;
  height: auto;
  width: auto;
  outline: 0;
  box-shadow: none;
  opacity: 1;
}
.modal-asset p {
  color: var(--text-gray);
  font-size: 14px;
  line-height: 140%;
}
@media screen and (min-width: 1200px) {
  .modal-asset p {
    font-size: 16px;
  }
}
.modal-asset .modal {
  line-height: normal;
}
.modal-asset .modal-dialog {
  max-width: 560px;
  border: 0;
}
.modal-asset .modal-content {
  border: 0;
  border-radius: 12px;
}
.modal-asset .modal-body {
  padding: 16px;
}
@media screen and (min-width: 1200px) {
  .modal-asset .modal-body {
    padding: 30px;
  }
}
.modal-asset .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
}
.modal-asset .modal-title {
  color: #000;
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 1200px) {
  .modal-asset .modal-title {
    font-size: 28px;
  }
}
.modal-asset .form-label {
  color: #000;
  font-weight: 500;
  line-height: normal;
}
.modal-asset .form-control {
  padding: 8px 14px 8px 44px;
  max-height: 42px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  background-repeat: no-repeat;
  background-position: 14px 50%;
  line-height: normal;
  outline: 0;
  height: 42px;
}
.modal-asset .form-control::-moz-placeholder {
  color: #999;
}
.modal-asset .form-control::placeholder {
  color: #999;
}
.modal-asset .form-control:focus {
  box-shadow: none;
}
.modal-asset .form-email {
  background-image: url("../images/icon-form-email.png");
}
.modal-asset .form-password {
  background-image: url("../images/icon-form-password.png");
}
.modal-asset .form-user {
  background-image: url("../images/icon-form-user.png");
}
.modal-asset .form-phone {
  background-image: url("../images/icon-form-phone.png");
}
.modal-asset .form-check {
  padding: 0;
  margin: 0;
  line-height: normal;
}
.modal-asset .form-check-input {
  display: none;
}
.modal-asset .form-check-input:checked + label::before {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.modal-asset .form-check-input:checked + label::after {
  display: block;
}
.modal-asset .form-check-label {
  padding-left: 32px;
  position: relative;
  cursor: pointer;
}
.modal-asset .form-check-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
.modal-asset .form-check-label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 9px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}
.modal-asset .form-error {
  color: var(--red, #e40505);
  font-size: 14px;
  font-weight: 400;
  margin-top: 8px;
  display: inline-flex;
}

#modalSuccess h3 {
  color: #0a0a27;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
}

.modal-add-to-cart .modal-dialog {
  max-width: 600px;
}
.modal-add-to-cart h5 {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
  .modal-add-to-cart h5 {
    font-size: 18px;
  }
}
.modal-add-to-cart .modal-title {
  font-size: 18px;
}
.modal-add-to-cart .item-top {
  display: flex;
  gap: 16px;
}
.modal-add-to-cart .item-top__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .modal-add-to-cart .item-top__icon {
    width: 32px;
    height: 32px;
  }
}
.modal-add-to-cart .item-top__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.modal-add-to-cart .item-top__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 24px 0 0 0;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 576px) {
  .modal-add-to-cart .item-top__content {
    align-items: center;
  }
}
.modal-add-to-cart .item-top__image {
  width: 108px;
  height: 61px;
  flex-shrink: 0;
}
.modal-add-to-cart .item-top__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.modal-add-to-cart .item-top__title .tag {
  color: #f16723;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  border-radius: 30px;
  padding: 0px 6px;
  background: #f5eae3;
  display: block;
  margin-bottom: 10px;
  width: -moz-fit-content;
  width: fit-content;
}
.modal-add-to-cart .item-top .btn-main, .modal-add-to-cart .item-top .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .item-top .btn-add-all-to-cart, .modal-add-to-cart .item-top .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .modal-add-to-cart .item-top .btn-primary {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  border-radius: 4px;
  background: #f26724;
  padding: 8px 12px;
  width: -moz-fit-content;
  width: fit-content;
  align-self: flex-start;
}
.modal-add-to-cart .related-courses .head {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e4ee;
}
.modal-add-to-cart .related-courses .orders__item {
  background: #f7f5f2;
  border-bottom-right-radius: 24px;
}
@media screen and (min-width: 992px) {
  .modal-add-to-cart .related-courses .orders__name-img {
    width: 190px;
    height: 107px;
  }
}
.modal-add-to-cart .related-courses .number-total {
  color: #f16723;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}
.modal-add-to-cart .related-courses .text-line-through {
  color: #666;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: line-through;
}
.modal-add-to-cart .related-courses .btn-add-all-to-cart {
  border-radius: 4px;
  min-width: 243px;
  padding: 12px 24px;
  width: -moz-fit-content;
  width: fit-content;
}

#modalShareCourse .modal-dialog {
  max-width: 680px;
}
#modalShareCourse .link {
  height: 42px;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--stroke, #d9d9d9);
  background: #fff;
  overflow: hidden;
  flex-grow: 1;
}
#modalShareCourse .link div {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modalShareCourse .btn-main, #modalShareCourse .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty #modalShareCourse .btn-primary, #modalShareCourse .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses #modalShareCourse .btn-add-all-to-cart {
  padding: 12px 24px;
  height: 42px;
  flex-shrink: 0;
  width: -moz-fit-content;
  width: fit-content;
}

.modal-survey .modal-dialog {
  max-width: 600px;
}
.modal-survey .title {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}
.modal-survey .btn-groups {
  grid-template-columns: 1fr 1fr;
}
.modal-survey .btn-groups .btn-main, .modal-survey .btn-groups .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .modal-survey .btn-groups .btn-primary, .modal-survey .btn-groups .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .modal-survey .btn-groups .btn-add-all-to-cart {
  padding: 10px;
  min-height: 43px;
}
.modal-survey .btn-groups .btn-skip {
  border: 1px solid #eaeaea;
  background: #f3f3f3;
  color: #333;
}
.modal-survey .survey {
  max-height: 532px;
  overflow-y: auto;
  padding-right: 20px;
}
.modal-survey .survey::-webkit-scrollbar {
  width: 4px;
  border-radius: 12px;
}
.modal-survey .survey::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 12px;
}
.modal-survey .survey .form-label {
  padding: 12px;
  gap: 12px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  position: relative;
  display: flex;
  align-items: start;
  gap: 12px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  cursor: pointer;
  margin-bottom: 0;
}
.modal-survey .survey .form-label span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
  background: #fff;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.modal-survey .survey .form-label span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 12px;
  width: 12px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: none;
}
.modal-survey .survey .form-label input {
  display: none;
}
.modal-survey .survey .form-label input:checked + span::after {
  display: block;
}
.modal-survey .survey .coupon-code {
  color: #000;
  font-size: 34px;
  font-weight: 500;
  line-height: normal;
  display: flex;
  height: 42px;
  padding: 12px 14px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: rgba(241, 103, 35, 0.1);
}
.modal-survey .survey .coupon-copy {
  display: flex;
  height: 42px;
  padding: 14px 30px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #f16723;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  border-radius: 4px;
  border: 1px solid #f16723;
  cursor: pointer;
}

.p1p2 .my-courses, .p1p2 .my-certificate {
  min-height: 100vh;
}
.p1p2 .my-courses .banner, .p1p2 .my-certificate .banner {
  padding: 59px 0 78px;
}
@media screen and (min-width: 768px) {
  .p1p2 .my-courses .banner, .p1p2 .my-certificate .banner {
    padding-top: 78px;
  }
}
.p1p2 .my-courses .banner__title, .p1p2 .my-certificate .banner__title {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .p1p2 .my-courses .banner__title, .p1p2 .my-certificate .banner__title {
    font-size: 36px;
  }
}
.p1p2 .my-courses .banner__tabs, .p1p2 .my-certificate .banner__tabs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
}
.p1p2 .my-courses .banner__tabs a, .p1p2 .my-certificate .banner__tabs a {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 16px;
  border-bottom: 4px solid transparent;
  transition: all 0.3s ease;
}
.p1p2 .my-courses .banner__tabs a:hover, .p1p2 .my-certificate .banner__tabs a:hover {
  opacity: 0.8;
}
.p1p2 .my-courses .banner__tabs a.active, .p1p2 .my-certificate .banner__tabs a.active {
  font-weight: 700;
  border-bottom: 4px solid #fff;
}
@media screen and (min-width: 992px) {
  .p1p2 .my-courses .banner__tabs a, .p1p2 .my-certificate .banner__tabs a {
    font-size: 20px;
  }
}
.p1p2 .my-courses .main-content, .p1p2 .my-certificate .main-content {
  padding: 24px 0 100px;
}
@media screen and (min-width: 768px) {
  .p1p2 .my-courses .main-content, .p1p2 .my-certificate .main-content {
    padding-top: 32px;
  }
}
.p1p2 .my-courses__list {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
  .p1p2 .my-courses__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 992px) {
  .p1p2 .my-courses__list {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
    margin-bottom: 40px;
  }
}
.p1p2 .my-courses__list .khoahoc-item .khoahoc-name {
  flex: none;
  margin-bottom: 10px;
}
.p1p2 .my-courses__list .khoahoc-item .khoahoc-body .rating-gr .rating-num {
  font-size: 14px;
  color: var(--text-gray) !important;
}
.p1p2 .filter-course {
  margin-bottom: 16px;
}
@media screen and (min-width: 992px) {
  .p1p2 .filter-course {
    margin-bottom: 32px;
  }
}
.p1p2 .filter .js-filter-btn-mb svg {
  transition: all 0.3s ease;
}
.p1p2 .filter .js-filter-btn-mb.active svg {
  transform: rotate(180deg);
}
.p1p2 .filter__content {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
@media screen and (min-width: 992px) {
  .p1p2 .filter__content {
    flex-direction: row;
    align-items: flex-end;
    display: flex;
    gap: 16px;
  }
}
.p1p2 .filter__content .dropdown-toggle {
  background: url(../images/icon-arrow-down.png) no-repeat right center/16px 16px;
  background-position: 97% 50%;
  outline: none;
  box-shadow: none;
  width: 100%;
  text-align: left;
  height: 42px;
  padding: 7px 25px 7px 14px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  transition: all 0.3s ease;
}
.p1p2 .filter__content .dropdown-toggle .text {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
}
.p1p2 .filter__content .dropdown-toggle:hover {
  border-color: #999;
}
.p1p2 .filter__content .dropdown-toggle:focus {
  box-shadow: none;
  border-color: #666;
}
.p1p2 .filter__content .dropdown-toggle::after {
  display: none;
}
.p1p2 .filter__content .dropdown-menu {
  border-radius: 0px 0px 12px 12px;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 4px;
  border: 0;
}
.p1p2 .filter__content .dropdown-item {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  padding: 12px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: normal;
}
.p1p2 .filter__content .dropdown-item:not(:last-child) {
  margin-bottom: 4px;
}
.p1p2 .filter__content .dropdown-item:hover, .p1p2 .filter__content .dropdown-item.active {
  background: #f7f5f2;
  font-weight: 700;
}
.p1p2 .filter__content .filter__sort {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .p1p2 .filter__content .filter__sort {
    width: 220px;
  }
}
@media screen and (min-width: 1200px) {
  .p1p2 .filter__content .filter__by {
    margin-left: 8px;
  }
}
.p1p2 .filter__content .filter__by--category {
  width: calc(50% - 8px);
}
@media screen and (min-width: 992px) {
  .p1p2 .filter__content .filter__by--category {
    width: 211px;
  }
}
.p1p2 .filter__content .filter__by--process {
  width: calc(50% - 8px);
}
@media screen and (min-width: 992px) {
  .p1p2 .filter__content .filter__by--process {
    width: 173px;
  }
}
.p1p2 .filter__content .search {
  height: 42px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  transition: all 0.3s ease;
  flex-direction: row-reverse;
}
@media screen and (min-width: 992px) {
  .p1p2 .filter__content .search {
    min-width: 300px;
    margin-left: auto;
  }
}
.p1p2 .filter__content .search input {
  outline: 0;
  box-shadow: none;
}
.p1p2 .filter__content .search input::-moz-placeholder {
  color: #999;
}
.p1p2 .filter__content .search input::placeholder {
  color: #999;
}
.p1p2 .filter__content .search .btn-search {
  cursor: pointer;
}
.p1p2 .filter__content .search .btn-search:hover {
  opacity: 0.8;
}

.my-courses__empty {
  max-width: 380px;
  margin: 0 auto;
}

@media screen and (min-width: 1200px) {
  .my-certificate .container-certificate {
    max-width: 1224px !important;
  }
}
.my-certificate .btn-outline-orange {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 4px;
}
.my-certificate .btn-outline-orange:hover {
  background: var(--primary-color);
  color: var(--color-white);
}
.my-certificate .btn-outline-orange:hover svg path {
  stroke: var(--color-white);
  fill: var(--color-white);
}
.my-certificate .btn-back {
  padding: 8px 12px;
}
.my-certificate .hr {
  width: 1px;
  height: 20px;
  background: #eaeaea;
}
.my-certificate .certificate__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.my-certificate .certificate__item {
  border-radius: 4px;
  border: 1px solid #eaeaea;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (min-width: 768px) {
  .my-certificate .certificate__item {
    padding: 16px 30px;
    gap: 16px;
  }
}
.my-certificate .certificate__item-image {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .my-certificate .certificate__item-image {
    height: 90px;
    width: 90px;
  }
}
.my-certificate .certificate__item-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.my-certificate .certificate__item-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .my-certificate .certificate__item-content {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media screen and (min-width: 992px) {
  .my-certificate .certificate__item-content {
    gap: 32px;
  }
}
.my-certificate .certificate__item-name {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
.my-certificate .certificate__item-name:hover {
  color: var(--primary-color);
}
@media screen and (min-width: 1200px) {
  .my-certificate .certificate__item-name {
    font-size: 20px;
  }
}
.my-certificate .certificate__item-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media screen and (min-width: 992px) {
  .my-certificate .certificate__item-action {
    gap: 24px;
  }
}
.my-certificate .certificate-detail {
  padding: 16px;
  border-radius: 12px;
  background: rgba(241, 103, 35, 0.05);
  margin-bottom: 40px;
}
@media screen and (min-width: 992px) {
  .my-certificate .certificate-detail {
    padding: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .my-certificate .certificate-detail {
    margin-bottom: 132px;
  }
}
.my-certificate .certificate-detail__wrapper {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
@media screen and (min-width: 992px) {
  .my-certificate .certificate-detail__wrapper {
    gap: 25px;
    margin-bottom: 32px;
  }
}
.my-certificate .certificate-detail__image {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
  flex-shrink: 0;
}
.my-certificate .certificate-detail__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 1200px) {
  .my-certificate .certificate-detail__image {
    width: 90px;
    height: 90px;
  }
}
@media screen and (min-width: 1200px) {
  .my-certificate .certificate-detail__content__info .fw-semibold {
    font-size: 20px;
  }
}
.my-certificate .certificate-detail__content__action {
  flex-shrink: 0;
}
.my-certificate .certificate-detail__content__action [class*=btn-] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  height: 52px;
}
@media screen and (min-width: 1200px) {
  .my-certificate .certificate-detail__content__action [class*=btn-] {
    min-width: 172px;
  }
}
.my-certificate .certificate-detail__content__action [class*=btn-].btn-download {
  background: var(--primary-color);
  color: var(--color-white);
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .education.education--super-main {
    display: grid;
    grid-template-columns: 1fr 250px;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1200px) {
  .education.education--super-main {
    grid-template-columns: 1fr 330px;
  }
}
.education .main__edu {
  /* 	@media (min-width: 768px) {
  	max-width: 67%;
  } */
  /* 		@media (min-width: 1200px) {
  	max-width: 77%;
  }

  @media (min-width: 1680px) {
  	max-width: calc(1570 / 1920 * 100%);
  } */
}
.education .main__edu .top-head {
  padding: 4px 16px 16px;
}
@media (min-width: 1200px) {
  .education .main__edu .top-head {
    padding: 13px 24px;
  }
}
.education .main__edu .top-head__title {
  color: #000;
}
.education .main__edu .top-head__actions .list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.education .main__edu .top-head__actions .list-actions__item {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 33px;
  cursor: pointer;
}
.education .main__edu .top-head__actions .list-actions__item--complete input {
  display: none;
}
.education .main__edu .top-head__actions .list-actions__item--complete input:checked + span {
  color: var(--primary-color);
}
.education .main__edu .top-head__actions .list-actions__item--complete input:checked + span::before {
  background-color: rgba(241, 103, 35, 0.1);
  border: 1px solid rgba(241, 103, 35, 0.1);
}
.education .main__edu .top-head__actions .list-actions__item--complete input:checked + span::after {
  display: block;
}
.education .main__edu .top-head__actions .list-actions__item--complete span {
  position: relative;
  display: inline-block;
  padding-left: 24px;
}
.education .main__edu .top-head__actions .list-actions__item--complete span::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
.education .main__edu .top-head__actions .list-actions__item--complete span::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--primary-color);
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  display: none;
}
.education .main__edu .top-head__actions .list-actions__item--next {
  border: 1px solid rgba(241, 103, 35, 0.5);
  color: var(--primary-color);
  transition: all 0.3s ease;
}
.education .main__edu .top-head__actions .list-actions__item--next:hover {
  background: var(--primary-color);
  color: #fff;
}
.education .main__edu .top-head__actions .list-actions__item--next:hover svg path {
  stroke: #fff;
}
.education .main__edu .top-head-video .inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-wrap: wrap;
}
@media screen and (min-width: 1200px) {
  .education .main__edu .top-head-video .inner {
    justify-content: space-between;
    flex-direction: row;
  }
}
.education .main__edu .top-head-quiz .inner {
  display: flex;
  gap: 8px;
  row-gap: 4px;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .education .main__edu .top-head-quiz .inner {
    gap: 16px;
  }
}
@media screen and (min-width: 992px) {
  .education .main__edu .top-head-quiz .inner {
    flex-direction: row;
  }
}
@media screen and (min-width: 1200px) {
  .education .main__edu .top-head-quiz .inner {
    align-items: center;
    gap: 24px;
  }
}
.education .main__edu .top-head-quiz .top-head__title {
  flex-basis: 100%;
}
@media screen and (min-width: 1200px) {
  .education .main__edu .top-head-quiz .top-head__title {
    flex-basis: auto;
  }
}
.education .main__edu .top-head-quiz .text-center {
  flex-basis: 100%;
}
.education .main__edu .top-head-quiz .btn-main, .education .main__edu .top-head-quiz .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .education .main__edu .top-head-quiz .btn-primary, .education .main__edu .top-head-quiz .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .education .main__edu .top-head-quiz .btn-add-all-to-cart {
  order: 2;
}
@media (min-width: 1200px) {
  .education .main__edu .top-head-quiz .btn-main, .education .main__edu .top-head-quiz .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .education .main__edu .top-head-quiz .btn-primary, .education .main__edu .top-head-quiz .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .education .main__edu .top-head-quiz .btn-add-all-to-cart {
    order: unset;
  }
}
.education .main__edu .top-head-quiz .countdown-quiz {
  order: 2;
  flex-basis: calc(100% - 130px);
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .education .main__edu .top-head-quiz .countdown-quiz {
    flex-basis: auto;
    order: unset;
  }
}
.education .main__edu .top-head-quiz-result .inner {
  align-items: flex-start;
  justify-content: space-between;
}
.education .main__edu .top-head-quiz-result .inner .btn-main, .education .main__edu .top-head-quiz-result .inner .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .education .main__edu .top-head-quiz-result .inner .btn-primary, .education .main__edu .top-head-quiz-result .inner .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .education .main__edu .top-head-quiz-result .inner .btn-add-all-to-cart {
  margin-left: 35px;
  flex-shrink: 0;
}
.education .main__dashboard-video {
  background: #16171c;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
}
@media screen and (min-width: 1680px) {
  .education .main__dashboard-video {
    padding-bottom: 42.55%;
    aspect-ratio: unset;
  }
}
.education .main__dashboard-video iframe,
.education .main__dashboard-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.education .main__dashboard--content {
  padding: 16px;
}
@media (min-width: 992px) {
  .education .main__dashboard--content {
    max-width: 88.2165605096%;
    margin: 0 auto;
    padding: 16px 0;
  }
}
.education .main__dashboard--content .nav {
  border-bottom: 2px solid #ddd;
}
.education .main__dashboard--content .nav-link {
  color: #666;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  border-bottom: 2px solid transparent;
  padding: 8px 40px;
  text-align: center;
  margin-bottom: -2px;
}
.education .main__dashboard--content .nav-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.education .main__dashboard--complete .wrapper-announcement {
  max-width: 900px;
  margin: 30px auto;
  border-radius: 8px 8px 0px 0px;
  background: #fff;
  padding: 12px;
}
@media screen and (min-width: 768px) {
  .education .main__dashboard--complete .wrapper-announcement {
    padding: 30px;
  }
}
@media screen and (min-width: 1200px) {
  .education .main__dashboard--complete .wrapper-announcement {
    margin-top: 90px;
  }
}
.education .main__dashboard--complete .wrapper-announcement .env-evaluate {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed #eaeaea;
  width: 100%;
}
.education .main__dashboard--complete .wrapper-announcement .env-evaluate .btn-outline {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  height: 42px;
  padding: 6px 32px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.education .main__dashboard--complete .wrapper-announcement-result {
  margin-top: 32px;
}
.education .main__dashboard--complete .wrapper-announcement-result .action-quiz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.education .main__dashboard--complete .wrapper-announcement-result .action-quiz [class*=btn-] {
  height: 51px;
  padding: 8px 32px;
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 992px) {
  .education .main__dashboard--complete .wrapper-announcement-result .action-quiz [class*=btn-] {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.education .main__dashboard--complete .wrapper-announcement-result .action-quiz [class*=btn-]:not(.btn-main) {
  color: var(--primary-color);
  background: transparent;
}
.education .main__dashboard--complete .wrapper-announcement-result .result-quiz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 36px 0;
}
@media screen and (min-width: 992px) {
  .education .main__dashboard--complete .wrapper-announcement-result .result-quiz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item {
  padding: 16px;
  height: 100%;
}
@media screen and (min-width: 992px) {
  .education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
.education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item:nth-child(1) {
  flex-basis: calc(50% - 8px);
  padding-left: 0;
  border-right: 1px solid #eaeaea;
}
.education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item:nth-child(2) {
  flex-basis: calc(50% - 8px);
  padding-left: 0;
}
.education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item:nth-child(3) {
  border-top: 1px solid #eaeaea;
  flex-basis: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 992px) {
  .education .main__dashboard--complete .wrapper-announcement-result .result-quiz-item:nth-child(3) {
    border-top: 0;
    border-left: 1px solid #eaeaea;
    padding-left: 16px;
  }
}
@media (max-width: 767px) {
  .education .main__sidebar {
    position: sticky;
    z-index: 99999;
    bottom: 0;
    left: 0;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.1);
    background: #fff;
  }
  .education .main__sidebar.show {
    padding-bottom: 160px !important;
    height: 90svh;
  }
}
@media screen and (min-width: 768px) {
  .education .main__sidebar {
    max-height: 100dvh;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
@media screen and (min-width: 1200px) {
  .education .main__sidebar {
    max-height: 100dvh !important;
  }
}
@media (max-width: 767px) {
  .education .main__sidebar .offcanvas-body {
    display: none;
  }
}
.education .main__sidebar .offcanvas-sidebar {
  z-index: 9999;
  top: 120px;
  border-top: 1px solid #d9d9d9;
  background: #fff;
  height: 100%;
  overflow-y: auto;
}
.education .main__sidebar .offcanvas-sidebar.show .offcanvas-header svg {
  transform: rotate(0deg);
}
.education .main__sidebar .offcanvas-sidebar.show .offcanvas-body {
  display: block;
}
@media (max-width: 767px) {
  .education .main__sidebar .offcanvas-sidebar .offcanvas-body {
    height: -moz-fit-content;
    height: fit-content;
    overflow: visible;
  }
}
@media (min-width: 768px) {
  .education .main__sidebar .offcanvas-sidebar {
    top: 0;
  }
}
@media (min-width: 1200px) {
  .education .main__sidebar .offcanvas-sidebar {
    border-top: 0;
    z-index: 99;
    border-left: 1px solid #eaeaea;
    overflow-y: auto;
  }
}
.education .main__sidebar .offcanvas-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eaeaea;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 99999;
}
@media (max-width: 767px) {
  .education .main__sidebar .offcanvas-header svg {
    transform: rotate(180deg);
  }
}
.education .main__sidebar .panel__metadata span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.education .main__sidebar .panel__metadata span:not(:first-child) {
  border-left: 1px solid #999;
  padding-left: 8px;
  margin-left: 8px;
}
.education .main__sidebar .panel-exercise {
  border: 1px solid #eaeaea;
  border-left: 0;
  border-right: 0;
  color: #000;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 8px;
  padding: 12px 15px;
  justify-content: space-between;
  cursor: pointer;
}
.education .main__sidebar .panel-exercise.active {
  color: var(--primary-color);
}
.education .main__sidebar .panel-exercise.active img {
  filter: grayscale(0%);
}
.education .main__sidebar .panel-exercise.active svg {
  transform: rotate(180deg);
}
.education .main__sidebar .panel-exercise.active svg path {
  stroke: var(--primary-color);
}
.education .main__sidebar .panel-exercise svg {
  transition: all 0.2s;
}
.education .main__sidebar .panel-exercise img {
  filter: grayscale(100%);
}
.education .main__sidebar .panel__list {
  display: none;
}
.education .main__sidebar .panel__list-item {
  border-bottom: 1px solid #eaeaea;
  border-left: 4px solid transparent;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
.education .main__sidebar .panel__list-item.active {
  border-left-color: var(--primary-color);
}
.education .main__sidebar .panel__list-item:hover, .education .main__sidebar .panel__list-item.active {
  background: rgba(241, 103, 35, 0.1);
}
.education .main__sidebar .panel__list-item input {
  display: none;
}
.education .main__sidebar .panel__list-item input:checked + label {
  background: rgba(241, 103, 35, 0.1);
  border: 1px solid transparent;
}
.education .main__sidebar .panel__list-item input:checked + label::before {
  display: block;
}
.education .main__sidebar .panel__list-item label {
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  display: inline-block;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  position: relative;
}
.education .main__sidebar .panel__list-item label::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--primary-color);
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  display: none;
}
.education #tabs-evaluate .evaluate-rating .star-rating {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 767px) {
  .education #tabs-evaluate .evaluate-rating .star-rating {
    margin: 0 auto;
  }
}
.education #tabs-evaluate .evaluate-rating .star {
  cursor: pointer;
}
.education #tabs-evaluate .evaluate-rating .star.inactive svg path {
  fill: transparent;
}
.education #tabs-evaluate .evaluate-rating .rating-label {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-top: 10px;
  display: inline-block;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .education #tabs-evaluate .evaluate-rating .rating-label {
    left: calc(100% + 10px);
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) {
  .education #tabs-evaluate .evaluate-rating .rating-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 10px);
    width: -moz-max-content;
    width: max-content;
    margin-top: 0;
  }
}
@media screen and (min-width: 1200px) {
  .education #tabs-evaluate .evaluate-rating .rating-label {
    left: calc(100% + 25px);
  }
}
.education #tabs-evaluate .tags-evaluate {
  display: flex;
  gap: 16px;
}
.education #tabs-evaluate .tags-evaluate .form-label {
  position: relative;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 4px;
  padding: 12px 16px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
  text-align: center;
  overflow: hidden;
  margin: 0;
}
.education #tabs-evaluate .tags-evaluate .form-label input[type=checkbox] {
  display: none;
}
.education #tabs-evaluate .tags-evaluate .form-label:not(.active) {
  border-color: #eaeaea;
  color: #666;
  background: transparent;
}
.education #tabs-evaluate .tags-evaluate .form-label.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: #fff;
}
.education #tabs-evaluate .tags-evaluate .form-label.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -2px;
  background-image: url("../images/icon-check-border.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  width: 17px;
  height: 16px;
}
.education #tabs-evaluate textarea.form-control {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  min-height: 120px;
  padding: 12px 14px;
  outline: 0;
  box-shadow: none;
}
.education #tabs-evaluate textarea.form-control:focus {
  border-color: var(--primary-color);
}
.education #tabs-evaluate textarea.form-control:-moz-placeholder {
  color: #999;
}
.education #tabs-evaluate textarea.form-control:placeholder-shown {
  color: #999;
}
.education #tabs-evaluate .btn-main, .education #tabs-evaluate .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .education #tabs-evaluate .btn-primary, .education #tabs-evaluate .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .education #tabs-evaluate .btn-add-all-to-cart {
  padding: 16px 32px;
}

.static-page .banner {
  position: relative;
  padding: 63px 0;
}
@media screen and (min-width: 768px) {
  .static-page .banner {
    padding: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .static-page .banner {
    padding: 177px 0;
  }
}
.static-page .banner h1 {
  color: #fff;
  text-shadow: 0px 4px 30px rgba(195, 64, 22, 0.1);
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 1200px) {
  .static-page .banner h1 {
    font-size: 36px;
  }
}
.static-page .content {
  padding: 24px 0;
}
@media screen and (min-width: 768px) {
  .static-page .content {
    padding: 32px 0 100px;
  }
}

.error-page {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2.13%, #f7f5f2 34.45%);
  padding: 50px 0;
}
@media screen and (min-width: 992px) {
  .error-page {
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 1680px) {
  .error-page {
    padding-bottom: 160px;
  }
}
.error-page h1 {
  color: #000;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .error-page h1 {
    font-size: 36px;
  }
}

.profile-site {
  padding: 24px 0 60px;
  min-height: 80vh;
}
@media screen and (min-width: 768px) {
  .profile-site {
    padding: 60px 0;
  }
}
.profile-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.profile-site .btn-primary {
  background-color: #f26724;
  color: #fff;
  font-weight: 600;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}
.profile-site .btn-primary:hover {
  background-color: #e55c1c;
}
.profile-site .btn-outline-primary {
  background: transparent;
  border: 1px solid #f16723;
  color: #f16723;
}
.profile-site .btn-outline-primary:hover {
  background-color: rgba(241, 103, 35, 0.1);
}

.profile-nav {
  background: #f16723;
}
@media screen and (max-width: 575px) {
  .profile-nav .container {
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.profile-nav .profile-nav__item {
  padding: 19px 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  min-height: 60px;
  text-align: center;
}
.profile-nav .profile-nav__item a {
  color: #fff;
}
@media screen and (max-width: 575px) {
  .profile-nav .profile-nav__item {
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .profile-nav .profile-nav__item {
    font-size: 20px;
    padding: 24px;
  }
}
.profile-nav .profile-nav__item.active {
  font-weight: 600;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.profile-content {
  padding: 0;
}

.profile-info {
  overflow: hidden;
  display: grid;
  gap: 60px;
}
@media screen and (min-width: 992px) {
  .profile-info {
    gap: 0;
    grid-template-columns: 2fr 1.5fr;
  }
}
@media screen and (min-width: 1200px) {
  .profile-info {
    grid-template-columns: 1fr 350px;
  }
}
@media screen and (min-width: 992px) {
  .profile-info .profile-info__left {
    border-right: 1px solid #eaeaea;
    padding-right: 30px;
  }
}
.profile-info .profile-info__right {
  width: 100%;
}
@media screen and (min-width: 992px) {
  .profile-info .profile-info__right {
    padding-left: 30px;
  }
}
.profile-info .profile-info__title {
  margin-bottom: 24px;
}
@media screen and (min-width: 1200px) {
  .profile-info .profile-info__title {
    margin-bottom: 36px;
  }
}

.profile-avatar .avatar-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #f16723;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.profile-avatar .avatar-circle img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.profile-avatar .avatar-upload .btn {
  padding: 10px 30px;
  margin-bottom: 12px;
  color: var(--orange, #f16723);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  height: 42px;
}
.profile-avatar .avatar-upload .avatar-upload__note {
  font-size: 14px;
  color: #666;
  line-height: 140%;
}

@media screen and (min-width: 768px) {
  .profile-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
.profile-form .form-group {
  margin-bottom: 32px;
}
.profile-form .form-group label {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-bottom: 12px;
}
.profile-form .form-control {
  height: 42px;
  font-size: 16px;
  color: #000;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-shadow: none;
  outline: 0;
  margin: 0 !important;
}
.profile-form .form-control-date {
  padding-right: 40px;
}
.profile-form .form-control::-moz-placeholder {
  color: #999;
}
.profile-form .form-control::placeholder {
  color: #999;
}
.profile-form .form-control:focus {
  border-color: #f16723;
}
.profile-form .input-group-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%);
}
.profile-form .input-group-icon img {
  width: 16px;
  height: 16px;
}
.profile-form .gender-group {
  display: flex;
  gap: 32px;
}
.profile-form .gender-group .gender-item {
  position: relative;
}
.profile-form .gender-group .gender-item input[type=radio] {
  display: none;
}
.profile-form .gender-group .gender-item input[type=radio]:checked + label:after {
  display: block;
}
.profile-form .gender-group .gender-item label {
  padding-left: 28px;
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
  font-weight: 400;
}
.profile-form .gender-group .gender-item label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
}
.profile-form .gender-group .gender-item label:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #f16723;
  border-radius: 50%;
  display: none;
}
.profile-form .btn-main, .profile-form .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .profile-form .btn-primary, .profile-form .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .profile-form .btn-add-all-to-cart {
  padding: 16px 32px;
  font-size: 16px;
  width: -moz-fit-content;
  width: fit-content;
  height: 51px;
}

.security-info .security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.security-info .security-item:not(:last-child) {
  margin-bottom: 24px;
}
.security-info .security-item .security-item__content label {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-bottom: 8px;
}
.security-info .security-item .security-item__content p {
  font-size: 16px;
  color: #292929;
  margin: 0;
}
.security-info .security-item .btn {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 500;
  height: 42px;
  border-color: #f16723;
}
.security-info .security-item .btn:hover {
  background-color: #f16723;
  color: #fff;
}

.orders-site, .payment-confirm-site, .affiliate-detail, .payment-site, .modal-add-to-cart {
  padding: 24px 0;
}
@media screen and (min-width: 992px) {
  .orders-site, .payment-confirm-site, .affiliate-detail, .payment-site, .modal-add-to-cart {
    padding: 40px 0;
  }
}
.orders-site .orders__empty, .payment-confirm-site .orders__empty, .affiliate-detail .orders__empty, .payment-site .orders__empty, .modal-add-to-cart .orders__empty {
  padding: 32px 0 60px;
  gap: 32px;
  max-width: 350px;
  margin: 0 auto;
  min-height: 5 0vh;
}
@media screen and (min-width: 768px) {
  .orders-site .orders__empty, .payment-confirm-site .orders__empty, .affiliate-detail .orders__empty, .payment-site .orders__empty, .modal-add-to-cart .orders__empty {
    padding: 100px 0;
  }
}
@media screen and (min-width: 1200px) {
  .orders-site .orders__empty, .payment-confirm-site .orders__empty, .affiliate-detail .orders__empty, .payment-site .orders__empty, .modal-add-to-cart .orders__empty {
    min-height: 80vh;
  }
}
.orders-site .orders__empty .btn-main, .payment-confirm-site .orders__empty .btn-main, .affiliate-detail .orders__empty .btn-main, .payment-site .orders__empty .btn-main, .modal-add-to-cart .orders__empty .btn-main, .orders-site .orders__empty .wishlist-site .wishlist-empty .btn-primary, .payment-confirm-site .orders__empty .wishlist-site .wishlist-empty .btn-primary, .affiliate-detail .orders__empty .wishlist-site .wishlist-empty .btn-primary, .payment-site .orders__empty .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .orders-site .orders__empty .btn-primary, .wishlist-site .wishlist-empty .payment-confirm-site .orders__empty .btn-primary, .wishlist-site .wishlist-empty .affiliate-detail .orders__empty .btn-primary, .wishlist-site .wishlist-empty .payment-site .orders__empty .btn-primary, .modal-add-to-cart .orders__empty .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .modal-add-to-cart .orders__empty .btn-primary, .orders-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart, .payment-confirm-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart, .affiliate-detail .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart, .payment-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .orders__empty .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .orders__empty .btn-add-all-to-cart {
  border: 1px solid var(--primary-color);
}
.orders-site .orders__empty .btn-main:hover, .payment-confirm-site .orders__empty .btn-main:hover, .affiliate-detail .orders__empty .btn-main:hover, .payment-site .orders__empty .btn-main:hover, .modal-add-to-cart .orders__empty .btn-main:hover, .orders-site .orders__empty .wishlist-site .wishlist-empty .btn-primary:hover, .payment-confirm-site .orders__empty .wishlist-site .wishlist-empty .btn-primary:hover, .affiliate-detail .orders__empty .wishlist-site .wishlist-empty .btn-primary:hover, .payment-site .orders__empty .wishlist-site .wishlist-empty .btn-primary:hover, .wishlist-site .wishlist-empty .orders-site .orders__empty .btn-primary:hover, .wishlist-site .wishlist-empty .payment-confirm-site .orders__empty .btn-primary:hover, .wishlist-site .wishlist-empty .affiliate-detail .orders__empty .btn-primary:hover, .wishlist-site .wishlist-empty .payment-site .orders__empty .btn-primary:hover, .modal-add-to-cart .orders__empty .wishlist-site .wishlist-empty .btn-primary:hover, .wishlist-site .wishlist-empty .modal-add-to-cart .orders__empty .btn-primary:hover, .orders-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart:hover, .payment-confirm-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart:hover, .affiliate-detail .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart:hover, .payment-site .orders__empty .modal-add-to-cart .related-courses .btn-add-all-to-cart:hover, .modal-add-to-cart .orders__empty .related-courses .btn-add-all-to-cart:hover, .modal-add-to-cart .related-courses .orders__empty .btn-add-all-to-cart:hover {
  border: 1px solid var(--primary-color);
}
.orders-site .nav, .payment-confirm-site .nav, .affiliate-detail .nav, .payment-site .nav, .modal-add-to-cart .nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-bottom: 2px solid #ddd;
}
@media screen and (min-width: 768px) {
  .orders-site .nav, .payment-confirm-site .nav, .affiliate-detail .nav, .payment-site .nav, .modal-add-to-cart .nav {
    grid-template-columns: repeat(2, 256px);
    justify-content: start;
  }
}
.orders-site .nav-link, .payment-confirm-site .nav-link, .affiliate-detail .nav-link, .payment-site .nav-link, .modal-add-to-cart .nav-link {
  color: #666;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  border-bottom: 2px solid transparent;
  padding: 10px;
  text-align: center;
  margin-bottom: -2px;
}
.orders-site .nav-link.active, .payment-confirm-site .nav-link.active, .affiliate-detail .nav-link.active, .payment-site .nav-link.active, .modal-add-to-cart .nav-link.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}
@media screen and (min-width: 992px) {
  .orders-site .orders__table, .payment-confirm-site .orders__table, .affiliate-detail .orders__table, .payment-site .orders__table, .modal-add-to-cart .orders__table, .orders-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item, .modal-add-to-cart .orders__item {
    display: grid;
    grid-template-columns: 1fr repeat(6, 9.375%);
    gap: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .orders-site .orders__table, .payment-confirm-site .orders__table, .affiliate-detail .orders__table, .payment-site .orders__table, .modal-add-to-cart .orders__table, .orders-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item, .modal-add-to-cart .orders__item {
    gap: 16px;
  }
}
.orders-site .orders__table, .payment-confirm-site .orders__table, .affiliate-detail .orders__table, .payment-site .orders__table, .modal-add-to-cart .orders__table {
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 24px;
}
.orders-site .orders__table-item, .payment-confirm-site .orders__table-item, .affiliate-detail .orders__table-item, .payment-site .orders__table-item, .modal-add-to-cart .orders__table-item {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
}
@media screen and (min-width: 992px) {
  .orders-site .orders__table-item:nth-child(1), .payment-confirm-site .orders__table-item:nth-child(1), .affiliate-detail .orders__table-item:nth-child(1), .payment-site .orders__table-item:nth-child(1), .modal-add-to-cart .orders__table-item:nth-child(1) {
    margin-right: 30px;
  }
}
@media screen and (min-width: 992px) {
  .orders-site .orders__list, .payment-confirm-site .orders__list, .affiliate-detail .orders__list, .payment-site .orders__list, .modal-add-to-cart .orders__list {
    display: grid;
    gap: 16px;
  }
}
.orders-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item, .modal-add-to-cart .orders__item {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #eaeaea;
  display: grid;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  word-break: break-word;
}
.orders-site .orders__item span, .payment-confirm-site .orders__item span, .affiliate-detail .orders__item span, .payment-site .orders__item span, .modal-add-to-cart .orders__item span {
  color: #999;
  font-weight: normal;
}
@media screen and (min-width: 992px) {
  .orders-site .orders__item span, .payment-confirm-site .orders__item span, .affiliate-detail .orders__item span, .payment-site .orders__item span, .modal-add-to-cart .orders__item span {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .orders-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item, .modal-add-to-cart .orders__item {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .orders-site .orders__item > div:not(.orders__name), .payment-confirm-site .orders__item > div:not(.orders__name), .affiliate-detail .orders__item > div:not(.orders__name), .payment-site .orders__item > div:not(.orders__name), .modal-add-to-cart .orders__item > div:not(.orders__name) {
    display: inline-flex;
    align-items: center;
  }
}
@media screen and (min-width: 1200px) {
  .orders-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item, .modal-add-to-cart .orders__item {
    gap: 16px;
  }
}
.orders-site .orders__name, .payment-confirm-site .orders__name, .affiliate-detail .orders__name, .payment-site .orders__name, .modal-add-to-cart .orders__name {
  border-radius: 24px 0 24px 0;
  display: flex;
  overflow: hidden;
  margin-bottom: 4px;
  min-height: 67px;
  position: relative;
  background: #f7f5f2;
}
.orders-site .orders__name:hover .orders__name-title, .payment-confirm-site .orders__name:hover .orders__name-title, .affiliate-detail .orders__name:hover .orders__name-title, .payment-site .orders__name:hover .orders__name-title, .modal-add-to-cart .orders__name:hover .orders__name-title {
  color: var(--primary-color);
}
@media screen and (min-width: 992px) {
  .orders-site .orders__name, .payment-confirm-site .orders__name, .affiliate-detail .orders__name, .payment-site .orders__name, .modal-add-to-cart .orders__name {
    margin-right: 30px;
    margin-bottom: -1px;
    border-bottom: 1px solid #fff;
  }
}
.orders-site .orders__name-img, .payment-confirm-site .orders__name-img, .affiliate-detail .orders__name-img, .payment-site .orders__name-img, .modal-add-to-cart .orders__name-img {
  width: 136px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .orders-site .orders__name-img, .payment-confirm-site .orders__name-img, .affiliate-detail .orders__name-img, .payment-site .orders__name-img, .modal-add-to-cart .orders__name-img {
    height: 61px;
    width: 108px;
  }
}
.orders-site .orders__name-img img, .payment-confirm-site .orders__name-img img, .affiliate-detail .orders__name-img img, .payment-site .orders__name-img img, .modal-add-to-cart .orders__name-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.orders-site .orders__name-info, .payment-confirm-site .orders__name-info, .affiliate-detail .orders__name-info, .payment-site .orders__name-info, .modal-add-to-cart .orders__name-info {
  flex: 1;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  background: #f7f5f2;
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 992px) {
  .orders-site .orders__name-info, .payment-confirm-site .orders__name-info, .affiliate-detail .orders__name-info, .payment-site .orders__name-info, .modal-add-to-cart .orders__name-info {
    border-bottom-right-radius: 24px;
  }
}
.orders-site .orders__name-title, .payment-confirm-site .orders__name-title, .affiliate-detail .orders__name-title, .payment-site .orders__name-title, .modal-add-to-cart .orders__name-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: #000;
}
.orders-site .orders__total, .payment-confirm-site .orders__total, .affiliate-detail .orders__total, .payment-site .orders__total, .modal-add-to-cart .orders__total {
  color: var(--primary-color);
  font-weight: 700;
}
.orders-site .orders__status, .payment-confirm-site .orders__status, .affiliate-detail .orders__status, .payment-site .orders__status, .modal-add-to-cart .orders__status {
  color: #19764d;
}

.orders__detail, .affiliate-detail .info-detail, .modal-add-to-cart .related-courses__list {
  max-width: 880px;
  margin: 0 auto;
}
.orders__detail .date, .affiliate-detail .info-detail .date, .modal-add-to-cart .related-courses__list .date {
  padding: 20px 0 30px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 20px;
  font-weight: 600;
}
.orders__detail .btn-back, .affiliate-detail .info-detail .btn-back, .modal-add-to-cart .related-courses__list .btn-back {
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
}
.orders__detail-list {
  display: grid;
  gap: 12px;
}
.orders__detail-total {
  margin-top: 16px;
}
.orders__detail-total .total-money {
  padding: 16px 0;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: var(--grey, #292929);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}
@media screen and (min-width: 1200px) {
  .orders__detail-total .total-money {
    padding: 16px 0 46px;
  }
}
.orders__detail-total .total-money .num {
  font-size: 28px;
  font-weight: 600;
}
.orders__detail-total-item {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #333;
}
.orders__detail-total-item .text {
  color: #666;
  font-weight: 400;
}
.orders__detail-payment {
  margin-top: 20px;
}
.orders__detail-payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: #333;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  min-height: 46px;
}
.orders__detail-payment-item:first-child {
  padding-top: 0;
}
.orders__detail-payment-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0 30px;
  margin-top: 30px;
}
.orders__detail .orders__name, .affiliate-detail .info-detail .orders__name, .modal-add-to-cart .related-courses__list .orders__name {
  margin: 0;
  width: 100%;
  min-height: 76px;
  display: flex;
}
@media screen and (max-width: 767px) {
  .orders__detail .orders__name-info, .affiliate-detail .info-detail .orders__name-info, .modal-add-to-cart .related-courses__list .orders__name-info {
    padding: 10px;
  }
}
.orders__detail .orders__item, .affiliate-detail .info-detail .orders__item, .modal-add-to-cart .related-courses__list .orders__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orders__detail .orders__item-price, .affiliate-detail .info-detail .orders__item-price, .modal-add-to-cart .related-courses__list .orders__item-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: normal;
  height: 100%;
  padding: 16px 8px 16px 0;
  text-align: right;
  flex-shrink: 0;
}
@media screen and (min-width: 992px) {
  .orders__detail .orders__item-price, .affiliate-detail .info-detail .orders__item-price, .modal-add-to-cart .related-courses__list .orders__item-price {
    padding: 16px;
  }
}
.orders__detail .orders__item-price .price-new, .affiliate-detail .info-detail .orders__item-price .price-new, .modal-add-to-cart .related-courses__list .orders__item-price .price-new {
  color: var(--primary-color);
  font-size: 16px;
  color: #f16723;
  font-weight: 600;
}
.orders__detail .orders__item-price .price-old, .affiliate-detail .info-detail .orders__item-price .price-old, .modal-add-to-cart .related-courses__list .orders__item-price .price-old {
  color: #666;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: line-through;
}
.orders__detail .btn-groups-action, .affiliate-detail .info-detail .btn-groups-action, .modal-add-to-cart .related-courses__list .btn-groups-action {
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 768px) {
  .orders__detail .btn-groups-action, .affiliate-detail .info-detail .btn-groups-action, .modal-add-to-cart .related-courses__list .btn-groups-action {
    grid-template-columns: repeat(2, 1fr);
  }
}
.orders__detail .btn-groups-action .btn-main, .affiliate-detail .info-detail .btn-groups-action .btn-main, .modal-add-to-cart .related-courses__list .btn-groups-action .btn-main, .orders__detail .btn-groups-action .wishlist-site .wishlist-empty .btn-primary, .affiliate-detail .info-detail .btn-groups-action .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .orders__detail .btn-groups-action .btn-primary, .wishlist-site .wishlist-empty .affiliate-detail .info-detail .btn-groups-action .btn-primary, .affiliate-detail .wishlist-site .wishlist-empty .info-detail .btn-groups-action .btn-primary, .modal-add-to-cart .related-courses__list .btn-groups-action .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .modal-add-to-cart .related-courses__list .btn-groups-action .btn-primary, .orders__detail .btn-groups-action .modal-add-to-cart .related-courses .btn-add-all-to-cart, .affiliate-detail .info-detail .btn-groups-action .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .orders__detail .btn-groups-action .btn-add-all-to-cart, .modal-add-to-cart .related-courses .affiliate-detail .info-detail .btn-groups-action .btn-add-all-to-cart, .affiliate-detail .modal-add-to-cart .related-courses .info-detail .btn-groups-action .btn-add-all-to-cart, .modal-add-to-cart .related-courses__list .btn-groups-action .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .related-courses__list .btn-groups-action .btn-add-all-to-cart {
  padding: 15px;
}
.orders__detail .btn-groups-action .btn-outline, .affiliate-detail .info-detail .btn-groups-action .btn-outline, .modal-add-to-cart .related-courses__list .btn-groups-action .btn-outline {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}
.orders__detail .btn-groups-action .btn-outline:hover, .affiliate-detail .info-detail .btn-groups-action .btn-outline:hover, .modal-add-to-cart .related-courses__list .btn-groups-action .btn-outline:hover {
  border: 1px solid var(--primary-color);
}

@media screen and (min-width: 992px) {
  .cart-site .cart__list.orders__detail-list .orders__name, .payment-confirm-site .cart__list.orders__detail-list .orders__name, .affiliate-detail .cart__list.orders__detail-list .orders__name, .payment-site .cart__list.orders__detail-list .orders__name {
    border-bottom-right-radius: 24px;
  }
}
.cart-site .coupon, .payment-confirm-site .coupon, .affiliate-detail .coupon, .payment-site .coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 3px 14px;
  border-radius: 4px;
  border: 1px solid var(--stroke, #d9d9d9);
  background: #fff;
  overflow: hidden;
}
.cart-site .coupon + div, .payment-confirm-site .coupon + div, .affiliate-detail .coupon + div, .payment-site .coupon + div {
  color: var(--red, #e40505);
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  margin-top: 12px;
  display: inline-flex;
}
.cart-site .coupon input, .payment-confirm-site .coupon input, .affiliate-detail .coupon input, .payment-site .coupon input {
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 16px;
  line-height: 140%;
  flex: 1;
  width: 100%;
}
.cart-site .coupon input::-moz-placeholder, .payment-confirm-site .coupon input::-moz-placeholder, .affiliate-detail .coupon input::-moz-placeholder, .payment-site .coupon input::-moz-placeholder {
  color: #999;
}
.cart-site .coupon input::placeholder, .payment-confirm-site .coupon input::placeholder, .affiliate-detail .coupon input::placeholder, .payment-site .coupon input::placeholder {
  color: #999;
}
.cart-site .coupon input:not(:-moz-placeholder) + .btn-coupon, .payment-confirm-site .coupon input:not(:-moz-placeholder) + .btn-coupon, .affiliate-detail .coupon input:not(:-moz-placeholder) + .btn-coupon, .payment-site .coupon input:not(:-moz-placeholder) + .btn-coupon {
  opacity: 1;
}
.cart-site .coupon input:not(:placeholder-shown) + .btn-coupon, .payment-confirm-site .coupon input:not(:placeholder-shown) + .btn-coupon, .affiliate-detail .coupon input:not(:placeholder-shown) + .btn-coupon, .payment-site .coupon input:not(:placeholder-shown) + .btn-coupon {
  opacity: 1;
}
.cart-site .coupon .btn-coupon, .payment-confirm-site .coupon .btn-coupon, .affiliate-detail .coupon .btn-coupon, .payment-site .coupon .btn-coupon {
  color: var(--primary-color);
  background: transparent;
  border: 0;
  flex-shrink: 0;
  opacity: 0.5;
  padding: 0;
}
.cart-site .orders__item-checkbox input, .payment-confirm-site .orders__item-checkbox input, .affiliate-detail .orders__item-checkbox input, .payment-site .orders__item-checkbox input {
  display: none;
}
.cart-site .orders__item-checkbox input:checked + label, .payment-confirm-site .orders__item-checkbox input:checked + label, .affiliate-detail .orders__item-checkbox input:checked + label, .payment-site .orders__item-checkbox input:checked + label {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.cart-site .orders__item-checkbox input:checked + label::before, .payment-confirm-site .orders__item-checkbox input:checked + label::before, .affiliate-detail .orders__item-checkbox input:checked + label::before, .payment-site .orders__item-checkbox input:checked + label::before {
  display: block;
}
.cart-site .orders__item-checkbox label, .payment-confirm-site .orders__item-checkbox label, .affiliate-detail .orders__item-checkbox label, .payment-site .orders__item-checkbox label {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: inline-block;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.cart-site .orders__item-checkbox label::before, .payment-confirm-site .orders__item-checkbox label::before, .affiliate-detail .orders__item-checkbox label::before, .payment-site .orders__item-checkbox label::before {
  content: "";
  position: absolute;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: #fff;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  transform: rotate(45deg);
  display: none;
}
.cart-site .orders__tag, .payment-confirm-site .orders__tag, .affiliate-detail .orders__tag, .payment-site .orders__tag {
  color: #f16723;
  font-size: 13px;
  font-weight: 500;
  border-radius: 30px;
  background: #f5eae3;
  padding: 0px 6px;
  min-height: 16px;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
}
.cart-site .orders__item, .payment-confirm-site .orders__item, .affiliate-detail .orders__item, .payment-site .orders__item {
  padding-bottom: 0;
  margin-bottom: 0;
  border: 0;
}
.cart-site .orders__item-name, .payment-confirm-site .orders__item-name, .affiliate-detail .orders__item-name, .payment-site .orders__item-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cart-site .orders__name-info, .payment-confirm-site .orders__name-info, .affiliate-detail .orders__name-info, .payment-site .orders__name-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  flex-direction: row;
}
.cart-site .orders__item-price, .payment-confirm-site .orders__item-price, .affiliate-detail .orders__item-price, .payment-site .orders__item-price {
  height: auto;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
  flex-direction: unset;
  flex-shrink: unset;
}
.cart-site .cart__total, .payment-confirm-site .cart__total, .affiliate-detail .cart__total, .payment-site .cart__total {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 16px;
}
@media screen and (min-width: 992px) {
  .cart-site .cart__total, .payment-confirm-site .cart__total, .affiliate-detail .cart__total, .payment-site .cart__total {
    margin-bottom: 32px;
  }
}
.cart-site .cart__list, .payment-confirm-site .cart__list, .affiliate-detail .cart__list, .payment-site .cart__list {
  display: grid;
  gap: 16px;
}
@media screen and (min-width: 992px) {
  .cart-site .cart__list, .payment-confirm-site .cart__list, .affiliate-detail .cart__list, .payment-site .cart__list {
    gap: 32px;
  }
}
@media screen and (min-width: 992px) {
  .cart-site .cart__wrapper, .payment-confirm-site .cart__wrapper, .affiliate-detail .cart__wrapper, .payment-site .cart__wrapper {
    display: grid;
    grid-template-columns: 1fr 35%;
    gap: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .cart-site .cart__wrapper, .payment-confirm-site .cart__wrapper, .affiliate-detail .cart__wrapper, .payment-site .cart__wrapper {
    gap: 60px;
    grid-template-columns: 1fr minmax(auto, 350px);
  }
}
.cart-site .cart__right, .payment-confirm-site .cart__right, .affiliate-detail .cart__right, .payment-site .cart__right {
  padding-top: 20px;
  margin-top: 30px;
  border-top: 1px solid var(--light-stroke, #eaeaea);
}
@media screen and (min-width: 992px) {
  .cart-site .cart__right, .payment-confirm-site .cart__right, .affiliate-detail .cart__right, .payment-site .cart__right {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
    padding-left: 30px;
    border-left: 1px solid #e8e8e8;
  }
}
.cart-site .cart__empty, .payment-confirm-site .cart__empty, .affiliate-detail .cart__empty, .payment-site .cart__empty {
  max-width: 350px;
  margin: 0 auto;
  padding: 30px 0;
}
@media screen and (min-width: 1680px) {
  .cart-site .container-xxl, .payment-confirm-site .container-xxl, .affiliate-detail .container-xxl, .payment-site .container-xxl {
    max-width: 1408px;
  }
}
.cart-site .expried-group .dropdown-toggle::after, .payment-confirm-site .expried-group .dropdown-toggle::after, .affiliate-detail .expried-group .dropdown-toggle::after, .payment-site .expried-group .dropdown-toggle::after {
  display: none;
}
.cart-site .expried-group .dropdown-menu, .payment-confirm-site .expried-group .dropdown-menu, .affiliate-detail .expried-group .dropdown-menu, .payment-site .expried-group .dropdown-menu {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  min-width: auto;
  width: 120px;
  padding: 8px;
}
.cart-site .expried-group .dropdown-item, .payment-confirm-site .expried-group .dropdown-item, .affiliate-detail .expried-group .dropdown-item, .payment-site .expried-group .dropdown-item {
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  padding: 10px 8px;
  border-radius: 8px;
}
.cart-site .expried-group .dropdown-item:hover, .payment-confirm-site .expried-group .dropdown-item:hover, .affiliate-detail .expried-group .dropdown-item:hover, .payment-site .expried-group .dropdown-item:hover, .cart-site .expried-group .dropdown-item.active, .payment-confirm-site .expried-group .dropdown-item.active, .affiliate-detail .expried-group .dropdown-item.active, .payment-site .expried-group .dropdown-item.active {
  background: #f7f5f2;
}

.course-related {
  margin: 40px 0;
}
@media screen and (min-width: 1200px) {
  .course-related {
    margin: 70px 0 80px;
  }
}
.course-related .wrapper-course-related [class*=swiper-button] {
  top: 45%;
  transform: translateY(-50%);
  margin: 0;
  display: none;
  height: auto;
  width: auto;
}
.course-related .wrapper-course-related [class*=swiper-button].swiper-button-lock {
  display: none;
}
@media screen and (min-width: 768px) {
  .course-related .wrapper-course-related [class*=swiper-button] {
    display: block;
  }
  .course-related .wrapper-course-related [class*=swiper-button].swiper-button-prev {
    left: 3px;
  }
  .course-related .wrapper-course-related [class*=swiper-button].swiper-button-next {
    right: 3px;
  }
}
.course-related .wrapper-course-related [class*=swiper-button]::after {
  font-weight: bold;
  color: var(--primary-color);
  font-size: 30px;
}
@media screen and (min-width: 1200px) {
  .course-related .wrapper-course-related [class*=swiper-button]::after {
    font-size: 40px;
  }
}
@media screen and (min-width: 768px) {
  .course-related .swiper {
    max-width: calc(100% - 88px);
    margin: 0 auto;
  }
}
.course-related .swiper-slide {
  height: auto;
}
.course-related .swiper-pagination {
  margin-top: 20px;
  position: static;
}
.course-related .swiper-pagination-bullet {
  background: var(--primary-color);
  opacity: 0.3;
  height: 10px;
  width: 10px;
}
.course-related .swiper-pagination-bullet-active {
  opacity: 1;
}
.course-related .khoahoc-item {
  height: 100%;
}

.payment-site {
  min-height: auto;
  padding-bottom: 120px;
}
.payment-site .btn-payment {
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .payment-site .btn-payment {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.payment-site .orders__name-info {
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
  .payment-site .head-right {
    border-bottom: 1px solid #d9d9d9;
  }
}

.payment-method {
  margin-top: 40px;
}
.payment-method .payment_list {
  display: grid;
  gap: 16px;
}
.payment-method .payment_item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
}
.payment-method .payment_item-input {
  display: none;
}
.payment-method .payment_item-input:checked + label::after {
  display: block;
}
.payment-method .payment_item-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.payment-method .payment_item-name::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fff;
}
.payment-method .payment_item-name::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  width: 12px;
  height: 12px;
  background: var(--primary-color);
  border-radius: 50%;
  display: none;
}
.payment-method .payment_item-img {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.payment-method .payment_item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.invoice-info {
  width: 100%;
  padding-top: 40px;
}
.invoice-info .form-check {
  padding-left: 0;
}
.invoice-info .form-check-input {
  display: none;
}
.invoice-info .form-check-input:checked + .form-check-label::before {
  background: #f2994a;
  border-color: #f2994a;
}
.invoice-info .form-check-input:checked + .form-check-label::after {
  display: block;
}
.invoice-info .form-check-input:checked ~ .form-export-invoice {
  display: block;
}
.invoice-info .form-check-label {
  cursor: pointer;
  position: relative;
  padding-left: 30px;
  margin-bottom: 24px;
}
.invoice-info .form-check-label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
}
.invoice-info .form-check-label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: #fff;
  transform: rotate(45deg);
  width: 6px;
  height: 11px;
}
.invoice-info .form-export-invoice {
  display: none;
}
@media screen and (min-width: 768px) {
  .invoice-info .form-export-invoice .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
.invoice-info .form-export-invoice label {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 12px;
}
.invoice-info .form-export-invoice label sup {
  color: var(--primary-color);
}
.invoice-info .form-export-invoice .form-control {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  height: 42px;
  padding: 12px 14px;
  font-size: 16px;
  outline: 0;
  box-shadow: none;
}
.invoice-info .form-export-invoice .form-control::-moz-placeholder {
  color: #999;
}
.invoice-info .form-export-invoice .form-control::placeholder {
  color: #999;
}

.payment-confirm-site, .affiliate-detail {
  min-height: 50vh;
  padding-bottom: 120px;
}
@media screen and (min-width: 1200px) {
  .payment-confirm-site, .affiliate-detail {
    min-height: calc(100vh - 250px);
  }
}
.payment-confirm-site .text-head, .affiliate-detail .text-head {
  margin-bottom: 24px;
  color: var(--bl, #0a0a27);
  text-align: center;
  font-size: 16px;
  line-height: 140%;
}
@media screen and (min-width: 768px) {
  .payment-confirm-site .text-head, .affiliate-detail .text-head {
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
  }
}
.payment-confirm-site .confirm-error, .affiliate-detail .confirm-error {
  max-width: 406px;
  margin: 0 auto;
}

.main__dashboard-quiz {
  background: #f7f5f2;
  position: relative;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz {
    max-height: 80vh;
    overflow-y: auto;
  }
}
.main__dashboard-quiz::-webkit-scrollbar {
  width: 6px;
  border-radius: 10px;
}
.main__dashboard-quiz::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .main__dashboard-quiz {
    max-height: 550px;
    height: 550px;
  }
}
@media screen and (min-width: 1680px) {
  .main__dashboard-quiz {
    max-height: 693px;
    height: 693px;
  }
}
.main__dashboard-quiz .all-quiz {
  position: relative;
  z-index: 99;
  transition: width 0.3s ease;
  border-radius: 0px 0px 8px 0px;
  width: 100%;
  padding: 16px 16px 0;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .all-quiz {
    width: 250px;
    max-width: 250px;
    position: sticky;
    left: 0;
    top: 0;
    padding: 0;
  }
}
.main__dashboard-quiz .all-quiz.show {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .all-quiz.show {
    transform: translateX(0);
  }
  .main__dashboard-quiz .all-quiz.show .txt.show {
    transform: translateX(0);
  }
}
.main__dashboard-quiz .all-quiz .txt {
  cursor: pointer;
  background: #fff;
  padding: 12px;
  border-radius: 0px 0px 8px 0px;
  width: 100%;
  position: sticky;
  top: 0;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .all-quiz .txt {
    position: static;
    width: 100%;
    padding: 12px 4px 12px 12px;
  }
}
.main__dashboard-quiz .all-quiz .txt.show {
  width: 100%;
  border-radius: 0;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .all-quiz .txt.show {
    box-shadow: none;
  }
}
.main__dashboard-quiz .all-quiz-list {
  background: #fff;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  .main__dashboard-quiz .all-quiz-list {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 0px 0px 8px 0px;
    overflow-y: auto;
    transition: width 0.3s ease;
    display: none;
  }
  .main__dashboard-quiz .all-quiz-list.show {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .all-quiz-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: grid;
    gap: 4px;
    transform: translateX(-100%);
  }
  .main__dashboard-quiz .all-quiz-list.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
}
.main__dashboard-quiz .all-quiz-item {
  cursor: pointer;
  padding: 8px 12px;
}
.main__dashboard-quiz .all-quiz-item:hover, .main__dashboard-quiz .all-quiz-item.active {
  background: #222;
}
.main__dashboard-quiz .all-quiz-item:hover svg path, .main__dashboard-quiz .all-quiz-item.active svg path {
  stroke: #fff;
}
.main__dashboard-quiz .all-quiz-item:hover .name-number, .main__dashboard-quiz .all-quiz-item.active .name-number {
  color: #fff;
}
.main__dashboard-quiz .all-quiz-item .name-number {
  color: #333;
}
.main__dashboard-quiz .all-quiz-item .name-quiz {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.main__dashboard-quiz .all-quiz .showless {
  padding: 12px;
  border-radius: 0px 0px 8px 0px;
  border-top: 1px solid #eaeaea;
  background: #fff;
}
.main__dashboard-quiz .main-wrapper-quiz {
  background: #f7f5f2;
  padding: 16px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .main-wrapper-quiz {
    padding: 30px 12px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
  }
}
.main__dashboard-quiz .wrapper-quiz {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  background: #fff;
  padding: 30px 12px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .main__dashboard-quiz .wrapper-quiz {
    padding: 30px;
  }
}
.main__dashboard-quiz .wrapper-quiz-paragraph {
  max-width: 976px;
}
@media screen and (min-width: 1200px) {
  .main__dashboard-quiz .wrapper-quiz-paragraph {
    padding-top: 26px;
    padding-left: 102px;
    padding-right: 102px;
  }
}
.main__dashboard-quiz .quiz__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1200px) {
  .main__dashboard-quiz .quiz__list {
    gap: 36px;
  }
}
.main__dashboard-quiz .quiz {
  /* Quiz Answer Styles */
}
.main__dashboard-quiz .quiz__answer .form-label {
  position: relative;
}
.main__dashboard-quiz .quiz__answer .form-label.correct::before, .main__dashboard-quiz .quiz__answer .form-label.incorrect::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 97% center;
}
.main__dashboard-quiz .quiz__answer .form-label.correct::before {
  background-image: url("../images/icon-correct.png");
}
.main__dashboard-quiz .quiz__answer .form-label.incorrect::before {
  background-image: url("../images/icon-incorrect.png");
}
.main__dashboard-quiz .quiz__answer .form-label input {
  display: none;
}
.main__dashboard-quiz .quiz__answer .form-label input:checked + label {
  border-color: #fdd1bb;
}
.main__dashboard-quiz .quiz__answer .form-label input:checked + label::after {
  display: block;
}
.main__dashboard-quiz .quiz__answer .form-label label {
  position: relative;
  display: block;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  padding: 12px 40px 12px 44px;
  color: #000;
  margin: 0;
  cursor: pointer;
}
.main__dashboard-quiz .quiz__answer .form-label label::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
}
.main__dashboard-quiz .quiz__answer .form-label label::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: none;
}
.main__dashboard-quiz .quiz {
  /* Quiz Explanation */
}
.main__dashboard-quiz .quiz__explanation {
  padding: 12px 16px;
  border-radius: 8px;
  background: #f7f5f2;
}
.main__dashboard-quiz .quiz__explanation input {
  display: none;
}
.main__dashboard-quiz .quiz__explanation input:checked + label::after {
  display: block;
}
.main__dashboard-quiz .quiz__explanation label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}
.main__dashboard-quiz .quiz__explanation label::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  border-radius: 4px;
  background: #fff;
}
.main__dashboard-quiz .quiz__explanation label::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--primary-color);
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  display: none;
}
.main__dashboard-quiz .quiz-update .quiz-update-has-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  /* 			.play-circle {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: auto;
  	height: auto;
  	object-fit: cover;
  	object-position: center;
  	z-index: 1;
  	cursor: pointer;
  	transition: all 0.3s;
  }*/
}
.main__dashboard-quiz .quiz-update .quiz-update-has-img iframe,
.main__dashboard-quiz .quiz-update .quiz-update-has-img video,
.main__dashboard-quiz .quiz-update .quiz-update-has-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.main__dashboard-quiz .quiz-update .loading-spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: rgba(221, 221, 221, 0.5);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner {
  --uib-size: 2.8rem;
  --uib-speed: 0.9s;
  --uib-color: #f26724;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-size);
  width: var(--uib-size);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot::before {
  content: "";
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: var(--uib-color);
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(2) {
  transform: rotate(45deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(3) {
  transform: rotate(90deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(4) {
  transform: rotate(135deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(5) {
  transform: rotate(180deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(6) {
  transform: rotate(225deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(7) {
  transform: rotate(270deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(8) {
  transform: rotate(315deg);
}
.main__dashboard-quiz .quiz-update .loading-spin .dot-spinner__dot:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);
}
@keyframes pulse0112 {
  0%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.main__dashboard-quiz .quiz-update .quiz__answer-audio {
  border-radius: 8px;
  background: #f5f6f8;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image {
  display: grid;
}
@media screen and (min-width: 992px) {
  .main__dashboard-quiz .quiz-update .quiz__answer-list-image {
    grid-template-columns: repeat(3, 1fr);
  }
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image {
  gap: 16px;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label input {
  display: none;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label input:checked + span::before {
  display: block;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label input:checked ~ .check-icon {
  opacity: 1;
  visibility: visible;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label span {
  width: 20px;
  height: 20px;
  border: 1px solid #bfbfbf;
  border-radius: 50%;
  position: relative;
  display: block;
  flex-shrink: 0;
  transition: all 0.3s;
  cursor: pointer;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  transition: all 0.3s;
  height: 12px;
  width: 12px;
  background-color: var(--primary-color);
  display: none;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image label .check-icon {
  opacity: 0;
  visibility: hidden;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image .item {
  border-radius: 4px;
  border: 1px solid #fdd1bb;
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image .image {
  width: 100%;
  height: 180px;
  position: relative;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image .image > img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.main__dashboard-quiz .quiz-update .quiz__answer-list-image .image .btn-zoom {
  position: absolute;
  bottom: 3px;
  right: 3px;
  z-index: 2;
}
.main__dashboard-quiz .form-group-essay .form-control {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  min-height: 90px;
  padding: 12px 14px;
  outline: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.main__dashboard-quiz .form-group-essay .form-control:-moz-placeholder {
  color: #999;
}
.main__dashboard-quiz .form-group-essay .form-control:placeholder-shown {
  color: #999;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
}

.quiz__answer-list-image-fancybox .fancybox__content {
  border-radius: 12px;
  background: #fff !important;
  padding: 24px 16px !important;
}
@media screen and (min-width: 768px) {
  .quiz__answer-list-image-fancybox .fancybox__content {
    padding: 56px 30px 30px !important;
  }
}
.quiz__answer-list-image-fancybox .fancybox__content .is-close-btn {
  opacity: 1;
  top: 10px;
  right: 23px;
}
.quiz__answer-list-image-fancybox .fancybox__content .is-close-btn svg path {
  stroke: #292929;
}

.affiliate-site .affiliate__wrapper {
  display: grid;
  gap: 24px;
  padding: 40px 0;
}
@media screen and (min-width: 992px) {
  .affiliate-site .affiliate__wrapper {
    grid-template-columns: 35.15625% 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .affiliate-site .affiliate__wrapper {
    gap: 60px;
    padding: 60px 0;
  }
}
.affiliate-site .affiliate-register .form-more .form-label {
  margin-bottom: 12px;
}
.affiliate-site .affiliate-register .add-more {
  margin: 24px 0;
}
@media screen and (min-width: 1200px) {
  .affiliate-site .affiliate-register .add-more {
    margin: 36px 0;
  }
}
.affiliate-site .affiliate-register .add-more span {
  display: block;
  font-weight: normal;
}
.affiliate-site .affiliate-register .title-heading {
  color: #000;
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
}
.affiliate-site .affiliate-register .form .grid {
  display: grid;
  gap: 24px 16px;
}
@media screen and (min-width: 768px) {
  .affiliate-site .affiliate-register .form .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.affiliate-site .affiliate-register .form label {
  color: #000;
  font-weight: 500;
  margin-bottom: 8px;
}
.affiliate-site .affiliate-register .form-control {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  outline: 0;
  box-shadow: none;
}
.affiliate-site .affiliate-register .form-control::-moz-placeholder {
  color: #999;
}
.affiliate-site .affiliate-register .form-control:-moz-placeholder {
  color: #999;
}
.affiliate-site .affiliate-register .form-control::placeholder, .affiliate-site .affiliate-register .form-control:placeholder-shown {
  color: #999;
}
.affiliate-site .affiliate-register .form-control:focus {
  border-color: var(--primary-color);
}
.affiliate-site .affiliate-register .form-control-tiktok, .affiliate-site .affiliate-register .form-control-ytb, .affiliate-site .affiliate-register .form-control-fb, .affiliate-site .affiliate-register .form-control-ins {
  padding-left: 40px;
  background-position: 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
.affiliate-site .affiliate-register .form-control-tiktok {
  background-image: url("../images/affiliate-icon-tiktok.png");
}
.affiliate-site .affiliate-register .form-control-ytb {
  background-image: url("../images/affiliate-icon-ytb.png");
}
.affiliate-site .affiliate-register .form-control-fb {
  background-image: url("../images/affiliate-icon-fb.png");
}
.affiliate-site .affiliate-register .form-control-ins {
  background-image: url("../images/affiliate-icon-ins.png");
}
.affiliate-site .affiliate-register .form-upload {
  border-radius: 12px;
  border: 1px dashed rgba(241, 103, 35, 0.3);
  background: rgba(241, 103, 35, 0.05);
  padding: 24px;
  cursor: pointer;
  position: relative;
}
.affiliate-site .affiliate-register .form-upload.active {
  display: grid;
  gap: 16px;
  padding-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .affiliate-site .affiliate-register .form-upload.active {
    grid-template-columns: 1fr 1fr;
  }
}
.affiliate-site .affiliate-register .form-upload .add-more-image {
  display: none;
  cursor: pointer;
  position: absolute;
  bottom: 16px;
  left: 24px;
  pointer-events: none;
}
.affiliate-site .affiliate-register .form .file-upload {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.affiliate-site .affiliate-register .form .file-upload input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.affiliate-site .affiliate-register .form textarea {
  min-height: 68px;
}
.affiliate-site .affiliate-register .dz-preview {
  border-radius: 8px;
  background: #fff;
}
.affiliate-site .affiliate-register .dz-preview .dz-image {
  width: 68px;
  height: 68px;
  aspect-ratio: 1/1;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background-color: #d9d9d9;
}
.affiliate-site .affiliate-register .dz-preview .dz-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.affiliate-site .affiliate-register .dz-preview .dz-upload {
  position: relative;
  height: 6px;
  border-radius: 10px;
  background-color: #eaeaea;
}
.affiliate-site .affiliate-register .dz-preview .dz-upload-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background-color: #333;
}
.affiliate-site .affiliate-register .dz-preview .dz-size strong {
  font-weight: normal;
}
.affiliate-site .code-user {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.affiliate-site .code-user .number {
  color: #000;
  font-size: 34px;
  font-weight: 500;
  line-height: normal;
  height: 42px;
  padding: 1px 14px;
  border-radius: 4px;
  background: rgba(241, 103, 35, 0.1);
}
.affiliate-site .code-user .copy {
  color: var(--orange, #f16723);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  border-radius: 4px;
  border: 1px solid var(--orange, #f16723);
  height: 42px;
  padding: 6px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.affiliate-statistical {
  margin: 48px 0;
}
@media screen and (min-width: 1200px) {
  .affiliate-statistical {
    margin: 60px 0;
  }
}
@media screen and (min-width: 1200px) {
  .affiliate-statistical .container {
    max-width: 1304px;
  }
}
.affiliate-statistical .number-affiliate {
  display: grid;
  gap: 24px;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .affiliate-statistical .number-affiliate {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .affiliate-statistical .number-affiliate {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 60px;
  }
}
.affiliate-statistical .number-affiliate .number-item {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(241, 103, 35, 0.1);
  background: rgba(241, 103, 35, 0.05);
}
@media screen and (min-width: 1200px) {
  .affiliate-statistical .number-affiliate .number-item {
    padding: 30px;
  }
}
.affiliate-statistical .flatpickr {
  width: 160px;
  position: relative;
}
.affiliate-statistical .flatpickr input {
  border-radius: 4px;
  border: 1px solid var(--stroke, #d9d9d9);
  background: #fff;
  height: 42px;
  padding-right: 40px;
  box-shadow: none;
  outline: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.affiliate-statistical .flatpickr input::-moz-placeholder {
  color: #999;
}
.affiliate-statistical .flatpickr input::placeholder {
  color: #999;
}
.affiliate-statistical .flatpickr .input-button {
  position: absolute;
  top: 10px;
  right: 12px;
}
.affiliate-statistical .affiliate-statistical-table {
  margin: 30px 0;
  overflow: hidden;
  background: #fff;
}
@media screen and (min-width: 1200px) {
  .affiliate-statistical .affiliate-statistical-table {
    margin-bottom: 60px;
  }
}
.affiliate-statistical .affiliate-statistical-table .table-responsive {
  border-radius: 12px;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table {
  margin: 0;
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .affiliate-statistical .affiliate-statistical-table .affiliate-table {
    font-size: 16px;
  }
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table thead th {
  border: none;
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 12px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  .affiliate-statistical .affiliate-statistical-table .affiliate-table thead th {
    padding: 20px 16px;
    font-size: 16px;
  }
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table thead th:first-child {
  border-top-left-radius: 12px;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table thead th:last-child {
  border-top-right-radius: 12px;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table tbody tr:hover {
  background-color: rgba(241, 103, 35, 0.02);
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td {
  border: none;
  border-bottom: 1px solid #f3f3f3;
  padding: 16px 12px;
  color: #333;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td {
    padding: 20px 16px;
  }
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td:last-child {
  border-right: none;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td.commission-after-tax {
  color: var(--primary-color, #f16723);
  font-weight: 600;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td .name {
  display: inline-block;
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail {
  color: var(--primary-color, #f16723);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(241, 103, 35, 0.5);
  background: rgba(255, 255, 255, 0.2);
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail:hover {
  background: var(--primary-color, #f16723);
  color: #fff;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail:hover svg path {
  stroke: #fff;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail .icon-arrow-right {
  width: 12px;
  height: 12px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail .icon-arrow-right::before {
  content: "→";
  font-size: 12px;
}
.affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail:hover .icon-arrow-right {
  transform: translateX(2px);
}
@media screen and (max-width: 991px) {
  .affiliate-statistical .affiliate-statistical-table .table-responsive {
    overflow-x: auto;
  }
  .affiliate-statistical .affiliate-statistical-table .affiliate-table {
    min-width: 800px;
  }
}
@media screen and (max-width: 767px) {
  .affiliate-statistical .affiliate-statistical-table .affiliate-table {
    min-width: 900px;
    font-size: 14px;
  }
  .affiliate-statistical .affiliate-statistical-table .affiliate-table thead th,
  .affiliate-statistical .affiliate-statistical-table .affiliate-table tbody td {
    padding: 12px 8px;
  }
  .affiliate-statistical .affiliate-statistical-table .affiliate-table .btn-detail {
    padding: 4px 12px;
    font-size: 13px;
  }
}

.affiliate-static {
  padding: 60px 0;
  min-height: 70vh;
}
.affiliate-static .affiliate-thanks {
  display: grid;
  gap: 40px;
}
@media screen and (min-width: 768px) {
  .affiliate-static .affiliate-thanks {
    grid-template-columns: 0.8fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .affiliate-static .affiliate-thanks {
    gap: 60px;
  }
}
.affiliate-static .affiliate-chuc-mung,
.affiliate-static .affiliate-error {
  max-width: 800px;
  margin: 0 auto;
}
.affiliate-static .affiliate-chuc-mung .btn-main, .affiliate-static .affiliate-chuc-mung .wishlist-site .wishlist-empty .btn-primary, .wishlist-site .wishlist-empty .affiliate-static .affiliate-chuc-mung .btn-primary, .affiliate-static .affiliate-chuc-mung .modal-add-to-cart .related-courses .btn-add-all-to-cart, .modal-add-to-cart .related-courses .affiliate-static .affiliate-chuc-mung .btn-add-all-to-cart,
.affiliate-static .affiliate-error .btn-main,
.affiliate-static .affiliate-error .wishlist-site .wishlist-empty .btn-primary,
.wishlist-site .wishlist-empty .affiliate-static .affiliate-error .btn-primary,
.affiliate-static .affiliate-error .modal-add-to-cart .related-courses .btn-add-all-to-cart,
.modal-add-to-cart .related-courses .affiliate-static .affiliate-error .btn-add-all-to-cart {
  max-width: 361px;
  width: 100%;
}

.affiliate-detail .affiliate-detail-info {
  margin-bottom: 30px;
  display: grid;
}
@media screen and (min-width: 768px) {
  .affiliate-detail .affiliate-detail-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 48px;
         column-gap: 48px;
  }
}
@media screen and (min-width: 1200px) {
  .affiliate-detail .affiliate-detail-info {
    -moz-column-gap: 90px;
         column-gap: 90px;
  }
}
.affiliate-detail .affiliate-detail-info-item {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-bottom: 1px solid #e8e8e8;
}

@media screen and (max-width: 1199px) {
  #form-affiliate #time-element {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  #form-affiliate #time-element {
    grid-template-columns: 1fr;
  }
}

.modal-tuvan.show {
  z-index: 9999999;
}
.modal-tuvan .modal-dialog {
  max-width: 100%;
  margin: 0;
}
@media screen and (min-width: 576px) {
  .modal-tuvan .modal-dialog {
    max-width: 540px;
    margin: 1.75rem auto;
  }
}
@media screen and (min-width: 768px) {
  .modal-tuvan .modal-dialog {
    max-width: 720px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan .modal-dialog {
    max-width: 960px;
  }
}
@media screen and (min-width: 1200px) {
  .modal-tuvan .modal-dialog {
    max-width: 1200px;
  }
}
.modal-tuvan .modal-content {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(215deg, #d3dbf0 1.85%, rgba(255, 255, 255, 0) 35.15%), linear-gradient(150deg, #fff 30.84%, #d3dbf0 91.04%);
  min-height: 100vh;
  min-height: 100dvh;
}
@media screen and (min-width: 576px) {
  .modal-tuvan .modal-content {
    border-radius: 20px;
    min-height: auto;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan .modal-content {
    border-radius: 30px;
  }
}
.modal-tuvan__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__close {
    top: 16px;
    right: 16px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__close {
    top: 20px;
    right: 20px;
  }
}
.modal-tuvan__close:hover {
  opacity: 1;
}
.modal-tuvan__close svg {
  width: 24px;
  height: 24px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__close svg {
    width: 28px;
    height: 28px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__close svg {
    width: 32px;
    height: 32px;
  }
}
.modal-tuvan__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .modal-tuvan__wrapper {
    padding: 0 30px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 0 40px;
    min-height: 560px;
  }
}
@media screen and (min-width: 1200px) {
  .modal-tuvan__wrapper {
    gap: 60px;
    padding: 0 60px;
    min-height: 620px;
  }
}
.modal-tuvan__left {
  padding: 24px 16px 0;
  position: relative;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__left {
    padding: 30px 24px 0;
  }
}
@media screen and (min-width: 768px) {
  .modal-tuvan__left {
    padding: 30px 0 0;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__left {
    flex: 1;
    padding: 50px 0 0;
    min-height: 460px;
  }
}
@media screen and (min-width: 1200px) {
  .modal-tuvan__left {
    padding: 60px 0 0;
    min-height: 500px;
  }
}
.modal-tuvan__info {
  position: relative;
  z-index: 2;
}
.modal-tuvan__title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  line-height: normal;
  margin-bottom: 8px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__title {
    font-size: 22px;
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__title {
    font-size: 26px;
  }
}
@media screen and (min-width: 1200px) {
  .modal-tuvan__title {
    font-size: 28px;
  }
}
.modal-tuvan__desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-gray);
  line-height: 1.4;
  margin-bottom: 0;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__desc {
    font-size: 14px;
  }
}
.modal-tuvan__illustration {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
  display: none;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__illustration {
    display: block;
    max-width: 320px;
    margin: 16px auto 0;
  }
}
@media screen and (min-width: 768px) {
  .modal-tuvan__illustration {
    max-width: 380px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__illustration {
    position: absolute;
    bottom: -71px;
    left: 0;
    max-width: none;
    margin-top: 0;
    max-width: 600px;
  }
}
.modal-tuvan__illustration img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 992px) {
  .modal-tuvan__illustration img {
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: bottom;
       object-position: bottom;
  }
}
.modal-tuvan__right {
  padding: 16px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__right {
    padding: 24px;
  }
}
@media screen and (min-width: 768px) {
  .modal-tuvan__right {
    padding: 24px 0;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__right {
    flex: 1;
    padding: 30px 0;
  }
}
.modal-tuvan__form {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__form {
    border-radius: 16px;
    padding: 20px;
    gap: 24px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__form {
    border-radius: 20px;
    padding: 24px;
  }
}
.modal-tuvan__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__fields {
    gap: 20px;
  }
}
@media screen and (min-width: 992px) {
  .modal-tuvan__fields {
    gap: 24px;
  }
}
.modal-tuvan__field .form-label {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: normal;
  margin-bottom: 6px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__field .form-label {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
.modal-tuvan__field .form-control:not(.form-select),
.modal-tuvan__field .form-select:not(.form-select) {
  background: #fff;
}
.modal-tuvan__field .form-control,
.modal-tuvan__field .form-select {
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  font-size: 14px;
  line-height: normal;
  outline: 0;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__field .form-control,
  .modal-tuvan__field .form-select {
    padding: 11px 14px;
    font-size: 16px;
  }
}
.modal-tuvan__field .form-control::-moz-placeholder, .modal-tuvan__field .form-select::-moz-placeholder {
  color: #999;
}
.modal-tuvan__field .form-control::placeholder,
.modal-tuvan__field .form-select::placeholder {
  color: #999;
}
.modal-tuvan__field .form-control:focus,
.modal-tuvan__field .form-select:focus {
  box-shadow: none;
  border-color: var(--primary-color);
}
.modal-tuvan__field .form-select {
  --bs-form-select-bg-img: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNCA2TDggMTBMMTIgNiIgc3Ryb2tlPSIjNjY2NjY2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
  padding-right: 30px !important;
  color: #999;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-size: 16px 16px;
}
.modal-tuvan__field .form-select:has(option:checked:not([disabled])) {
  color: #000;
}
.modal-tuvan__agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.modal-tuvan__agreement input {
  display: none;
}
.modal-tuvan__agreement input:checked + label::after {
  display: block;
}
.modal-tuvan__agreement svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.modal-tuvan__agreement span {
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: #999;
  line-height: 1.4;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__agreement span {
    font-size: 14px;
    line-height: normal;
  }
}
.modal-tuvan__agreement label {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  cursor: pointer;
}
.modal-tuvan__agreement label::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: rgba(241, 103, 35, 0.1);
}
.modal-tuvan__agreement label::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 3px;
  width: 9px;
  height: 6px;
  border-width: 0 0px 2px 2px;
  border-style: solid;
  border-color: #f16723;
  transform: rotate(-45deg);
  display: none;
}
.modal-tuvan__submit {
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 4px;
}
@media screen and (min-width: 576px) {
  .modal-tuvan__submit {
    font-size: 16px;
  }
}

.contact-widget {
  position: relative;
  width: auto !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}
.contact-widget.active .contact-widget__menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.contact-widget__menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  display: none;
}
.contact-widget.active .contact-widget__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
.contact-widget__card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  background: #fff5f0;
  padding: 16px;
  width: 55px !important;
  margin-bottom: 0 !important;
}
.contact-widget__divider {
  display: block !important;
  width: 20px !important;
  height: 1px;
  background: #e0d5cf;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.contact-widget__item {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin-bottom: 0 !important;
}
.contact-widget__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0 !important;
  transition: opacity 0.2s ease;
}
.contact-widget__link:hover {
  opacity: 0.7;
}
.contact-widget__link svg {
  width: 24px !important;
  height: 24px;
  margin-bottom: 0 !important;
  display: block !important;
  flex-shrink: 0;
}
.contact-widget__link img {
  width: 24px !important;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 0 !important;
  display: block !important;
}
.contact-widget__tooltip {
  position: absolute;
  right: calc(100% + 24px);
  top: 50%;
  background: #111;
  color: #fff;
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-50%) translateX(8px);
}
.contact-widget__tooltip strong {
  display: block;
  font-weight: 700;
  margin-bottom: 0 !important;
  color: #fff;
}
.contact-widget__tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #111;
  border-right: 0;
  width: 0 !important;
  height: 0 !important;
  margin-bottom: 0 !important;
}
.contact-widget__item:hover .contact-widget__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.contact-widget__toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 59.846px;
  height: 72.471px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: transform 0.3s ease;
  margin-bottom: 0 !important;
  position: relative;
}
.contact-widget__toggle-open, .contact-widget__toggle-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: 0 !important;
  border-radius: 50%;
}
.contact-widget__toggle-open img, .contact-widget__toggle-close img {
  width: 100% !important;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 0 !important;
}
.contact-widget__toggle-open svg, .contact-widget__toggle-close svg {
  width: 24px !important;
  height: 24px;
  margin-bottom: 0 !important;
}
.contact-widget__toggle-close {
  opacity: 0;
  transform: rotate(-90deg);
  background: #4c5664;
  height: 60px !important;
  width: 60px !important;
}
.contact-widget__toggle-open {
  opacity: 1;
  transform: rotate(0) scale(1);
  width: 59.846px;
  height: 72.471px;
}
.contact-widget.active .contact-widget__toggle-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
.contact-widget.active .contact-widget__toggle-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}/*# sourceMappingURL=style.css.map */