* {box-sizing: border-box;padding: 0;margin: 0;}*, *::before, *::after {box-sizing: border-box;}body {font-family: var(--font-primary);}a {text-decoration: none;margin: 0;}p {margin: 0;}ul {padding: 0;list-style-type: none;margin: 0;}button {border: none;background-color: transparent;outline: none;}img.img {width: 100%;height: 100%;object-fit: cover;object-position: center;}.row {margin: 0;padding: 0;> * {padding: 0;}}.pointer {cursor: pointer;}.display-l {font-family: var(--font-primary);font-size: 56px;font-weight: 900;line-height: 85px;}.display-m {font-family: var(--font-primary);font-size: 48px;font-weight: 900;line-height: 72px;}.display-s {font-family: var(--font-primary);font-weight: 900;font-size: 40px;line-height: 60px;}.heading-h1 {font-family: var(--font-primary);font-weight: 600;font-size: 32px;line-height: 54px;margin-bottom: 0;}.heading-h2 {font-family: var(--font-primary);font-weight: 600;font-size: 30px;line-height: 48px;margin-bottom: 0;}.heading-h3, h3 {font-family: var(--font-primary);font-weight: 600;font-size: 24px;line-height: 42px;margin-bottom: 0;}.heading-h4, h4 {font-family: var(--font-primary);font-weight: 600;font-size: 20px;line-height: 36px;margin-bottom: 0;}.heading-h5, h5 {font-family: var(--font-primary);font-weight: 600;font-size: 20px;line-height: 30px;margin-bottom: 0;}.heading-h6, h6 {font-family: var(--font-primary);font-weight: 600;font-size: 16px;line-height: 24px;margin-bottom: 0;}.body-xl {font-family: var(--font-primary);font-weight: 400;font-size: 22px;line-height: 40px;}.body-l {font-family: var(--font-primary);font-weight: 400;font-size: 20px;line-height: 36px;}.body-m {font-family: var(--font-primary);font-weight: 400;font-size: 18px;line-height: 32px;}.body-s {font-family: var(--font-primary);font-weight: 400;font-size: 16px;line-height: 28px;}.body-xs {font-family: var(--font-primary);font-weight: 400;font-size: 14px;line-height: 26px;}.body-caption {font-family: var(--font-primary);font-weight: 400;font-size: 12px;line-height: 22px;}.label-l {font-family: var(--font-primary);font-weight: 500;font-size: 20px;line-height: 40px;}.label-m {font-family: var(--font-primary);font-weight: 400;font-size: 16px;line-height: 36px;}.label-s {font-family: var(--font-primary);font-weight: 400;font-size: 14px;line-height: 32px;}.marketing-xl {font-family: var(--font-secondary);font-weight: 400;font-size: 56px;line-height: 102px;}.marketing-l {font-family: var(--font-secondary);font-weight: 400;font-size: 48px;line-height: 86px;}.marketing-m {font-family: var(--font-secondary);font-weight: 400;font-size: 40px;line-height: 72px;}.marketing-s {font-family: var(--font-secondary);font-weight: 400;font-size: 30px;line-height: 48px;}.marketing-xs {font-family: var(--font-secondary);font-weight: 400;font-size: 26px;line-height: 40px;}.p-12 {padding: 12px;}.p-20 {padding: 20px;}.p-28 {padding: 28px;}.p-32 {padding: 32px;}.rounded-12 {border-radius: 0.75rem;}.rounded-20 {border-radius: 1.25rem;}.shadow-light {box-shadow: 0 4px 40px 1px rgb(129, 129, 129, 0.2);}.shadow-hard {box-shadow: 0 4px 20px 1px rgb(129, 129, 129, 0.25);}.container {padding-inline: 0;}.container > section {padding-block: 32px;}.title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;h2 {display: flex;justify-content: flex-start;align-items: center;color: var(--semantic-text-primary);font-size: 20px;line-height: 30px;}a {display: flex;justify-content: flex-start;align-items: center;color: var(--semantic-text-tertiary);font-size: 16px;line-height: 28px;}}.date {right: 12px;top: 12px;padding: 4px 12px;border-radius: 20px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);color: var(--semantic-text-secondary);}.stars {width: fit-content;.rating-front {position: absolute;left: 0;top: 0;display: flex;justify-content: flex-start;align-items: center;width: 92%;overflow: hidden;svg path {stroke: var(--semantic-warning-500);fill: var(--semantic-warning-500);flex-shrink: 0;}}.rating-back {display: flex;justify-content: flex-start;align-items: center;flex-shrink: 0;}> div {svg {flex-shrink: 0;}}}.header-container {border-bottom: 1px solid var(--semantic-border-primary);.login {a {span {top: -6px;right: -10px;}}}}.breadcrumb-custom {padding-block: 20px;ol {display: flex;align-items: center;margin: 0;padding: 0;list-style: none;}li {display: flex;align-items: center;a {color: var(--semantic-text-tertiary);font-size: 14px;line-height: 26px;}}li:last-child a {color: var(--semantic-text-secondary);}li:not(:last-child)::after {content: "";display: inline-block;width: 24px;height: 24px;background: url("../../assets/svg/arrow-left.svg") center no-repeat;}}.text-field {label {color: var(--semantic-text-secondary);}input {border: 1px solid var(--semantic-border-secondary);background-color: var(--semantic-surface-primary);border-radius: 16px;padding: 8px 12px;width: 100%;height: 52px;&::placeholder {font-size: 16px;line-height: 36px;color: var(--semantic-text-tertiary);}&:focus {background-color: var(--semantic-surface-secondary);border: none;outline: none;}&:disabled {border: 1px solid var(--semantic-border-primary);background-color: var(--semantic-surface-primary);&::placeholder {color: var(--semantic-text-disabled);}}}span {color: var(--semantic-error-500);}}.modal-dialog {width: 358px;}.slider-icon {width: 70px;height: 70px;border-radius: 50px;background-color: var(--semantic-surface-primary);border: 2px solid var(--semantic-border-secondary);padding: 12px;display: flex;justify-content: center;align-items: center;position: absolute;top: 50%;transform: translateY(-50%);cursor: pointer;z-index: 10;&.arrow-left {right: auto;left: 5px;}&.arrow-right {left: auto;right: 5px;}}.txt-normal {color: var(--gray-text-normal);}.txt-primary {color: var(--semantic-text-primary);}.txt-secondary {color: var(--semantic-text-secondary);}.txt-tertiary {color: var(--semantic-text-tertiary);}.txt-error {color: var(--semantic-error-500);}.txt-success {color: var(--semantic-success-700);}.txt-white {color: var(--semantic-text-inverse);}.txt-disabled {color: var(--semantic-text-disabled);}.button {padding: 6px 10px;cursor: pointer;display: inline-flex;justify-content: center;align-items: center;gap: 4px;font-size: 20px;line-height: 40px;border-radius: 24px;background-color: var(--primary-500);color: var(--semantic-text-inverse);svg {width: 40px;height: 40px;stroke: var(--semantic-text-inverse);}&:hover {background-color: var(--primary-600);}&:active {background-color: var(--primary-700);}&.disabled {background-color: var(--primary-100);}&.outline {background-color: transparent;color: var(--primary-500);border: 2px solid var(--primary-500);svg {stroke: var(--primary-500);}&:hover {color: var(--primary-600);border: 2px solid var(--primary-600);}&:active {color: var(--primary-700);border: 2px solid var(--primary-700);}&.disabled {color: var(--primary-100);border: 2px solid var(--primary-100);}}&.secondary {background-color: var(--secondary-500);&:hover {background-color: var(--secondary-600);}&:active {background-color: var(--secondary-700);}&.disabled {background-color: var(--secondary-100);}&.outline {background-color: transparent;color: var(--secondary-500);border: 2px solid var(--secondary-500);svg {stroke: var(--secondary-500);}&:hover {color: var(--secondary-600);border: 2px solid var(--secondary-600);}&:active {color: var(--secondary-700);border: 2px solid var(--secondary-700);}&.disabled {color: var(--secondary-100);border: 2px solid var(--secondary-100);}}}&.sm {font-size: 16px;line-height: 36px;svg {width: 36px;height: 36px;}}}.badge {display: inline-flex;justify-content: center;align-items: center;padding: 0 8px;border-radius: 24px;background-color: var(--secondary-500);color: var(--semantic-text-inverse);font-size: 14px;font-weight: 500;line-height: 24px;}.off-badge {display: inline-flex;justify-content: center;align-items: center;padding: 0 12px;border-radius: 24px;background-color: var(--semantic-error-500);color: var(--semantic-text-primary);font-size: 20px;font-weight: 600;line-height: 30px;}.custom-nav {> div {gap: 32px;}ul {gap: 32px;a {font-size: 1rem;line-height: 1.5rem;color: var(--semantic-text-secondary);font-weight: 500;> svg {display: none;}}}}@media (min-width: 768px) {.home-product-card {height: 350px !important;}}.disable {opacity: 0.5;}.product-card, .slider-product-card {height: 450px;background-color: var(--primary-50);border: 1px solid var(--semantic-border-secondary);flex-grow: 0;flex-shrink: 0;flex-basis: calc(25% - 12px);cursor: pointer;.product-img {border-radius: 20px;overflow: hidden;img {width: 100%;height: auto;background-size: cover;}}.product-title {font-size: 20px;line-height: 30px;font-weight: 500;color: var(--semantic-text-primary);}.product-price {font-size: 20px;line-height: 36px;font-weight: 500;color: var(--primary-500);span {font-size: 20px;line-height: 30px;}}&:hover {background-color: var(--primary-100);border: 1px solid var(--semantic-border-primary);}&.disable {opacity: 0.5;}}footer {border-top: 1px solid var(--semantic-border-secondary);> div {padding-block: 32px;}.footer-container {gap: 40px;}.footer-logo {margin-bottom: 20px;}p {color: var(--semantic-text-tertiary);}.right {width: calc(800% / 12);> p {color: var(--semantic-text-secondary);text-align: justify;}> div {margin-top: 40px;border-top: 1px solid var(--neutral-200);}}.left {gap: 20px;}.social-media {}.links {a {color: var(--semantic-text-tertiary);}}.enamad {width: 110px;height: auto;}}@media (min-width: 1280px) {.container {max-width: 1200px;}}@media (max-width: 992px) {.product-card {flex-grow: 0;flex-shrink: 0;flex-basis: calc(50% - 8px);}}@media (max-width: 768px) {.container {padding-inline: 16px;}.container > section {padding-block: 24px;}.main-logo {img {height: 40px;width: auto;}}.custom-nav {padding: 40px !important;position: fixed;top: 0;right: -100%;width: 100%;height: 100%;background-color: var(--neutral-0);display: flex;flex-direction: column;gap: 40px;transition: var(--transition-time);z-index: 100;> div {gap: 166px;}ul {width: 100%;li {width: 100%;a {> svg {display: block;}}}}&.open {right: 0;}}.product-card {flex: 0 0 100%;display: grid !important;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);column-gap: 12px;padding: 8px !important;height: fit-content;}.product-img {grid-row: span 2 / span 2;height: 200px;}.prev-price {width: 100%;}footer {.footer-container {gap: 20px;}.footer-logo {img {height: 40px;}}.right {flex: 1 0 0;}.left {flex: 1 0 0;gap: 12px;> div {width: 100%;text-align: center;}ul {justify-self: center;}}}}.blog-details {p {text-align: justify;}}.blog-details-img {margin-bottom: 20px;height: 419px;}.blog-details-img-small {height: 268px;}@media (max-width: 768px) {.blog-details-img {height: 125px;}.blog-details-img-small {height: 77px;}}button.button {&:disabled {background-color: var(--primary-100);cursor: not-allowed;&:hover {background-color: var(--primary-100);}}}.modal {.modal-dialog {width: 358px;margin: auto;}.modal-content {border: 1px solid var(--semantic-border-primary);background-color: var(--semantic-surface-primary);border-radius: 24px;}}.banner-container {height: 441px;.button-link {display: inline-flex;margin-top: 16px;border-radius: 24px;padding: 4px 12px;&:hover {background-color: var(--primary-100);}}> div {flex: 1 0 0;* {color: var(--semantic-text-inverse);font-family: var(--font-secondary);}a {font-family: var(--font-primary);background-color: var(--primary-50);color: var(--semantic-text-secondary);}}.banner-big {padding-inline: 40px;background: #62cefe;background: linear-gradient( 146deg, rgba(98, 206, 254, 1) 0%, rgba(54, 75, 220, 1) 51%, rgba(73, 37, 173, 1) 95% );img {width: 280.52px;height: auto;}}.banner-small {> div {flex: 1 0 0;padding-inline: 16px;h3, p {margin-left: -20px;}a {margin-top: 12px;}&:first-child {background: #f05829;background: linear-gradient( 95deg, rgba(240, 88, 41, 1) 0%, rgba(249, 161, 73, 1) 100% );}&:last-child {background: #2b9383;background: linear-gradient( 292deg, rgba(43, 147, 131, 1) 7%, rgba(37, 137, 168, 1) 51%, rgba(58, 163, 192, 1) 100% );}}}}.features {gap: 32px;> div {gap: 12px;.feature-icon {width: 70px;height: 70px;background-color: var(--primary-100);}.feature-content {color: var(--neutral-400);}}}.special-products {background-color: var(--primary-200);padding: 36px;position: relative;.special-products-title {width: 155px;h2 {color: var(--primary-500);}.time {color: var(--secondary-500);div {height: 33px;}}}.products-slider::-webkit-scrollbar {display: none;}.products-slider {-ms-overflow-style: none;scrollbar-width: none;position: static;.swiper-wrapper {align-items: stretch;}}.swiper-slide {width: 276px;}.product-card {width: 276px;}}.banner-tall {padding: 40px 48px;border-radius: 20px;gap: 20px;font-family: var(--font-secondary);color: var(--semantic-text-inverse);background: #2b6193;background: linear-gradient( 285deg, rgba(43, 97, 147, 1) 7%, rgba(65, 37, 168, 1) 51%, rgba(103, 45, 164, 1) 100% );h4 {font-family: var(--font-secondary);font-size: 32px;line-height: 48px;margin-bottom: 12px;}p {font-size: 26px;line-height: 40px;margin-bottom: 20px;}img {width: 150px;height: auto;}}.why-us {h4 {color: var(--semantic-text-secondary);}.why-us-card {height: 60px;background-color: var(--primary-100);border-radius: 30px;padding: 8px;color: var(--primary-900);flex-grow: 0;flex-shrink: 0;flex-basis: calc(50% - 8px);}}.blog-card {width: 340px;height: 340px;gap: 12px;border: 1px solid var(--semantic-border-primary);background-color: var(--semantic-surface-primary);cursor: pointer;transition: var(--transition-time);h5 {color: var(--semantic-text-primary);}p {font-size: 14px;line-height: 26px;color: var(--gray-text-normal);height: 54px;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;}a {color: var(--primary-400);}.blog-img {height: 148px;img {width: 100%;height: 100%;object-fit: cover;object-position: center;}}&:hover {background-color: var(--semantic-surface-secondary);}}.title.faq-title {margin-bottom: -20px;height: 62px;position: relative;padding-right: 19px;.title-bg {position: absolute;right: 0;bottom: 0;}h2 {z-index: 10;}}.faq {padding: 20px;background-color: var(--primary-100);.faq-card {background-color: var(--semantic-surface-primary);padding: 20px;&:not(:last-child) {margin-bottom: 16px;}.accordion-button {background-color: var(--semantic-surface-primary);color: var(--semantic-text-primary);cursor: pointer;padding: 0;padding-bottom: 16px;&:focus {box-shadow: none;}&.collapsed {padding-bottom: 0;}&:not(.collapsed) {box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);}}.accordion-collapse {padding-top: 16px;color: var(--semantic-text-primary);}}}@media (max-width: 768px) {.banner-container {height: auto;flex-wrap: wrap;> div {flex: unset;width: 100%;}.banner-big {height: 440px;}.banner-small {height: auto;flex-direction: row !important;flex-wrap: wrap;> div {height: 212px !important;}}}.features {justify-self: center;}.special-products {padding: 24px 36px 24px 0;gap: 28px !important;.special-products-title {width: fit-content;padding-left: 36px;}.swiper-slide {width: 276px;height: 447px;.prev-price {width: fit-content;}}}.slider-icons {display: flex;justify-content: center;align-items: center;gap: 24px;margin-top: 28px;padding-left: 36px;.slider-icon {flex-shrink: 0;position: relative;transform: translateY(0);}.swiper-pagination {display: flex;gap: 8px;}.swiper-pagination-bullet {display: inline-block;width: 10px;height: 10px;border-radius: 10px;background-color: var(--primary-50);}.swiper-pagination-bullet-active {background-color: var(--primary-300);}}.blog-slider {.slider-icons {padding-left: 0;}}}.blog-page-card {height: 340px;cursor: pointer;transition: var(--transition-time);&:not(:last-child) {margin-bottom: 24px;}> div {flex-grow: 0;flex-shrink: 0;flex-basis: calc(50% + 30px);}.blog-img {height: 100%;border-radius: 16px;overflow: hidden;img {width: 100%;height: 100%;object-fit: cover;object-position: center;}}.blog-content {margin-right: -60px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);padding: 12px 28px;border-radius: 16px;height: 212px;z-index: 2;h5 {color: var(--semantic-text-primary);margin-bottom: 12px;}p {color: var(--gray-text-normal);text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 4;display: -webkit-box;-webkit-box-orient: vertical;text-align: justify;}a {margin-top: 12px;color: var(--primary-400);}}}.date {right: 12px;top: 12px;padding: 4px 12px;border-radius: 20px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);color: var(--semantic-text-secondary);}@media (max-width: 768px) {.blog-page-card {width: 100%;padding: 24px;gap: 12px !important;border: 1px solid var(--semantic-border-primary);border-radius: 16px;&:hover {background-color: var(--semantic-surface-secondary);}&:not(:last-child) {margin-bottom: 16px;}> div {width: 100%;}.blog-content {padding: 0;margin: 0;border: none;text-align: center;flex-basis: unset;height: auto;background-color: transparent;&:hover .blog-content {background-color: transparent;}p {height: 54px;-webkit-line-clamp: 2;}}.blog-img {height: 148px;flex-basis: unset;}}}.allproducts-content {> * {padding: 32px 0px;}aside {width: 235px;flex-shrink: 0;padding-right: 0;> div {margin-bottom: 20px;}ul {li {&:not(:last-child) {margin-bottom: 12px;}}}}main {padding-left: 0;.sort {ul {gap: 12px;li {cursor: pointer;&.active {color: var(--secondary-500);}}}}}}.allproducts {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 16px;}@media (max-width: 1200px) {.allproducts {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);gap: 16px;}}@media (max-width: 768px) {.allproducts-content {aside, #sort {width: 100%;padding: 28px 20px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-secondary);border-radius: 24px 24px 0 0;position: fixed;bottom: -100%;right: 0;z-index: 2;box-shadow: 0 4px 20px 1px rgb(129, 129, 129, 0.25);transition: var(--transition-time) linear;&.active {bottom: 0;}}.mobile-sort {gap: 20px !important;}}.allproducts {display: flex;flex-direction: column;}.sort {cursor: pointer;&.drawer {> div {width: 100%;}}.colse-btn {cursor: pointer;}}}.product-details {gap: 20px;.img {width: 300px;height: 280px;border-radius: 20px;overflow: hidden;img {width: 100%;height: 100%;object-fit: cover;object-position: center;}}.product-description {width: 100%;gap: 32px;.name {color: var(--semantic-text-primary);}.share {cursor: pointer;color: var(--semantic-text-secondary);flex-shrink: 0;}.point-comment {gap: 40px;color: var(--semantic-text-tertiary);}.product-features * {color: var(--semantic-text-primary);}.amount-price {gap: 28px;h5 {color: var(--semantic-text-secondary);}.region {gap: 12px;}select {width: 238px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);padding: 12px 16px;border-radius: 16px;}.price-container {gap: 12px;.price {color: var(--primary-500);}}}.clr-primary-700 .button {color: var(--primary-700);border-color: var(--primary-700);}}.add-basket {width: 362px;}}.modal {.modal-dialog {width: 358px;margin: auto;}.modal-content {border: 1px solid var(--semantic-border-primary);background-color: var(--semantic-surface-primary);border-radius: 24px;padding: 20px 8px;}.share {.modal-header {padding: 0;padding-bottom: 20px;color: var(--primary-500);}.modal-body {padding: 0;p {padding: 21px 0;color: var(--semantic-text-secondary);}}.product-link {margin-top: 21px;height: 56px;border-radius: 24px;border: 1px solid var(--semantic-border-secondary);button {padding: 8px 12px;flex-shrink: 0;}div {padding: 0 20px;word-wrap: break-word;color: var(--semantic-text-tertiary);max-width: 100%;display: inline-block;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;direction: ltr;}}}.comment-modal {padding: 20px;h5 {padding-bottom: 0;color: var(--secondary-500);text-align: center;margin: 0 auto;}.text-field {width: 100%;}}}.features-container {padding: 40px 52px;border-radius: 16px;background-color: var(--primary-50);.feature-item {width: 200px;height: 211px;border-radius: 12px;gap: 13px;background-color: var(--primary-600);.feature-icon-container {width: 100%;height: 150px;border-radius: 12px 12px 100px 100px;background-color: var(--primary-200);}}}.description {border-radius: 15px;background-color: var(--primary-50);padding: 32px 40px;gap: 24px;.desc-item:not(:last-child) {margin-bottom: 24px;}h3 {color: var(--semantic-text-primary);}p {color: var(--semantic-text-secondary);}}.comments {.title {.button {padding: 8px 12px;cursor: pointer;&:hover {color: var(--secondary-500);}}}.item {background-color: var(--primary-50);overflow: hidden;> div {padding: 20px 24px;&.support {background-color: var(--primary-200);}}&:not(:last-child) {margin-bottom: 12px;}}.name {color: var(--semantic-text-primary);}p {color: var(--semantic-text-secondary);}.comment-text {margin-top: 12px;}.show-more {color: var(--semantic-text-secondary);}}.similar-products {h5 {color: var(--semantic-text-primary);}> div {padding: 0 24px;}}@media (max-width: 768px) {.product-details {.img {width: 100%;}.add-basket {width: 100%;}}.features-container {padding: 40px 52px;gap: 24px;}.description {padding: 24px;}}.contact-banner {border-radius: 0 0 40px 40px;padding: 32px 40px 0 40px;overflow: hidden;background: #ffffff;background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(231, 241, 248, 1) 42%, rgba(147, 193, 222, 1) 100% );.content {gap: 28px;h2 {color: var(--primary-600);white-space: nowrap;}h4 {color: var(--primary-800);text-align: justify;}}.contact-banner-img {border-radius: 48px 48px 0 0;overflow: hidden;width: 375px;}}.contact-items {padding: 32px 108px;> .item {width: 173px;text-align: center;> * {color: var(--semantic-text-secondary);}}.line {width: 4px;height: 204px;background-color: var(--primary-100);}}@media (max-width: 768px) {.contact-banner {padding: 0 16px;gap: 20px;}.contact-items {gap: 32px;}}.ticket {width: 850px;max-width: 100%;margin-inline: auto;border-radius: 24px;padding: 24px;background-color: var(--primary-50);.ticket-title {padding: 20px;gap: 15px;border-radius: 24px;span {display: inline-block;height: 62px;width: 4px;background-color: var(--primary-500);border-radius: 20px;}h5 {color: var(--primary-600);}p {color: var(--semantic-text-secondary);}}}.modal-content {padding: 32px 24px;border-radius: 16px;.close {top: 12px;left: 12px;svg {path {stroke: var(--neutral-500);}}}}.verification-box {width: 100%;margin-inline: auto;border: 1px solid var(--primary-200);border-radius: 16px;min-height: 500px;padding: 32px 16px;}.login-box {width: 358px;margin-inline: auto;border: 1px solid var(--primary-200);border-radius: 16px;min-height: 450px;padding: 32px 16px;.text-field {width: 100%;}&.active {display: flex;}h4 {color: var(--primary-500);& ~ span {color: var(--primary-400);cursor: pointer;}}label.checkbox {span {color: var(--secondary-500);}&::before {content: "";display: inline-block;width: 16px;height: 16px;border-radius: 4px;border: 1px solid var(--semantic-border-secondary);background-color: var(--semantic-surface-secondary);}}input.checkbox:checked {& ~ label::before {background-color: var(--secondary-500);}}button.button {&:disabled {background-color: var(--primary-100);cursor: not-allowed;&:hover {background-color: var(--primary-100);}}}p.heading-h5 {color: var(--semantic-success-700);}}.user-profile {[type="email"], [type="number"], [type="tel"], [type="url"] {direction: rtl;}.sidebar {width: 226px;position: sticky;background-color: var(--semantic-surface-primary);z-index: 10;top: 24px;flex-shrink: 0;border-left: 2px solid var(--primary-200);height: calc(100vh - 30px);.user-img {width: 53px;height: 53px;background-color: var(--primary-50);padding: 10px;}.username {color: var(--primary-500);}.user-phone {color: var(--semantic-text-secondary);}.line {width: 100%;height: 2px;background-color: var(--semantic-border-secondary);}.tab-item {color: var(--semantic-text-tertiary);cursor: pointer;&.active {color: var(--primary-500);}}.logout {color: var(--semantic-error-100);padding: 1px 0;}}.content {padding-inline: 20px;.content-title {.content-icon {width: 94px;height: 76px;}h4 {color: var(--primary-500);}}.info {> p {color: var(--neutral-400);}}button.button {padding: 8px 12px;width: fit-content;align-self: flex-end;}}}.text-field-input {position: relative;span {cursor: pointer;position: absolute;left: 12px;top: 8px;}}.big-button {padding: 24px 12px;}.buttons {> button {flex: 1 0 0;}}.transactions-history {border: 1px solid var(--semantic-border-primary);padding: 20px;border-radius: 24px;h5 {color: var(--semantic-text-primary);padding-bottom: 12px;}ul {padding-top: 12px;gap: 12px;border-top: 1px solid var(--semantic-border-secondary);li {&.add {color: var(--semantic-success-700);}&.minus {color: var(--semantic-error-700);}&.payment {color: var(--semantic-text-secondary);}&.gift {color: var(--primary-500);}}}}.success-invite {border: 1px solid var(--semantic-border-primary);padding: 28px 12px;border-radius: 24px;* {color: var(--semantic-text-secondary);}}.referral-card {border: 1px solid var(--primary-300);background-color: var(--primary-50);gap: 60px;border-radius: 24px;p.marketing-m {color: var(--secondary-500);}.button {padding: 8px 12px;}a.button {background-color: var(--primary-100);}}.order-card {border-radius: 24px;background-color: var(--primary-50);.result {p {color: var(--semantic-success-700);}span {color: var(--semantic-text-tertiary);}}&:not(:last-child) {margin-bottom: 24px;}}.product-link {background-color: var(--primary-200);border: 1px solid var(--primary-200);border-radius: 24px;padding-left: 20px;color: var(--semantic-text-primary);svg {width: 36px;height: 36px;}}.shopping-card-item {background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-secondary);border-radius: 16px;padding: 12px;gap: 12px;.card-img {width: 128px;height: 116px;border-radius: 20px;overflow: hidden;flex-shrink: 0;}}.card-desc {gap: 12px;}.region {gap: 12px;}select {width: 238px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);padding: 12px 16px;border-radius: 16px;}.price {color: var(--primary-500);}.tab-content {transform: translateY(300px);opacity: 0;transition: var(--transition-time);display: none;&.active {display: flex;transform: translateY(0);opacity: 1;}}.modal {.decrease-modal {background-color: var(--secondary-50);form {gap: 20px;}}.increase-modal {background-color: var(--primary-50);form {gap: 20px;}}}.modal {.modal-body {padding: 24px;}form {display: none;&.active {display: block;}}}@media (max-width: 768px) {body {display: flex;flex-direction: column;min-height: 100vh;> div:nth-child(3) {flex: 1 1 auto;}}.user-profile {flex-direction: column;.sidebar {width: 100%;border: none;height: auto;top: 0;padding-block: 24px;}}.content {display: none;&.active {margin-top: 30px;padding-inline: 0px;}}.region {select {width: 142px;}}}.shopping-card {border: 1px solid var(--semantic-border-secondary);padding-block: 32px;border-radius: 16px;}.shopping-cards {width: 64%;flex-shrink: 0;}.shopping-card-item {border: 1px solid var(--semantic-border-secondary);border-radius: 16px;padding: 12px;gap: 12px;&:not(:last-child) {margin-bottom: 8px;}.card-img {width: 128px;height: 116px;border-radius: 20px;overflow: hidden;flex-shrink: 0;}}.card-desc {gap: 12px;}.region {gap: 12px;}select {width: 238px;background-color: var(--semantic-surface-primary);border: 1px solid var(--semantic-border-primary);padding: 12px 16px;border-radius: 16px;}.total-price {padding: 12px 16px;border-radius: 16px;border: 1px solid var(--semantic-border-secondary);width: 100%;position: sticky;top: 16px;.text-field {width: 326px;}.add-btn {left: 10px;top: 50%;transform: translateY(-50%);}}.counter-box {margin-top: 12px;}.counter {border: 2px solid var(--primary-100);border-radius: 24px;height: 30px;display: flex;width: fit-content;gap: 8px;> * {color: var(--semantic-text-secondary);padding: 0;display: flex;justify-content: center;align-items: center;}.line {width: 2px;height: 100%;display: inline-block;background-color: var(--primary-100);}}.delete-btn {cursor: pointer;color: var(--semantic-error-100);}@media (max-width: 768px) {.shopping-cards {width: 100%;}select {width: auto;}}.invoice {&.final {& .invoice-title {color: #00c94d;font-size: 1.3rem;font-weight: 600;}}}.invoice {&.final {& .invoice-number {font-size: 1.3rem;font-weight: 600;}}}.about-mygift {border-radius: 0 0 40px 40px;overflow: hidden;background: #ffffff;background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(231, 241, 248, 1) 42%, rgba(147, 193, 222, 1) 100% );.content {padding: 16px 40px;gap: 48px;h2 {color: var(--primary-600);white-space: nowrap;}h5 {color: var(--primary-800);text-align: justify;}}.about-img {width: 860px;max-width: 533px;margin-inline: auto;}}.options {gap: 40px;padding: 36px 80px;.option-card {gap: 12px;.option-img {width: 73px;height: 73px;padding: 18px;background-color: var(--primary-200);}h5 {margin-bottom: 7px;}}}.description {border-radius: 24px;background-color: var(--primary-50);padding: 20px;gap: 32px;.desc-item {ol {padding: 16px;}ul {padding: 16px;list-style-type: disc;li {color: var(--semantic-text-secondary);}}}.desc-item:not(:last-child) {margin-bottom: 32px;}h5 {margin-bottom: 7px;}}@media (max-width: 768px) {.about-mygift {.content {gap: 12px;}}.options {padding-block: 8px;}}.get-point {gap: 43px;border: 1px solid var(--primary-300);border-radius: 24px;padding: 28px;}.get-point-header {gap: 12px;h3 {color: var(--primary-800);}h5 {span {color: var(--secondary-500);}}}.get-point-cards {gap: 40px;.card {position: relative;width: 316px;height: 295px;border-radius: 32px;padding-inline: 22px;border: none;> div {gap: 12px;}> img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}h5 {color: var(--secondary-500);}p {margin-bottom: 20px;}.number {width: 34px;height: 34px;padding-top: 5px;display: flex;justify-content: center;align-items: center;color: var(--semantic-text-inverse);background-color: var(--secondary-400);border-radius: 30px;}}}.referral-card {border: 1px solid var(--primary-300);background-color: var(--primary-50);gap: 60px;border-radius: 24px;p.marketing-m {color: var(--secondary-500);}.button {padding: 8px 12px;}a.button {background-color: var(--primary-100);}}.checkout-account {width: 45%;flex-shrink: 0;}#order_summary .total-price {padding: 32px 16px;}#order_summary {& h4 {color: var(--primary-500);}}@media (max-width: 768px) {.checkout-account {width: 100%;}}.order-success, .payment {border-radius: 16px;border: 1px solid var(--semantic-success-500);margin-block: 24px;text-align: center;img {width: 110px;height: 110px;}p {width: 392px;max-width: 100%;text-align: center;margin-inline: auto;}&.failed {border-color: var(--semantic-error-100);}.button {font-size: 16px;line-height: 36px;}}.payment {&.failed {border-color: var(--semantic-error-100);}}@media (max-width: 768px) {.order-success {padding: 32px 24px;box-shadow: 0 4px 20px 1px rgb(129, 129, 129, 0.25);h5 {color: var(--semantic-success-700);font-weight: 600;font-size: 20px;line-height: 30px;}p {font-weight: 600;font-size: 20px;line-height: 30px;}&.failed {h5 {color: var(--semantic-error-500);}p {color: var(--semantic-text-tertiary);}}}}