/*
Template Name:
Template URL:
Author:
Author URI :
Version: 1.0
Description: Hotel HTML5 Responsive Template.
Tag: HTML5, CSS3, jQuery, Responsive Template.
*/

/* Table of Contents
==================================================
# Global
==================================================

/* ==========================================================================
Global
========================================================================== */
html,
body {
    margin: 0;
    line-height: normal;
    /* background: #ffffff; */
    /* background: #fafafa; */

    background-image: linear-gradient(#fafafa, #ffffff);

    color: var(--text-main);
    font-family: var(--regular);
}

#VPortal {
    margin: 0 auto;
    width: 1440px;
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: var(--primary-font);
}

img {
    max-width: 100%;
}

a {
    color: var(--text-main);
    text-decoration: none;
}

a:hover,
a:focus,
input:focus {
    text-decoration: none;
    outline: none;
    color: var(--foundation-primary-primary-6);
}

.global-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.title {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 1px solid #e1e1e1;
}

.title a {
    align-self: center;
}

.title.b-0 {
    border-bottom: 0;
}

.title h1,
.title h2 {
    font-size: 18px;
    font-weight: 500;
    align-self: center;
    margin-bottom: 0;
}

.social .title h1 {
    margin-bottom: 5px;
}

a:active,
a:focus,
button,
button:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus,
.form-control,
.form-control:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
    text-decoration: none;
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
    background-color: transparent;
}

.btn.btn-primary {}

.btn.btn-sm {}

.btn.btn-primary:hover {}

.btn span {}

.btn.btn-white {
    color: var(--primary-color);
    font-weight: 600;
    padding: 14px 35px;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid var(--primary-color);
}

.btn.btn-white:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.form-control {}

.form-control:focus {
    border-color: var(--primary-color);
}

textarea,
textarea.form-control {
    /* height: 190px; */
    resize: none;
}

section {
    overflow: hidden;
    padding: 30px 0 30px;
}

.sa-box {
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}

.description-tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    /* border-color: #5c5c5c #5c5c5c #0d6efd #5c5c5c; */
    border-color: #5c5c5c #5c5c5c none #5c5c5c;
}

.view-more {
    position: absolute;
    top: 50%;
    right: 20px;
    overflow: hidden;
    opacity: 0;
}

.sa-box:hover .view-more {
    opacity: 1;
}

.view-more:hover {
    right: 0;
}

.view-more a {
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 4px;
    background-color: var(--primary-color);
}

.products-section .sa-box {
    padding: 20px 20px 0;
    margin-bottom: 20px;
}

.bg-color {
    background-color: #f8f8f8;
}

.page-title {
    margin-bottom: 35px;
}

.page-title h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.page-title p {
    margin-bottom: 10px;
}

.page-title h2 {
    font-size: 16px;
    font-weight: 600;
}

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

.grid-2>li,
.grid-3>li,
.grid-4>li,
.grid-5>li,
.grid-6>li,
.grid-7>li,
.grid-8>li {
    padding-left: 10px;
    padding-right: 10px;
}

.grid-2>li {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.grid-3>li {
    -ms-flex: 0 0 33.33333333%;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
}

.grid-4>li {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.grid-5>li {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.grid-6>li {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.grid-7>li {
    -ms-flex: 0 0 14.2857143%;
    flex: 0 0 14.2857143%;
    max-width: 14.2857143%;
}

.grid-8>li {
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

select.select-hidden {
    background-color: transparent;
    border: 0;
    display: none;
}

select option {}

.select {
    position: relative;
    align-self: center;
}

.select-styled:after {
    position: absolute;
    content: "\f078";
    right: 5px;
    top: 50%;
    font-size: 12px;
    margin-top: -10px;
    display: inline-block;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

.select-styled {
    padding-right: 20px;
    position: relative;
    cursor: pointer;
    min-width: 115px;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
}

.select .select-options {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    z-index: 999;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.select .select-options li {
    color: #484848;
    display: block;
    margin-right: 0 !important;
    display: block;
    width: 100%;
    font-size: 12px;
    padding: 5px 15px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

.select .select-options li:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.accordion-body .tagcloud {
    margin-top: 0;
}

.flashinfo {
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* sg-header */

.sg-header {
    /* background-color: #fff; */
    position: relative;
}

/*.sidebar-active .sg-header.fixed-top .categorie-menu {
    display: block !important;
}*/

.sg-topbar {
    padding: 5px 0;
}

.sg-topbar .form-control {
    background-color: transparent;
    border: 0;
    padding: 0;
    height: initial;
    margin-bottom: 0;
}

.topbar-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sg-topbar .left-content {
    align-self: center;
}

.sg-topbar .dropdown button {
    border: 0;
    background-color: transparent;
}

.sg-topbar .dropdown-menu {
    min-width: 110px;
}

.sg-topbar .left-content li:last-child .dropdown-menu {
    min-width: initial;
}

.sg-topbar .dropdown-menu li {
    margin-right: 0;
}

.sg-topbar .dropdown-menu li img {
    margin-right: 8px;
}

.sg-topbar .dropdown-menu li a {
    display: block;
}

.sg-topbar ul li {
    margin-right: 20px;
    display: flex;
    font-size: 13px;
}

.sg-topbar ul li span {
    font-size: 18px;
    margin-right: 5px;
}

.sg-topbar ul li a {
    align-self: center;
}

.sg-topbar ul li:last-child {
    margin-right: 0;
}

.topbar-content .right-content ul,
.header-middle ul {
    /* display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; */

    flex-direction: row;
}

.header-middle {
    /* padding: 12px 0 12px 0; */
}

.header-middle .botom-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

.header-middle .sg-search {
    width: 50%;
}

.header-middle .form-control {}

.header-middle select.form-control {}

.header-middle form,
.header-middle .search-control {}

.header-middle form .select-styled {
    border: 0;
    padding: 0;
}

.header-middle form button.btn-close,
.header-middle .search-control button.btn-close {
    position: absolute;
    top: -1px;
    right: -1px;
    border: 0;
    height: 40px;
    color: #fff;
    width: 60px;
    font-size: 14px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--secondary-color);
}

.header-middle form button:hover,
.header-middle .search-control button:hover {
    /* background-color: var(--primary-color); */
}

.header-middle .sg-logo,
.header-middle .sg-search,
.header-middle .user-option {
    align-self: center;
}

.user-option ul li .mdi {
    font-size: 24px;
    display: inline-block;
    position: relative;
}

.user-option ul li .mdi.icon {
    display: none;
}

.user-option ul li {
    position: relative;
    margin-right: 35px;
    cursor: pointer;
    align-self: center;
    text-align: center;
}

.user-option .icon {
    position: relative;
    display: flex;
    max-width: 20px;
    align-self: center;
    font-size: 18px;
}

.user-option ul li:last-child {
    margin-right: 0;
}

.user-option ul li span {
    align-self: center;
    display: block;
}

.user-option ul li span.text-only {
    vertical-align: text-top;
    margin-left: 5px;
}

.user-option .badge {
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    font-weight: 300;
    font-size: 10px;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    padding: 0;
    text-align: center;
    line-height: 20px;
    background-color: var(--primary-color);
}

.user-option .text {
    text-align: left;
    display: flex;
}

.user-option .live-chat {
    display: flex;
    text-align-last: left;
}

.user-option .live-chat .icon {
    align-self: center;
    margin-right: 10px;
}

.user-option .live-chat .icon .mdi {
    font-size: 30px;
}

.user-option .live-chat p {
    margin-bottom: 0;
}

.user-option .sg-dropdown-menu {
    left: initial;
    right: 0;
    border-radius: 4px;
    min-width: 300px;
    background-color: #fff;
}

.user-option span.icon {
    display: none;
}

.user-option .sg-product {
    display: flex;
    margin-bottom: 0;
    box-shadow: none;
    border: 0;
    text-align: left;
}

.user-option .remove-icon {
    position: absolute !important;
    right: 0px;
    top: 15px;
    font-size: 14px !important;
}

.user-option .remove-icon:hover {
    color: var(--primary-color);
}

.user-option .product-thumb {
    max-width: 80px;
    margin-bottom: 0;
    margin-right: 0;
    height: initial;
    padding: 15px 0;
    background-color: transparent;
}

.user-option .sg-dropdown-menu>ul>li {
    margin-right: 0;
    width: 100%;
    margin: 0 15px;
    border-bottom: 1px solid #ddd;
}

.user-option .sg-dropdown-menu span.title {
    background-color: #f1f2f3;
    display: block;
    text-align: left;
    padding: 10px 15px;
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
    border-bottom: 0;
    font-weight: 500;
    border-radius: 4px 4px 0px 0px;
}

.user-option .sg-product .sg-rating ul li {
    margin-right: 0;
}

.user-option .sg-product .sg-rating ul li span {
    margin-left: 0;
    font-size: 14px;
}

.user-option .product-info {
    align-self: center;
}

.user-option .product-info h3 {
    font-size: 15px;
    border: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.user-option ul li span.price {}

.user-option ul li span.sochuong {
    font-size: 13px;
}

.user-option ul li span.price a {
    font-size: 14px;
    margin-left: 0;
    display: block;
    margin-top: 5px;
    margin-bottom: 0;
    color: var(--primary-color);
}

.user-option .sg-dropdown-menu>ul>li:last-child {
    padding-bottom: 20px;
    border-bottom: 0;
}

.user-option .sg-dropdown-menu .buttons {
    margin-top: 20px;
}

.sm-cart .btn.btn-primary {
    padding: 7px 20px;
}

/*sg-menu*/

.header-bottom .bottom-content {
    display: flex;
    border-radius: 4px;
    justify-content: space-between;
}

.right-content {
    /* display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    width: 100%;
    padding-right: 30px;
    justify-content: space-between; */

    padding-left: 60px;
}

.header-bottom.fixed-top {
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 10%);
}

.header-bottom.fixed-top .categorie-menu,
.sg-active .header-bottom.fixed-top .categorie-menu {
    display: none;
}

.sidebar-active .header-bottom.fixed-top .categorie-menu,
.sidebar-active.sg-active .header-bottom.fixed-top .categorie-menu {
    display: block;
}

.sg-menu {
    text-transform: capitalize;
    font-weight: bold;
}

.navbar {
    padding: 0;
    /* margin-left: 50px; */
}

.sg-menu .navbar li a {
    display: block;
    /* padding co giãn theo bề rộng màn hình */
    padding: 0 clamp(6px, 0.7vw, 16px);
    color: var(--secondary-color);
    position: relative;
    /* cỡ chữ co giãn vừa phải: nhỏ nhất 13px, lớn nhất 19px */
    font-size: clamp(13px, 1.05vw, 19px);
    font-weight: 500;
    line-height: 48px;
    white-space: nowrap; /* không để chữ xuống dòng (vd "Về Chúng Tôi", "Đăng Xuất") */
}

/* Căn giữa các mục theo chiều dọc + khoảng cách cho giỏ hàng (đặt sau Đăng nhập) */
.sg-menu .navbar-nav {
    align-items: center;
}

.sg-menu .navbar-nav .cart-item {
    margin-left: clamp(6px, 0.6vw, 14px);
}

.sg-menu span.icon {
    position: absolute;
    top: 12px;
    right: -1px;
    font-size: 20px;
    cursor: pointer;
}

.sg-categorie-menu {
    /* min-width: 275px; */
    min-width: 300px;
    position: relative;
}

.sg-categorie-menu .categorie-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    padding: 0;
    /* border: 1px solid #e1e1e1; */
    background-color: #fff;
    display: none;
    z-index: 999;
}

.sidebar-active .sg-categorie-menu .categorie-menu,
.sg-active .sg-categorie-menu .categorie-menu {
    display: block;
}

.sg-categorie-menu .top-content {
    padding: 13px 20px;
    display: flex;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #eee;
    font-weight: bold;
}

.sg-categorie-menu span {
    align-self: center;
    display: inline-block;
}

.sg-categorie-menu span.icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    z-index: 99;
    text-align: center;
    color: #707070;
    transform: rotate(-90deg);
}

.sg-categorie-menu .sg-dropdown-menu {
    background-color: #fff;
    left: 100%;
    top: 0;
    padding: 30px;
    min-width: 910px;
}

.sg-categorie-menu .sg-dropdown-menu h3 {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 1px solid #e1e1e1;
}

.sg-categorie-menu .sg-dropdown-menu li a {
    padding: 8px 0;
    font-size: 14px;
}

.sg-categorie-menu .sg-dropdown-menu li a:hover {
    background-color: transparent;
}

.sg-categorie-menu button {
    border: 0;
    margin-left: 30px;
    align-self: center;
    background-color: transparent;
}

.sg-categorie-menu .sg-product {
    padding: 20px;
    text-align: center;
    margin-top: -30px;
    margin-bottom: 0;
    border-radius: 0;
    margin-right: -30px;
    margin-bottom: -30px;
    background-color: var(--secondary-color);
}

.sg-categorie-menu .sg-product .product-info {
    padding: 0;
    font-weight: 600;
    color: #fff;
}

.sg-categorie-menu .sg-product .product-info p {
    margin-bottom: 5px;
}

.sg-categorie-menu .sg-product .product-info h4 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sg-categorie-menu .sg-product a.btn {
    display: inline-block;
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

.sg-categorie-menu .sg-product a.btn:hover {
    color: var(--secondary-color);
    background-color: #fff;
}

.sg-categorie-menu .sg-product .product-thumb {
    padding: 40px 0;
    height: initial;
    background-color: transparent;
}

span.toggle-bar {
    display: block;
    height: 2px;
    width: 20px;
    margin-bottom: 5px;
    background-color: var(--secondary-color);
    border-radius: 5px;
}

.toggle-bar.bar2 {
    width: 15px;
}

.toggle-bar.bar3 {
    width: 10px;
}

.header-bottom {
    border-top: 1px solid #eee;
    background-color: #fff;
}

.header-bottom .offer {
    font-weight: 500;
    color: var(--secondary-color);
    align-self: center;
}

.categorie-menu a {
    display: block;
    padding: 10.5px 10px 10.5px 10px;
    font-size: 14px;
}

.sg-categorie-menu a img {
    margin-right: 10px;
}

.categorie-menu ul li a:hover {
    background-color: #f1f2f3;
}

.btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 9;
}

.popup-modal .btn.btn-primary {
    width: 100%;
    padding: 10px;
}

.modal {
    z-index: 99999999;
}

.modal-body .form-control {}

.modal-body .social ul {
    justify-content: center;
}

.modal-body h2 {
    font-size: 20px;
    color: #333;
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

.modal-body p {
    text-align: center;
}

.modal-body {
    padding: 30px;
}

.modal-body h2 span {
    color: var(--primary-color);
}

.modal-body form {}

.modal-body .tnc {
    text-align: center;
}

/*Dropdown CSS*/

.sg-dropdown {
    position: relative;
}

.sg-dropdown-menu {
    position: absolute;
    top: 100%;
    /* min-width: 170px; */
    /* width: 125%; */
    left: 0;
    border-radius: 0;
    list-style: none;
    opacity: 0;
    z-index: -999;
    padding: 0;
    visibility: hidden;
    -webkit-transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -ms-transform: rotateX(-75deg);
    -o-transform: rotateX(-75deg);
    transform: rotateX(-75deg);
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.sg-dropdown-menu li {
    float: left;
    min-width: 220px;
}

.sg-dropdown-menu li:hover {
    background: #FEE8C8;
}

.sg-dropdown-menu li:hover a {
    color: var(--text-main) !important;
}

.sg-dropdown-menu .sg-dropdown-menu {
    left: 100%;
    top: 15px;
}

.sg-dropdown:hover>.sg-dropdown-menu {
    visibility: visible;
    opacity: 1;
    z-index: 99999;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.navbar-nav .sg-dropdown-menu li a {
    padding: 10px 20px;
    /* background-color: #fff; */
    /*border-top: 1px solid #D9D9D9;*/
}

.sg-menu .navbar li a:hover,
.sg-menu .navbar li.active>a,
.sg-menu .navbar li>a.active,
.sg-menu .navbar li.active>span.icon,
.navbar-nav .sg-dropdown-menu li a:hover,
.navbar-nav .sg-dropdown-menu li.active a,
.navbar-nav .sg-dropdown-menu li a.active {
    /* color: var(--primary-color); */
    color: var(--foundation-primary-primary-6);
}

.sg-menu .navbar li>a.active {}

.sg-dropdown i.icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    text-align: center;
    cursor: pointer;
    display: none;
}

.navbar-toggler-icon {
    width: initial;
    height: initial;
    line-height: 0;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    padding: 6px 8px;
}

.navbar-toggler-icon:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.sg-menu .sg-logo {
    display: none;
}

/*hero-content*/

.hero-section {
    padding: 18px;
    background-size: cover;
    background-color: #343a40;
}

.hero-section .hero-content {
    display: flex;
}

.hero-section .carousel-item {
    padding: 0;
    background-color: #343a40;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.hero-section .item-content {
    margin-left: 320px;
}

.hero-section .item-content .col-thumb {
    height: 427px;
}

.hero-section .item-content .col-thumb img {
    height: 100%;
}

.sg-adds-content {
    min-width: 285px;
}

#hero-slider {
    width: 100%;
}

#hero-slider h1 {
    color: #666;
    font-size: 32px;
    margin-bottom: 15px;
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}

#hero-slider h1 span {
    color: var(--primary-color);
}

#hero-slider h2 {
    font-size: 24px;
    margin-bottom: 10px;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

#hero-slider h2 a {
    color: white;
}

#hero-slider h2 a:hover {
    color: var(--primary-color);
}

#hero-slider h3 {
    font-size: 16px;
    font-weight: normal;
    animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
    line-height: 24px;
}

#hero-slider .thumb {
    display: block;
    animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
    width: 100%;
    height: 100%;
}

.hero-text ul li {
    margin-bottom: 10px;
}

.hero-text .btn.btn-primary {
    margin-top: 15px;
    color: var(--primary-color);
    background-color: transparent;
    animation-delay: 0.55s;
    -webkit-animation-delay: 0.55s;
}

.hero-text .btn.btn-primary:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.hero-text .btn.btn-primary span {
    margin-right: 0;
    margin-left: 5px;
}

.carousel-indicators {
    bottom: 20px;
    margin-right: unset;
    margin-left: 15.5%;
}

.carousel-indicators li {
    opacity: 1 !important;
    border-radius: 12px;
}

.carousel-indicators [data-bs-target] {
    width: 50px;
    border-radius: 0;
    border: 0;
}

.carousel-indicators .active,
.carousel-indicators li:hover {
    background-color: var(--primary-color);
}

.sg-add {
    display: flex;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 30px;
    background-color: #e6f1ff;
}

.sg-add .thumb {
    margin-left: 15px;
    margin-bottom: -15px;
    text-align: center;
    align-self: end;
}

.sg-add .content {
    text-align: center;
    align-self: center;
    min-width: 100px;
}

.sg-add .content h2 {
    font-size: 34px;
    margin-top: 40px;
    margin-bottom: 0;
}

.sg-add .content span {
    display: block;
    margin-bottom: 0;
    border-bottom: 0;
}

.sg-add .btn {
    font-size: 14px;
    margin-top: 10px;
    color: var(--primary-color);
    display: inline-block;
    border: 1px solid var(--primary-color);
}

.sg-add .btn:hover {
    color: #fff;
    background-color: var(--primary-color);
}

/*sg-breadcrumb */

.sg-breadcrumb .breadcrumb {
    padding: 20px 0;
    margin-bottom: 0;
}

.sg-breadcrumb .breadcrumb li {
    font-size: 18px;
    font-weight: 600;
    padding-right: 10px;
}

.sg-breadcrumb .breadcrumb li:last-child {
    margin-right: 0;
}

.sg-breadcrumb .breadcrumb li a {
    font-weight: normal;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
    /* margin-right: 10px; */
}

/*brand-section*/

.brand-slider {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.brand-slider .slick-arrow {
    position: absolute;
    top: 50%;
    color: #707070;
    cursor: pointer;
    z-index: 99999;
    font-size: 20px;
    margin-top: -18px;
    font-size: 24px;
}

.brand-slider .slick-arrow.mdi-chevron-left {
    left: 20px;
}

.brand-slider .slick-arrow.mdi-chevron-right {
    right: 20px;
}

/*products-section*/

.product-slider {
    margin-left: -8px;
    margin-right: -8px;
}

.product-slider .slick-arrow,
.product-slider-1 .slick-arrow,
.arrow-style-1 .slick-arrow {
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 999;
    font-size: 14px;
    cursor: pointer;
}

.slick-arrow:hover {
    color: var(--primary-color);
}

.arrow-none .slick-arrow {
    display: none !important;
}

.product-slider .slick-arrow.arrow-right,
.product-slider-1 .slick-arrow.arrow-right {
    right: 7px;
}

.product-slider .slick-arrow.arrow-left,
.product-slider-1 .slick-arrow.arrow-left {
    right: 20px;
}

.product-slider .slick-slide,
.product-slider-2 .slick-slide {
    padding-left: 8px;
    padding-right: 8px;
}

.sg-product {
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #f4f4f4;
    position: relative;
}

.sg-product:hover .product-thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.05);
}

.add-banner {
    display: block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.add-banner img {
    width: 100%;
}

.add-banner:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.05);
}

.add-banner .text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.add-banner .text h2,
.add-banner .text h3 {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.add-banner .text h2 {
    font-size: 30px;
}

.add-banner .text h3 {
    font-size: 36px;
}

.add-banner .text span {
    color: var(--primary-color);
}

.sg-product .icons {
    position: absolute;
    top: 15px;
    right: 0;
    font-size: 20px;
    opacity: 0;
}

.sg-product:hover .icons {
    opacity: 1;
    right: 15px;
}

.sg-product .product-info {
    padding: 5px 6px;
    min-height: 60px;
    text-align: center;
}

.global-list .product-info {
    text-align: left;
}

.sg-product .icons li {
    margin-bottom: 5px;
}

.sg-product .icons li a {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    border-radius: 100%;
    text-align: center;
    background-color: #fff;
}

.sg-product .icons li a:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.radio-group .form-group {
    display: flex;
}

.radio-group .form-group input {
    align-self: start;
    margin-top: 7px;
    margin-right: 10px;
}

.sg-rating {
    font-size: 13px;
    color: #999;
}

.sg-rating a {
    color: var(--primary-color);
    padding-top: 5px;
}

.sg-rating ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}

.sg-rating ul li {
    color: #c1c1c1;
    font-size: 10px;
}

.sg-rating ul li.active {
    color: #ffcc00;
}

.sg-rating ul li:last-child {
    margin-right: 0;
}

.product-info h3,
.product-info h3 a {
    color: var(--secondary-color);
}

.product-info h3 {
    /* font-size: 15px; */
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 20px;
}

.sg-product a:hover {
    color: var(--primary-color);
}

.price {
    font-weight: 500;
    font-size: 13px;
    display: block;
    margin-bottom: 5px;
}

.price del {
    color: #999999;
    font-size: 14px;
    font-weight: 500;
}

.size-detail {
    margin-top: -10px;
}

.price h4 {
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 15px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
}

.product-footer .price {
    align-self: center;
}

.product-footer .btn {
    color: var(--primary-color);
    padding: 0;
    font-weight: 500;
    opacity: 0;
}

.sg-product:hover .product-footer .btn {
    opacity: 1;
}

.product-footer .btn span {
    margin-right: 5px;
    font-size: 20px;
}

.product-thumb {
    /* padding: 10px; */
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 280px;
    display: flex;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
}

.author-thumb {
    height: 200px;
}

.product-thumb a {
    height: 100%;
}

.product-thumb a img {
    height: 100%;
    width: auto;
}

.title-style-1,
.sg-countdown ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.title-style-1 h1 {
    margin-right: 40px;
    align-self: center;
    position: relative;
    margin-bottom: 14px;
}

.sg-countdown {
    margin-bottom: 10px;
    display: flex;
}

.sg-product .sg-countdown {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: 0;
    width: 100%;
    max-width: 270px;
    opacity: 0;
    transform: translateX(-50%);
}

.sg-product:hover .sg-countdown {
    opacity: 1;
}

.sg-product .countdown {
    margin: 0;
    padding: 10px 0;
    width: 100%;
    justify-content: space-between;
    background-color: var(--primary-color);
}

.sg-product .sg-countdown ul li:after {
    color: #fff;
    right: -10px;
    top: 8px;
}

.sg-product .sg-countdown ul li {
    margin-right: 0;
    border-radius: 0;
    padding: 0;
    line-height: 16px;
    background-color: transparent;
    width: 100%;
    text-align: center;
}

.sg-product .sg-countdown ul li a {
    color: white;
}

.sg-product .sg-countdown ul li p {
    margin-bottom: 0;
}

.sg-countdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    margin-bottom: 20px;
}

.sg-countdown ul li {
    color: #fff;
    line-height: 18px;
    padding: 8px 25px;
    position: relative;
    background-color: var(--secondary-color);
    text-align: center;
}

.sg-countdown ul li p {
    margin-bottom: 0;
}

.sg-countdown ul li:after {
    position: absolute;
    content: ":";
    right: -15px;
    top: 5px;
    color: var(--secondary-color);
}

.sg-countdown ul li:last-child:after {
    display: none;
}

.sg-countdown ul li:last-child {
    margin-right: 0;
}

ul.products {
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

.product-header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}

.product-header .nav-tabs {
    margin-bottom: 0;
    border-bottom: 0;
    justify-content: end;
}

.product-header .nav-tabs img {
    display: block;
}

.product-header .nav-tabs li {
    margin-left: 15px;
    margin-bottom: 15px;
    width: 130px;
}

.product-header .nav-tabs li:last-child {
    margin-right: 0;
}

.product-header .nav-tabs li a {
    background-color: #fff;
    border: 1px solid #fff;
    text-align: center;
    padding: 15px;
}

.product-header .nav-tabs .nav-link:focus,
.product-header .nav-tabs .nav-link:hover,
.product-header .nav-tabs .nav-item.show .nav-link,
.product-header .nav-tabs .nav-link.active {
    border-color: var(--primary-color);
}

.product-header .title {
    max-width: 470px;
    border-bottom: 0;
    align-self: center;
    margin-bottom: 0;
}

.sg-category-content.list-view-tab .sg-product {
    display: flex;
    margin-bottom: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
}

.sg-category-content.list-view-tab .product-thumb {
    width: 285px;
    min-width: 285px;
    margin-bottom: 0;
}

.sg-category-content.list-view-tab .grid-4>li {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.sg-category-content.list-view-tab .sg-product .icons {
    position: static;
    opacity: 1;
    margin-top: 30px;
}

.sg-category-content.list-view-tab .sg-product .icons ul {
    display: flex;
}

.sg-category-content.list-view-tab .sg-product .icons ul li {
    margin-bottom: 0;
    margin-right: 15px;
}

.sg-category-content.list-view-tab .sg-product .icons ul li:last-child {
    margin-right: 0;
}

.sg-category-content .sg-countdown {
    min-width: 300px;
    margin-bottom: 0;
    margin-right: 20px;
}

.sg-category-content .sg-countdown .countdown {
    margin-bottom: 0;
}

.sg-category-content .sg-countdown ul li {
    margin-right: 5px;
    padding: 8px 20px;
    border-radius: 4px;
}

.sg-category-content .sg-countdown ul li:last-child {
    margin-right: 0;
}

.sg-product.style-1 {
    margin-bottom: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
}

.sg-product.style-1 .product-thumb {
    margin-bottom: 0;
}

.sg-product.style-1 .product-info {
    text-align: center;
    align-self: center;
}

.sg-product.style-1 .sg-rating {
    justify-content: flex-start;
}

.sg-product.style-1 .icons {
    position: static;
    opacity: 1;
    margin-top: 20px;
}

.sg-product.style-1 .icons ul {
    display: flex;
}

.sg-product.style-1 .icons ul .btn.btn-primary {
    width: initial;
    height: initial;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    font-weight: normal;
    padding: 6px 15px;
    line-height: 16px;
    border: 1px solid;
    background-color: var(--primary-color);
}

.sg-product.style-1 .icons ul .btn.btn-primary:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.sg-product.style-1 .icons ul li {
    margin-bottom: 0;
    margin-right: 10px;
    align-self: center;
}

.sg-product.style-1 .icons ul li:last-child {
    margin-right: 0;
}

.sg-product.style-1 .icons ul .btn.btn-primary span {
    font-size: 20px;
}

.sg-product.best-sale {
    padding: 30px;
    background-color: #f7f8fa;
}

.sg-product.best-sale .product-thumb {
    max-height: initial;
    max-width: initial;
}

.sg-product.best-sale .button {
    text-align: center;
    padding-top: 30px;
    margin-top: 5px;
    border-top: 1px solid #e1e1e1;
}

.sg-product.best-sale .button .btn.btn-primary {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background-image: none;
    background-color: transparent;
}

.nav-tabs.style-1 {
    border-bottom: 0;
    align-self: center;
    margin-bottom: 10px;
}

.nav-tabs.style-1 li a {
    border: 0;
    background-color: transparent;
}

.nav-tabs.style-1 li a:hover,
.nav-tabs.style-1 li a.active {
    color: var(--primary-color);
    background-color: transparent;
}

/*product-details*/

.product-details .details-slider {
    text-align: center;
}

.product-details .youtube_player_wrapper {
    height: 400px;
}

.product-details .player-buttons button {
    padding: 7px 10px;
    text-transform: unset;
}

.products-details-info h1 {
    font-size: 20px;
    font-weight: 500;
}

.products-details-info ul.list-group {
    max-height: 510px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.products-details-info ul.list-group li {
    padding: 0;
}

.products-details-info ul.list-group li a {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    padding: 8px 10px;
    display: block;
}

.products-details-info ul.list-group li.active a {
    color: white;
}

.products-details-info .sg-rating {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.products-details-info .sg-rating h3 {
    font-size: 14px;
}

.products-details-info .sg-rating span {
    color: #fc0;
    margin-right: 5px;
}

.products-details-info .sg-rating ul {
    /* margin-left: 30px; */
}

.products-details-info .sg-rating ul li {
    font-size: 14px;
    margin-right: 15px;
    color: var(--secondary-color);
}

.products-details-info .sg-rating ul li a:hover {
    color: var(--primary-color);
}

.products-details-info .sg-rating ul li span {
    color: var(--secondary-color);
    font-size: 16px;
}

.products-details-info .sg-rating ul li span:hover {
    color: var(--primary-color);
}

.products-details-info .best-seller {
    margin-bottom: 25px;
}

.products-details-info .best-seller .badges {
    color: #fff;
    display: inline-block;
    margin-right: 20px;
    padding: 5px 15px;
    position: relative;
    background-color: var(--secondary-color);
}

.stock-delivery {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.stock,
.delivery {
    display: flex;
    background-color: rgb(255 204 0 / 3%);
    width: 325px;
    height: 90px;
    padding: 18px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    color: var(--secondary-color);
}

.delivery {
    background-color: rgb(51 51 51 / 2%);
}

.stock .icon,
.delivery .icon {
    margin-right: 10px;
    font-size: 20px;
    margin-top: -5px;
}

.stock .text h5,
.delivery .text h5 {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.product-hot-deals {
    padding: 25px;
    -webkit-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -o-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
}

#thumb-slider {
    display: flex;
}

#thumb-slider .carousel-indicators {
    position: static;
    margin-right: 0;
    margin-left: 0;
    display: block;
    width: 28%;
}

#thumb-slider .carousel-inner {
    width: 72%;
}

#thumb-slider .carousel-indicators li {
    width: 50px;
    height: 50px;
    overflow: hidden;
    opacity: 1;
    margin-bottom: 30px;
    padding: 0;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #f3f3f3;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -ms-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -o-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
}

#thumb-slider .carousel-item .thumb {
    border: 1px solid #f3f3f3;
    background-color: #fff;
    text-align: center;
    padding: 20px;
    -webkit-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -ms-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -o-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
}

#thumb-slider .carousel-item .thumb img {
    display: inline-block;
}

.product-hot-deals .products-details-info {
    padding-left: 0;
}

.product-hot-deals .products-details-info h3 {
    font-size: 24px;
}

.best-seller .badges:before {
    content: "";
    border: 5px solid var(--secondary-color);
    border-color: transparent transparent var(--secondary-color) var(--secondary-color);
    border-width: 9px 5px;
    position: absolute;
    right: -10px;
    bottom: 0;
}

.best-seller .badges:after {
    content: "";
    border: 5px solid var(--secondary-color);
    border-color: var(--secondary-color) transparent transparent var(--secondary-color);
    border-width: 9px 5px;
    position: absolute;
    right: -10px;
    bottom: inherit;
    top: 0;
}

.products-details-info .best-seller strong {
    font-weight: normal;
    color: var(--secondary-color);
}

.brand strong {
    text-transform: uppercase;
}

.brand-social ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.brand-social {
    font-size: 16px;
}

.featured-content.style-1 .brand-social .social ul li {
    margin-right: 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.brand-social ul li:last-child {
    margin-right: 0;
}

.brand-social ul li a {
    color: #a1aab5;
    font-size: 22px;
    line-height: 22px;
}

.brand-social ul li a:hover {
    color: var(--primary-color);
}

.products-details-info .price p {
    color: var(--secondary-color);
    font-size: 14px;
}

.products-details-info h6 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 18px;
}

.products-details-info section {
    margin: 0;
    padding: 0 10px 0 0;
    font-size: 21px;
    line-height: 1.5;
    text-align: justify;
}

.products-details-info #noi_dung_chuong p.collapse:not(.show) {
    height: 210px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.products-details-info #noi_dung_chuong p.collapsing {
    min-height: 218px !important;
}

.products-details-info #noi_dung_chuong a.collapsed:after {
    /* content: "+ Đọc toàn bộ nội dung"; */
}

.products-details-info #noi_dung_chuong a:not(.collapsed):after {
    /* content: "- Ẩn toàn bộ nội dung"; */
}

.products-details-info .offer {
    margin-bottom: 30px;
    max-width: 440px;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.products-details-info .offer ul li {
    font-weight: 600;
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
}

.products-details-info .offer ul li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "\f061";
    color: var(--secondary-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

.products-details-info .offer ul li:last-child {
    margin-bottom: 0;
}

.products-details-info .offer ul li span {
    display: block;
    font-weight: normal;
    font-size: 14px;
}

.sg-size,
.sg-color {
    margin-bottom: 30px;
    display: flex;
}

.sg-size input[type="radio"],
.sg-color input[type="radio"] {
    display: none;
}

.sg-size input[type="radio"]+label {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-right: 16px;
    padding: 10px 15px;
    border: 1px solid #eeeeee;
}

.sg-size input[type="radio"]:checked+label {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.sg-color span,
.sg-size span,
.sg-quantity span {
    margin-bottom: 10px;
    display: block;
    font-size: 18px;
    font-weight: 500;
    align-self: center;
    margin-right: 15px;
    color: var(--secondary-color);
}

.sg-color input[type="radio"]+label {
    cursor: pointer;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 16px;
    border: 1px solid #eeeeee;
    padding: 10px;
}

.sg-color input[type="radio"]#color2+label:before {
    background-color: var(--primary-color);
}

.sg-color input[type="radio"]#color3+label:before {
    background-color: var(--primary-color);
}

.sg-color input[type="radio"]:checked+label {
    border-color: var(--primary-color);
}

.sg-color input[type="radio"]#color2:checked+label {
    border-color: var(--primary-color);
}

.sg-color input[type="radio"]#color3:checked+label {
    border-color: var(--primary-color);
}

.sg-quantity {
    margin-bottom: 30px;
    display: flex;
}

.sg-quantity .quantity .btn span {
    margin-bottom: 0;
}

.products-details-info .sg-quantity .quantity .btn {
    width: 30px;
    text-align: center;
}

.products-details-info .sg-quantity .quantity .btn span {
    margin-right: 0;
}

.sg-quantity .quantity {
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    border: 1px solid #eeeeee;
}

.sg-quantity .quantity input {
    width: 70px;
    text-align: center;
    border: 0;
    height: 40px;
    font-size: 16px;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}

.sg-quantity .quantity .btn {
    padding: 0;
    color: var(--secondary-color);
}

.sg-table .quantity .btn:hover {
    color: var(--primary-color);
}

.sg-table .quantity .btn span {
    margin-right: 0;
    font-size: 24px;
}

.sg-quantity .quantity input:focus {
    border-color: var(--primary-color);
}

.sg-quantity .quantity .btn:hover {
    color: var(--primary-color);
}

.products-details-info .buttons .btn {
    text-transform: uppercase;
}

.products-details-info .buttons .btn.btn-white {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.products-details-info .buttons .btn.btn-white:hover {
    color: #fff;
    opacity: 0.8;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.products-details-info .buttons .btn.btn-primary {
    margin-right: 15px;
}

.products-details-info .buttons .btn.btn-primary {
    padding: 14px 35px;
}

.products-description {
    margin-top: 50px;
}

.products-description h2 {
    font-size: 18px;
    font-weight: 500;
}

.products-description .nav-tabs {
    border-bottom: 0 !important;
    margin-bottom: 0;
    border: 1px solid #e1e1e1;
}

.products-description .tab-content {
    padding: 30px;
    border-radius: 0;
    border: 1px solid #e1e1e1;
}

.products-description .nav-tabs .nav-link {
    border: 0;
    font-size: 15px;
    font-weight: 500;
    margin-right: 1px;
    padding: 20px;
    border-bottom: 1px transparent;
    background-color: transparent;
    text-transform: uppercase;
    color: var(--secondary-color);
    border-bottom: 2px solid transparent;
}

.products-description .nav-tabs .nav-item.show .nav-link,
.products-description .nav-tabs .nav-link.active,
.products-description .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.products-description #details ul li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.products-description #details ul li:last-child {
    margin-bottom: 0;
}

.products-description #details ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: var(--secondary-color);
}

.products-description #informations h2 {
    margin-bottom: 20px;
}

.products-description #informations ul li {
    margin-bottom: 15px;
}

.sg-reviews .review {
    display: flex;
}

.sg-reviews .review-author {
    min-width: 190px;
    margin-right: 30px;
}

.sg-reviews .review-author a {
    font-weight: 700;
}

.sg-reviews .review-info {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e1e1e1;
}

.sg-reviews .review-info h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.review-action {
    font-size: 28px;
}

.review-action a {
    color: #707070;
}

.review-action a:hover {
    color: var(--primary-color);
}

.sg-reviews h2 {
    margin-bottom: 30px;
}

.sg-reviews .sg-rating {
    justify-content: flex-start;
    margin-bottom: 0;
}

.sg-reviews .comment-list li {
    margin-top: 3px;
}

.sg-reviews .commenter-avatar {
    width: 60px;
    height: 60px;
}

.customer-reviews {
    margin-bottom: 50px;
    margin-top: 30px;
    max-width: 650px;
}

.customer-reviews .left-content {
    margin-right: 50px;
}

.customer-reviews .right-content {
    min-width: 260px;
}

.customer-reviews .sg-progress {
    display: flex;
    color: #999999;
    margin-bottom: 15px;
    position: relative;
}

.customer-reviews .sg-progress strong {
    font-weight: normal;
    color: var(--secondary-color);
    position: absolute;
    left: 65px;
    color: #fff;
    font-size: 12px;
    top: 2px;
}

.customer-reviews .sg-progress .progress {
    min-width: 300px;
    margin-right: 20px;
    height: 20px;
    border-radius: 0;
    align-self: center;
    background-color: #f4f4f4;
    position: relative;
}

.sg-progress span {
    width: 55px;
}

.customer-reviews .progress-bar {
    background-color: var(--primary-color);
}

.products-description .customer-reviews h2 {
    font-size: 30px;
    margin-right: 30px;
    font-weight: normal;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100%;
    border: 1px solid var(--primary-color);
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.products-description .customer-reviews h3 {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #666666;
    margin-right: 30px;
}

.customer-reviews .sg-rating {
    align-self: center;
}

.customer-reviews .sg-rating span.rv {
    font-size: 18px;
    color: #b7b7b7;
}

.customer-reviews .sg-rating ul li {
    font-size: 24px;
}

.customers-recommend {
    color: #707070;
    max-width: 245px;
}

.customers-recommend h3 {
    font-size: 30px;
    font-weight: 300;
    color: #707070;
    margin-right: 20px;
}

.review-form {
    max-width: 750px;
}

.review-form .sg-rating {
    justify-content: flex-start;
}

.review-form .sg-rating ul {
    justify-content: flex-start;
}

.review-form .sg-rating ul li {
    font-size: 12px;
}

.review-form .rating {
    margin-right: 40px;
}

.review-form .rating h3 {
    font-size: 14px;
    color: var(--secondary-color);
    font-weight: normal;
}

.review-form h2 {
    font-size: 18px;
}

.review-form h2,
.review-form .sg-rating {
    margin-bottom: 20px;
}

.review-form textarea.form-control {
    height: 150px;
    resize: none;
}

.sg-reviews .comment_info {
    border-bottom: 0;
}

.review-thumb {
    margin-bottom: 10px;
}

.review-thumb ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.review-thumb ul li {
    margin-right: 10px;
}

.review-thumb ul li:last-child {
    margin-right: 0;
}

/*featured-section*/

.featured-content {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
}

.featured-product {
    display: flex;
    padding: 40px;
    width: 50%;
    margin-left: 8px;
    margin-right: 8px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
}

.featured-product.fluid {
    width: 100%;
    background-color: transparent;
    box-shadow: none;
}

.featured-product.fluid .product-info {
    text-align: center;
    padding: 0 20px;
}

.featured-content {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.featured-product.fluid .product-thumb {
    max-height: 100%;
}

.featured-product.sg-center {
    width: 30%;
}

.featured-product .product-info {
    max-width: 70%;
    align-self: center;
}

.featured-product .product-info h2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.featured-product .product-info h3 {
    font-size: 24px;
    border-bottom: 0;
    margin-bottom: 0;
}

.featured-product .product-thumb {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
    max-width: 100%;
    max-height: 230px;
    align-self: center;
}

.featured-product .btn.btn-primary {
    margin-top: 20px;
}

.featured-content.style-1 .featured-product {
    width: 25%;
    text-align: left;
    border-radius: 4px;
    background-color: #eaeaea;
}

.featured-content.style-1 .featured-product.sg-center {
    width: 50%;
}

.featured-content.style-1 .product-info {
    text-align: left;
}

.featured-content.style-1 .product-thumb {
    max-height: initial;
}

/*sg-category-content*/

.category-section .sg-sitebar {
    background-color: #fff;
    border: 1px solid #e1e1e1;
}

.sg-sitebar .top-title {
    font-size: 18px;
    padding: 20px;
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    text-align: left;
    font-weight: 500;
    border-bottom: 1px solid #e1e1e1;
    background-color: #f1f2f3;
}

.sg-sitebar .card,
.sg-sitebar .card .card-header {
    border: 0;
    padding: 0;
    background-color: transparent;
}

.sg-sitebar .card-contetn {
    padding: 20px;
}

.filter-tabs {
    display: flex;
    align-self: center;
    margin-left: 15px;
}

.filter-tabs li {
    color: #686a6b;
    margin-right: 15px;
    cursor: pointer;
    font-size: 20px;
}

.filter-tabs li:hover,
.filter-tabs li.active {
    color: var(--primary-color);
}

.filter-tabs li:last-child {
    margin-right: 0;
}

.category-section.list-view-tab .products>li {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.category-section.list-view-tab .sg-product {
    display: flex;
}

.list-view-tab .product-info {
    align-self: center;
    text-align: left;
}

.list-view-tab .sg-rating {
    justify-content: start;
}

.sg-category-content .title {
    /* 
  border-bottom: 0;
  margin-bottom: 0;
  */
    padding-bottom: 0;
}

.sg-category-content .title h1 {
    margin-bottom: 0;
    min-width: 90px;
    align-self: center;
}

.sg-category-content .form-control {
    margin-bottom: 0;
    align-self: center;
}

.sg-pagination {
    margin-top: 30px;
}

.daily-deals .list-view-tab .grid-6>li {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.show-more {
    text-align: center;
}

.pagination {
    flex-wrap: wrap;
}

.pagination li {
    margin-right: 10px;
    margin-bottom: 5px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a,
.pagination li span {
    color: #a1aab5;
    display: block;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    background-color: #f1f1f1;
}

.pagination li span {
    border: 1px solid #dee2e6;
}

.pagination li:hover span.mdi {
    color: #fff;
}

.pagination li span.mdi {
    padding: 0;
    background-color: transparent;
}

.pagination li a:hover,
.pagination li a.current,
.pagination li .current,
.pagination li span {
    color: #fff;
    background-color: var(--primary-color);
}

.widget {
    border-bottom: 1px solid #e1e1e1;
}

.widget h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.category-content ul li {
    margin-bottom: 20px;
}

.category-content ul li a {
    display: flex;
    padding: 20px;
    align-items: center;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #eeeeee;
}

.categories-section .category-content ul li a img {
    display: inline-block;
}

.category-content ul li a span {
    display: block;
}

.category-content ul li a span.icon {
    max-width: 100px;
    margin-right: 5px;
}

.category-content ul li a:hover {
    border-color: var(--primary-color);
}

.category-content ul li a img {
    display: block;
    margin-bottom: 5px;
}

.category-style-1 ul li:last-child a span {
    display: block;
}

.category-style-1 ul li:last-child a {
    padding: 38px 20px;
}

.category-style-1 .title {
    border-bottom: 0;
    padding-bottom: 0;
}

/* price slider */

.price-top {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.price-top input {
    width: 100%;
    margin-bottom: 0;
}

.price-top .form-group {
    margin-right: 20px;
    position: relative;
}

.price-top .form-group:after {
    position: absolute;
    content: "";
    top: 50%;
    right: -15px;
    width: 10px;
    height: 2px;
    background-color: var(--secondary-color);
}

.price-top .form-group:last-child:after {
    display: none;
}

#price_slider {
    margin-top: 25px;
    position: relative;
}

.ui-slider {
    height: 2px;
    margin: 4px 10px 4px 10px;
    border: none;
    border-radius: 0;
    background: rgb(26 32 44 / 20%);
    font-family: inherit;
    cursor: pointer;
}

.ui-slider a {
    transition: inherit;
}

.ui-slider .ui-slider-range {
    background: #326bf3;
}

.ui-slider .ui-slider-handle {
    height: 15px;
    width: 7px;
    background: var(--secondary-color);
    border-radius: 10;
    margin-top: -7px;
    cursor: pointer;
    position: absolute;
}

.ui-slider .ui-slider-handle:after {
    position: absolute;
    top: 0;
}

.price_slider_amount {
    margin-top: 30px;
    overflow: hidden;
    margin-bottom: 30px;
}

.price_slider_amount input {
    float: left;
    border: none;
    width: 50%;
    margin-top: 5px;
}

.price-top .btn {
    float: right;
    padding: 5px;
    font-size: 12px;
    min-width: 75px;
    color: #fff;
    background-color: var(--secondary-color);
}

.price-top .btn:hover {
    background-color: var(--primary-color);
}

.form-checkbox .form-group {
    display: block;
    margin-bottom: 15px;
}

.form-checkbox .form-group input,
.remember input,
.popup-modal .form-group.tnc input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.form-checkbox .form-group label,
.popup-modal .form-group.tnc label {
    position: relative;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

.popup-modal .form-group label {
    display: inline;
}

.form-checkbox .form-group label:before,
.remember label:before,
.popup-modal .form-group.tnc label:before {
    content: "";
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #c1c1c1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 8px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px;
}

.ragister-form .form-group label:before,
.popup-modal .form-group.tnc label:before {
    top: -2px;
}

.form-checkbox .form-group input:checked+label:before,
.remember input:checked+label:before,
.popup-modal .form-group.tnc input:checked+label:before {
    background-color: var(--primary-color);
}

.form-checkbox .form-group input:checked+label:after,
.remember input:checked+label:after,
.popup-modal .form-group.tnc input:checked+label:after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ragister-form .form-group input:checked+label:after,
.remember input:checked+label:after,
.popup-modal .form-group.tnc input:checked+label:after {
    top: 3px;
}

.form-checkbox .form-group label ul {
    display: inline-flex;
    align-self: center;
    line-height: 0;
}

.form-checkbox .form-group label {
    display: flex;
}

.form-checkbox .form-group label span {
    position: static;
    margin-bottom: 0;
    height: initial;
    width: initial;
    line-height: 20px;
    font-size: 11px;
    color: #c1c1c1;
}

.form-checkbox .form-group label span.active {
    color: #ffcc00;
}

/* sg-table */

.sg-table .product-thumb {
    max-width: 120px;
    min-width: 120px;
    max-height: initial;
    margin-right: 15px;
    margin-bottom: 0;
    height: initial;
    padding: 10px;
}

.sg-table .product {
    max-width: 340px;
}

.sg-table .product a {
    display: flex;
}

.sg-table .product .text {
    align-self: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.sg-table .product .text p {
    font-weight: 600;
}

.sg-table .product .text span {
    display: block;
    color: #999;
    font-weight: normal;
}

.sg-table .product-quantity {
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    border: 1px solid #eeeeee;
}

.sg-table .price,
.sg-table .subtotal {
    font-size: 14px;
}

.sg-card {
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
    justify-content: space-between;
}

.sg-card .text li p {
    color: #999;
    margin-bottom: 5px;
}

.add-new .accordion-button {
    color: #1976f2;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0 0 0 20px;
}

.add-new .accordion-button::after {
    background-image: none;
    content: "\2b";
    transform: rotate(0) !important;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: rotate(0);
    left: 0;
    position: absolute;
}

.add-new .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.add-new form label {
    margin-bottom: 5px;
}

.add-new .form-control {
    margin-bottom: 20px;
}

.add-new textarea.form-control {
    height: 80px;
}

.sg-card .text {
    margin-right: 50px;
}

.sg-card ul li {
    margin-bottom: 15px;
}

.sg-card ul li:last-child {
    margin-bottom: 0;
}

.sg-card .button {
    min-width: 220px;
}

.sg-card .btn {
    padding: 8px 25px;
    margin-bottom: 5px;
    border-color: #e1e1e1;
}

.sg-card .btn:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.sg-table tr {
    border: 1px solid #eeeeee;
}

.sg-table-header {
    margin-bottom: 15px;
    border-bottom: 3px solid var(--secondary-color);
}

.sg-table-header ul,
.table-list {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
}

.sg-table-header ul li {
    padding-right: 15px;
    padding-bottom: 15px;
}

.sg-table-header ul li:last-child {
    padding-right: 0;
}

.table-content>li {
    border: 1px solid #eeeeee;
    margin-bottom: 15px;
}

.table-content ul li {
    align-self: center;
    padding-right: 15px;
}

.sg-table .dropdown-menu li a {
    display: block;
    padding: 5px 10px;
}

.sg-table .product-quantity input {
    width: 40px;
    text-align: center;
    border: 0;
    height: 40px;
    font-size: 16px;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}

.sg-table .product-quantity .quantity {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-table .product-quantity .btn {
    padding: 5px;
    font-size: 16px;
    color: var(--secondary-color);
}

.sg-table .product-quantity .btn:hover {
    color: var(--primary-color);
}

.sg-table .product-quantity .btn span {
    margin-right: 0;
    font-size: 16px;
}

.sg-table.sg-notification .table-content .product {
    max-width: 700px;
}

.sg-table .product .text span.btn {
    font-size: 10px;
    display: inline-block;
    color: #fff;
    margin-bottom: 10px;
    background-color: #ff5252;
    padding: 2px 10px;
}

.sg-table .product .text span.black {
    background-color: #333333;
}

.sg-table .product .text span.yellow {
    background-color: #ffcc00;
}

.sg-notification .product .text p {
    margin-bottom: 0;
}

.sg-table .table thead th {
    padding-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
}

.sg-table thead th:last-child {
    padding-right: 0 !important;
}

.sg-table .icons {
    font-size: 24px;
}

.sg-table .icons a {
    color: #707070;
}

.sg-table .icons a:hover {
    color: var(--primary-color);
}

.sg-table .table td,
.sg-table .table th {
    padding: 15px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
}

.sg-table .table th:first-child {
    padding-left: 0;
}

.sg-table table thead th {
    border: 0;
    color: var(--secondary-color);
    font-size: 16px;
}

.sg-table .table-content .product {
    max-width: 410px;
}

.sg-table .table .product .text,
.sg-table .table .product a {
    align-self: center;
}

.sg-table .table tbody tr {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 4px;
}

.sg-table .table thead tr {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.sg-table .table>thead tr {
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid var(--secondary-color);
    padding-bottom: 15px;
}

.sg-table table {
    margin-bottom: 0;
}

.sg-table .table> :not(:first-child) {
    border-top: 1px solid #eeeeee;
}

.sg-table .btn.btn-white {
    margin-right: 20px;
    text-transform: uppercase;
}

.sg-table .btn.btn-white:last-child {
    margin-right: 0;
}

.sg-table .buttons {
    margin-top: 50px;
}

.order-summary h6,
.payment-option h6 {
    font-size: 16px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    margin-top: 3px;
    border-bottom: 1px solid #e1e1e1;
}

.payment-option .radio-group img {
    display: block;
    border-radius: 4px;
}

.order-summary .btn.btn-primary {
    width: 100%;
    padding: 15px;
}

.order-summary ul li {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.order-summary ul li:last-child {
    margin-bottom: 0;
}

.order-summary ul li span,
.order-summary .order-total span {
    float: right;
    padding-left: 15px;
}

.order-summary .order-total {
    font-weight: 600;
    padding-top: 20px;
    margin-top: 25px;
    color: var(--secondary-color);
    margin-bottom: 25px;
    border-top: 1px solid #e1e1e1;
}

label {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.order-summary .accordion-item {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    margin-bottom: 20px;
}

.order-summary .accordion-button {
    color: var(--secondary-color);
    font-size: 14px;
}

.order-summary .accordion-button span {
    margin-right: 10px;
    font-size: 18px;
}

.order-summary .accordion-button:focus,
.order-summary .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.order-summary .accordion-button::after {
    background-image: none;
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 18px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: rotate(0);
}

.order-summary .accordion-button:not(.collapsed)::after {
    content: "\f105";
}

.order-summary form {
    position: relative;
}

.order-summary form .form-control {
    margin-bottom: 5px;
}

.order-summary .accordion-body {
    padding-top: 0;
}

.order-summary form button {
    position: absolute;
    top: -1px;
    right: -1px;
    border: 0;
    height: 100%;
    color: #fff;
    width: 90px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--secondary-color);
}

.input-radio {
    margin-bottom: 20px;
}

.input-radio [type="radio"]:checked,
.input-radio [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.input-radio [type="radio"]:checked+label,
.input-radio [type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-weight: 600;
}

.input-radio [type="radio"]:checked+label:before,
.input-radio [type="radio"]:not(:checked)+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.input-radio [type="radio"]:checked+label:after,
.input-radio [type="radio"]:not(:checked)+label:after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    left: 3px;
    background-color: var(--primary-color);
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.input-radio [type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.input-radio [type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.card-list ul li {
    width: 33.33333333%;
    margin-bottom: 15px;
}

.card-list ul li label {
    display: flex;
    font-weight: 600;
    font-size: 14px;
}

.card-list ul li label img {
    margin-right: 10px;
}

.input-checkbox input[type="radio"]+label {
    cursor: pointer;
    width: 100%;
    height: 60px;
    border: 1px solid #eeeeee;
    padding: 5px;
    border-radius: 4px;
    align-items: center;
}

.input-checkbox input[type="radio"]:checked+label {
    border-color: var(--primary-color);
}

.input-checkbox input[type="radio"] {
    display: none;
}

.payment-method textarea {
    height: 140px;
}

.payment-method .form-group {
    margin-bottom: 20px;
}

.payment-method .form-group:last-child {
    margin-bottom: 0;
}

.ragister-account .account-content {
    border-radius: 4px;
    width: 750px;
    margin-bottom: 20px;
    overflow: hidden;
    display: inline-flex;
    justify-content: space-between;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.ragister-account .account-content .thumb {
    padding: 30px;
    min-width: 320px;
    background-color: rgb(112 112 112 / 22%);
}

.ragister-account .form-content {
    padding: 30px;
    width: 100%;
}

.ragister-account h1 {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.ragister-account form label {
    text-align: left;
    display: block;
}

.ragister-account .middle-content {
    justify-content: space-between;
}

.ragister-account .middle-content label {
    display: inline-block;
    font-size: 14px;
}

.ragister-account .middle-content a:hover {
    color: var(--primary-color);
}

.ragister-account button {
    width: 100%;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 15px;
    text-transform: uppercase;
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.ragister-account .middle-content {
    margin-bottom: 20px;
}

.ragister-account p {
    font-size: 16px;
}

.ragister-account button:hover {
    color: var(--secondary-color);
    background-color: #fff;
}

.ragister-account p a {
    font-weight: 700;
}

.continue-with {
    overflow: hidden;
}

.continue-with p {
    position: relative;
    display: inline-block;
}

.continue-with p:before,
.continue-with p:after {
    position: absolute;
    content: "";
    top: 13px;
    width: 150%;
    height: 1px;
    background-color: #ddd;
}

.continue-with p:before {
    right: 100%;
    margin-right: 15px;
}

.continue-with p:after {
    left: 100%;
    margin-left: 15px;
}

.ragister-account ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}

.ragister-account ul li {
    margin-right: 5px;
    margin-bottom: 5px;
}

.ragister-account ul li a {
    display: block;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #f9f9f9;
    border: 1px solid #eeeeee;
}

.ragister-account ul li a span {
    margin-right: 5px;
    font-size: 20px;
}

.ragister-account ul li a:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.form-group {
    position: relative;
}

.form-group span {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 50px;
    text-align: right;
    line-height: 50px;
    font-size: 20px;
}

.ragister-account .form-control {
    padding-left: 40px;
}

/* new-ragister-account */

.new-ragister-account .account-content {
    width: 500px;
    overflow: hidden;
    display: inline-block;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.new-ragister-account .account-content h1 {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 0;
    padding: 10px 20px;
    background-color: #f1f2f3;
}

.new-ragister-account .account-content .ragister-form {
    padding: 30px;
}

.new-ragister-account .ragister-form .form-control:focus {
    border-color: var(--primary-color);
}

.new-ragister-account .ragister-form button {
    width: 100%;
    margin-bottom: 20px;
}

.new-ragister-account .ragister-form .form-group a {
    text-align: right;
    display: block;
    margin-bottom: 15px;
}

.new-ragister-account .ragister-form .middle-content span {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #a19e9e;
    position: relative;
    text-transform: uppercase;
}

.new-ragister-account .ragister-form .middle-content p a {
    font-weight: 600;
    color: var(--primary-color);
}

.new-ragister-account .ragister-form .middle-content p a:hover {
    text-decoration: underline;
}

.new-ragister-account .ragister-form .middle-content span:before,
.new-ragister-account .ragister-form .middle-content span:after {
    position: absolute;
    content: "";
    top: 10px;
    width: 35px;
    height: 1px;
    background-color: #a19e9e;
}

.new-ragister-account .ragister-form .middle-content span:before {
    left: -50px;
}

.new-ragister-account .ragister-form .middle-content span:after {
    right: -50px;
}

.new-ragister-account .ragister-form .buttons {
    margin-top: 30px;
}

.new-ragister-account .ragister-form .buttons a {
    display: block;
    text-align: left;
    padding: 0;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: #4267b2;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #4267b2;
    border-radius: 4px;
}

.new-ragister-account .account-content .buttons .google-plus {
    background-color: #4285f4;
    border-color: #4285f4;
}

.new-ragister-account .ragister-form .buttons span {
    color: #fff;
    width: 60px;
    height: 45px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    margin-right: 20px;
    margin-top: -1px;
    margin-bottom: -1px;
    border-radius: 4px 0px 0px 4px;
}

.new-ragister-account .ragister-form .buttons .facebook span {
    color: #4267b2;
    border: 4px solid #4267b2;
    background-color: #fff;
}

.new-ragister-account .account-content .buttons .google-plus span {
    color: #4285f4;
    border: 4px solid #4285f4;
    background-color: #fff;
}

.new-ragister-account .ragister-account .thumb {}

.new-ragister-account .sg-thumb {
    width: 480px;
}

/* search-results */

.results-info {
    padding: 50px 0;
    background-color: #fff;
}

.results-info .page-title {
    margin-bottom: 15px;
}

/* sg-text-content */

.sg-text-content h4 {
    position: relative;
    font-size: 20px;
    padding-left: 15px;
    margin-bottom: 20px;
}

.sg-text-content h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #161a25;
}

.sg-text-content p {
    margin-bottom: 40px;
}

.sg-text-content ul {
    padding-left: 20px;
    margin-bottom: 30px;
}

.sg-text-content ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
}

.sg-text-content ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    background-color: #a1aab5;
}

.social ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.social ul li {
    font-size: 14px;
    margin-right: 15px;
    align-self: center;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--secondary-color);
}

.social ul li a {
    display: block;
    font-size: 14px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    text-align: center;
    border: 1px solid #eeeeee;
}

.social ul li a:hover {
    border-color: var(--primary-color);
}

.social ul li:last-child {
    margin-right: 0;
}

.contact-section .page-title {
    margin-bottom: 30px;
}

.contact-info ul li {
    margin-bottom: 15px;
}

.contact-info .social {
    margin-top: 30px;
}

.contact-info .social ul li {
    margin-bottom: 5px;
}

.contact-form label {
    margin-bottom: 5px;
}

.contact-list ul {
    padding-top: 15px;
    border-top: 1px solid #eeeeee;
}

.contact-list ul li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

.contact-list ul li a {
    display: block;
}

.contact-list ul li span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
}

/* profile-section */

.profile-thumb img {
    border: 10px solid #fff;
    -webkit-box-shadow: 0 10px 15px 2px rgb(0 0 0 / 3%);
    -moz-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -ms-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -o-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0px 12px 8px rgb(0 0 0 / 3%);
    margin-bottom: 30px;
}

.profile-details {
    text-align: center;
    border: 1px solid #eeeeee;
    padding: 25px;
    background-color: #fff;
    border-radius: 4px;
}

.profile-details h1,
.profile-details h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
}

.profile-details a {
    display: block;
}

.profile-details .btn.btn-primary {
    padding: 10px 35px;
    border-radius: 0;
    margin-top: 15px;
}

.profile-info {
    border: 1px solid #eeeeee;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
}

.profile-info .social ul {
    margin-bottom: 0;
}

.profile-list ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.profile-list ul li {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 13px;
    margin-bottom: 15px;
}

.profile-list h5 {
    font-size: 18px;
    font-weight: 500;
}

/* profile-section */

.sidebar-menu {
    display: block;
    padding: 15px 0;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
    background-color: #fff;
}

.sidebar-menu ul li {
    margin-bottom: 1px;
}

.sidebar-menu li a {
    padding: 15px;
    display: flex;
    color: var(--secondary-color);
    border-left: 3px solid transparent;
}

.sidebar-menu li span {
    font-size: 16px;
    line-height: 22px;
    margin-right: 10px;
}

.sidebar-menu li a:hover,
.sidebar-menu li.active>a {
    color: var(--secondary-color);
    background-color: rgb(0 123 255 / 7%);
    border-left: 3px solid var(--primary-color);
}

.profile-thumb a {
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 26px;
    border-radius: 100%;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.edit-profile .profile-thumb {
    margin-bottom: 30px;
}

.edit-profile .sg-gender .form-group,
.edit-profile .sg-date .form-group {
    margin-right: 20px;
}

.form-button {
    text-align: center;
}

.form-button .btn.btn-primary {
    padding: 10px 45px;
    font-size: 14px;
}

.edit-profile-box .sg-card {
    margin-bottom: 0px;
}

.edit-profile-box .select-styled {
    padding: 14px 15px;
}

.edit-profile-box .select .select-options li {
    margin-bottom: 0;
}

.edit-profile-box .upload-image {
    text-align: right;
    padding: 12px 15px;
    background-color: transparent;
}

.edit-profile-box .upload-image+.upload-image {
    position: absolute;
    right: 0;
    border-left: 0;
}

.edit-profile-box label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.edit-profile-box textarea {
    height: 100px;
}

.edit-profile-box .sg-card .btn {
    width: 100%;
    padding: 15px;
}

.edit-profile-box .title,
.sg-table .title {
    padding-bottom: 10px;
}

.edit-profile-box .title h1,
.sg-table .title h1 {
    font-size: 16px;
}

/* order-history */

.sg-table .dropdown-toggle {
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 12px;
    background-color: #363f4d;
}

.sg-table table .dropdown-menu {
    border: 0;
    min-width: 145px;
    padding: 10px 0;
    display: none;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
}

.sg-table table .dropdown-menu.show {
    display: block;
}

.sg-table table .dropdown-menu li {
    margin-right: 0 !important;
}

.sg-table table .dropdown-menu a {
    display: block;
    padding: 3px 25px;
    position: relative;
    margin-bottom: 1px;
    width: initial;
    height: initial;
    border-radius: 0;
    text-align: left;
    color: #182531 !important;
    background-color: transparent !important;
}

.sg-table table .dropdown-menu a:hover {
    background-color: #f1f2f3 !important;
}

.paid {
    color: #0dc46e;
    border: 1px solid #0dc46e;
    border-radius: 25px;
    padding: 3px 15px;
    text-align: center;
}

.unpaid {
    color: #ff5252;
    border: 1px solid #ff5252;
    border-radius: 25px;
    padding: 5px 15px;
    text-align: center;
}

.complete {
    color: #0dc46e;
}

.cancel {
    color: #ff5252;
}

.pending {
    color: #ffcc00;
}

/* track-order-section */

.track-order {
    overflow: hidden;
    width: 700px;
    display: inline-block;
}

.track-order h3,
.track-order-placed h3,
.track-order-summary h3 {
    font-size: 20px;
    margin-bottom: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #e1e1e1;
    background-color: #f3f3f3;
    border-radius: 4px 4px 0px 0px;
}

.track-order .form-control {
    margin-bottom: 0;
    margin-right: 5px;
}

.track-order h4 {
    min-width: 200px;
    margin-right: 50px;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 0;
    align-self: center;
}

.track-order button {}

.track-order-summary .summary-table,
.track-order-placed .summary-table {
    padding: 25px 15px;
}

.track-order-summary table,
.track-order-placed table {
    margin-bottom: 0;
}

.track-order-summary table td,
.track-order-summary table th,
.track-order-placed table td,
.track-order-placed table th {
    border: 0;
    background-color: transparent !important;
}

/* seller-dashbord */

.seller-dashbord .sg-sitebar {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 0;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.sg-sitebar ul li {
    margin-bottom: 10px;
}

.sg-sitebar ul li a {
    display: block;
    padding: 5px 0;
    position: relative;
    margin-bottom: 1px;
    font-size: 15px;
}

.sg-sitebar ul li a.active {
    color: var(--primary-color);
}

.sg-sitebar .accordion-body {
    padding: 1px 0;
}

.sg-sitebar .accordion-button:not(.collapsed) {
    color: var(--secondary-color);
    background-color: transparent;
}

.sg-sitebar .accordion-button {
    padding: 15px 0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    box-shadow: none;
    border-bottom: 1px solid #e1e1e1;
    background-color: transparent;
}

.sg-sitebar .accordion-item:first-of-type .accordion-button {
    padding-top: 0;
}

.sg-sitebar .accordion-button::after {
    background-image: none;
    content: "\f068";
    transform: rotate(0) !important;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.sg-sitebar .accordion-button:not(.collapsed)::after {
    content: "\2b";
}

.accordion-item {
    border: 0;
}

.card-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.card-content>li {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    padding-left: 15px;
    padding-right: 15px;
}

.card-content>li.active {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.card-content .card {
    margin-bottom: 30px;
    text-align: center;
    border: 0;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    padding-top: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.card-content .card h2 {
    font-size: 34px;
}

.card-content .card .btn {
    color: #fff;
    border-radius: 0;
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
    margin-top: 30px;
    padding: 8px 25px;
    background-color: #363f4d;
}

.card-content .card .btn:hover {
    background-color: var(--primary-color);
}

.card-content .active .card {
    padding: 70px 15px;
}

.card-content .active .card .btn {
    margin-left: 0;
    margin-right: 0;
    width: initial;
    border-radius: 4px;
}

.card-content .active p {
    font-size: 24px;
}

.card-content .card ul li {
    margin-bottom: 15px;
}

.card-content .card .icon {
    margin-bottom: 30px;
}

.card-content.style-2 .active .card {
    padding: 45px 15px;
}

.dashbord-content .product-sale {
    background-color: #fff;
    margin-bottom: 30px;
    padding: 30px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.dashbord-content table {
    margin-bottom: 0;
    border: 1px solid #dee2e6;
}

.dashbord-content table thead th {
    border-bottom: 0;
    border-top: 0;
}

/* thank-you */

.thank-you {
    background-color: #fff;
    padding: 30px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.thank-you .table td,
.thank-you .table th {
    border: 0;
    padding-left: 0;
}

/* wishlist-content */

.wishlist-content,
.complete-order {
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.complete-order,
.wishlist-content {
    overflow: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.wishlist-content .sg-product.style-1 .product-thumb {
    min-width: 100px;
}

.table-header {
    display: flex;
    padding: 20px 15px;
    background-color: #f7f8fa;
    justify-content: space-between;
}

.table-header h2 {
    margin-bottom: 0;
    font-size: 20px;
}

.table-header a {
    align-self: center;
    font-weight: 600;
}

.wishlist-content table .sg-product {
    max-width: 380px;
    margin-bottom: 0;
    white-space: normal;
}

.wishlist-content table tbody th,
.wishlist-content table tbody td,
.complete-order table tbody th,
.complete-order table tbody td {
    border: 0;
}

.wishlist-content .table thead th,
.complete-order .table thead th {
    border-bottom: 1px solid #e1e1e1;
}

.dashbord-global-content {
    padding: 30px;
    display: block;
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    overflow: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.dashbord-global-content .title .btn.btn-white {
    padding: 10px 20px;
}

.dashbord-global-content h4 {
    font-size: 20px;
    font-weight: 500;
    color: var(--secondary-color);
}

.dashbord-form .form-group {
    display: flex;
    margin-bottom: 0;
}

.dashbord-form .form-group label {
    width: 360px;
    font-weight: normal;
}

.dashbord-form button {
    float: right;
}

.dashbord-global-content .title {
    border-bottom: 0;
}

.dashbord-global-content .keyword,
.bootstrap-tagsinput {
    width: 100%;
    border-radius: 4px;
    padding: 10px 20px;
    margin-bottom: 30px;
    border: 1px solid #e2dfdf;
}

.dashbord-global-content .thumb {
    width: 100%;
    margin-bottom: 30px;
}

.dashbord-global-content .keyword a,
.bootstrap-tagsinput .tag {
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
    background-color: #363f4d;
}

.bootstrap-tagsinput .tag {
    margin-top: 2px;
    margin-bottom: 2px;
}

.bootstrap-tagsinput {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    cursor: pointer;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
    margin-left: 5px;
}

.tags-container button {
    border: 0;
    margin-left: 2px;
    background-color: transparent;
}

.dashbord-global-content .keyword span {
    margin-left: 15px;
}

.tag-input,
.bootstrap-tagsinput input {
    border: 0;
}

.switch input:checked .switch .toggle-outside {
    background-color: #ddd;
}

/* business-setting */

.business-setting .card {
    border: 0;
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 5%);
}

.business-setting .card label {
    font-weight: normal;
    margin-bottom: 15px;
}

.business-setting .card button {
    float: right;
    padding: 10px 25px;
}

.business-setting .card .switch {
    align-self: center;
}

.switch {
    width: 40px;
    height: 20px;
    position: relative;
}

.switch input {
    position: absolute;
    top: 0;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
    height: 20px;
    width: 40px;
    margin: 0;
}

.switch input:checked {
    z-index: 1;
}

.switch input:checked+label {
    opacity: 1;
    cursor: default;
}

.switch input:not(:checked)+label:hover {
    opacity: 0.5;
}

.switch label {
    color: #fff;
    opacity: 0.33;
    transition: opacity 0.25s ease;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 100%;
    margin: 0;
    text-align: center;
}

.switch .toggle-outside {
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background-color: #b7c2d1;
    position: absolute;
    width: 40px;
    transition: 0.25s ease all;
}

.switch .toggle-inside {
    border-radius: 30px;
    background-color: #fff;
    position: absolute;
    height: 17px;
    width: 17px;
    top: 1px;
}

.switch input:checked+.toggle-outside {
    background-color: #64bd63;
}

.switch input:checked~.toggle-outside .toggle-inside {
    left: 2px;
}

.switch input~input:checked~.toggle-outside .toggle-inside {
    left: 20px;
}

.dashbord-global-content .title h4 {
    align-self: center;
}

.dashbord-global-content .title .form-control {
    margin-bottom: 0;
}

.dashbord-global-content table {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.dashbord-global-content .dropdown-toggle:after {
    border: 0;
    content: "\F0140";
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dashbord-global-content .dropdown-menu {
    border: 0;
    min-width: 230px;
    padding: 20px 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -moz-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -ms-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    -o-box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
    box-shadow: 0 6px 12px hsl(0deg 0% 0% / 15%);
}

.dashbord-global-content .dropdown-menu a {
    display: block;
    padding: 10px 30px;
    position: relative;
    margin-bottom: 1px;
}

.dashbord-global-content .dropdown-menu a:hover,
.dashbord-global-content .dropdown-menu a.active {
    background-color: #f1f2f3;
}

.dashbord-global-content .dropdown-toggle {
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    background-color: #363f4d;
}

.dashbord-global-content .table td,
.dashbord-global-content .table th {
    padding: 25px 5px;
}

.dashbord-global-content .table td:last-child,
.dashbord-global-content .table th:last-child {
    text-align: right;
}

.dashbord-global-content .table td:first-child {
    max-width: 180px;
    white-space: initial;
}

.file-upload {
    color: #fff;
    padding: 40px 20px;
    border-radius: 4px;
    margin-bottom: 30px;
    text-align: center;
    background-color: #21e1ff;
}

.file-upload.new {
    background-color: #363f4d;
}

.file-upload.upgrade {
    background-color: #ff5779;
}

.file-upload label {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 100%;
    margin-bottom: 15px;
    cursor: pointer;
    background-color: rgb(255 255 255 / 22%);
}

.file-upload p {
    margin-bottom: 10px;
}

.file-upload input {
    display: none;
}

.file-upload h3 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 0;
}

/* seller-shop */

.seller-shop-content {
    display: flex;
    padding: 30px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    -webkit-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -ms-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    -o-box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 15px 2px rgba(0, 0, 0, 0.03);
}

.seller-shop-content h3 {
    font-size: 24px;
    font-weight: 500;
}

.seller-shop-content h3 span {
    color: var(--primary-color);
}

.seller-shop-content .left-content h3 {
    margin-top: 15px;
}

.seller-shop-content .left-content {
    text-align: center;
    margin-right: 50px;
}

.seller-shop-content p {
    margin-bottom: 10px;
}

.seller-shop-content .btn {
    padding: 10px 20px;
    margin-right: 20px;
}

.seller-shop-content .btn:last-child {
    margin-right: 0;
    margin-bottom: 5px;
}

.seller-shop-content .btn span {
    font-size: 22px;
}

/* thank-you */

.thank-you .top-content {
    text-align: center;
}

.thank-you .top-content h2 {
    font-size: 30px;
    font-weight: normal;
    margin-top: 20px;
}

.thank-you .top-content h3 {
    font-size: 20px;
    font-weight: normal;
}

.thank-you .top-content p {
    font-style: italic;
}

.thank-you h4 {
    font-size: 22px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    border-bottom: 1px solid #e1e1e1;
}

.campaign-menu {
    margin-bottom: 10px;
}

.campaign-menu ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.campaign-menu ul li a {
    padding: 7px 15px;
    display: block;
}

.campaign-products .btn.btn-primary {
    width: 100%;
    padding: 10px 15px;
}

.campaign-products .product-info h3 {
    border-bottom: 0;
    font-size: 18px;
    padding-bottom: 0;
}

.campaign-header {
    padding: 40px;
    border-radius: 4px;
    background-color: #eaeaea;
}

.campaign-header h2 {
    font-size: 18px;
    text-transform: uppercase;
}

.campaign-header p {
    margin-bottom: 0;
}

/*campaign-section*/

.campaign {
    padding: 15px;
    display: block;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
}

.campaign-section .sa-box {
    padding-bottom: 0;
}

.campaign img {
    width: 100%;
}

/* footer-section */

.footer-section {
    /* background-color: #333; */
}

.footer-section.footer-bg {
    color: #b7c2d1;
    background-color: #101a23;
}

.footer-section.footer-bg a {
    color: #b7c2d1;
}

.footer-section.footer-bg a:hover {
    color: var(--primary-color);
}

.footer-top {
    padding: 50px 0 20px;
    border-top: 1px solid #4a4a4a;
}

.footer-widget {
    margin-bottom: 30px;
    color: #fff;
}

.footer-widget h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fff;
}

.footer-widget ul li {
    margin-bottom: 15px;
}

.footer-widget ul li a {
    color: #fff;
}

.footer-widget ul li a:hover,
.footer-bottom p a:hover {
    color: var(--primary-color);
}

.footer-logo {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 1px solid #4a4a4a;
}

.address h4 {
    font-size: 14px;
    color: #999;
}

.address h4 span {
    margin-right: 10px;
}

.footer-top .social ul li a {
    color: #fff;
    border: 1px solid #666666;
}

.footer-top .social ul li a:hover {
    color: #fff;
    background-color: var(--primary-color);
}

/* footer-bottom */

.footer-bottom-content {
    padding: 25px 0;
    border-top: 1px solid #4a4a4a;
}

.footer-section.footer-bg .footer-bottom {
    background-color: #0c141c;
}

.footer-widget form {
    position: relative;
}

.footer-widget form .btn.btn-primary {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    line-height: initial;
    border-radius: 0px 4px 4px 0px;
}

.footer-bottom p {
    margin-bottom: 0;
    color: #999;
}

.footer-bottom p a {
    color: #999;
}

.footer-bottom-content {
    text-align: center;
    justify-content: space-between;
}

.footer-bottom-content ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.footer-bottom-content ul li {
    margin-right: 10px;
}

.footer-bottom-content ul li:last-child {
    margin-right: 0;
}

.footer-bottom .payment-card,
.footer-bottom .footer-social,
.footer-bottom .copyright {
    align-self: center;
}

.footer-social ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid #4a4a4a;
    margin-bottom: 25px;
    padding-top: 25px;
}

.footer-social li {
    margin-right: 30px;
}

.footer-social li a {
    color: #999;
}

.footer-social li:last-child {
    margin-right: 0;
}

.footer-bg .footer-social li a:hover,
.footer-social li a:hover {
    color: var(--primary-color);
}

.tox .tox-notification--warn,
.tox .tox-notification--warning,
.tox .tox-statusbar {
    display: none !important;
}

.tox-tinymce {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 4px !important;
    border: 1px solid #e2dfdf !important;
}

.sg-topbar {
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
}

.sg-topbar ul.global-list li i {
    color: var(--primary-color);
    font-size: 14px;
}

.sg-logo {
    gap: var(--gap-9xs);
    font-size: var(--font-size-sm);
}

.sg-logo img {
    width: 70px;
    height: 29.06px;
    margin-left: 45px;  /* Them vao dịch chuyển logo sang phải 45px */
    object-fit: cover;
}

.header-bottom .right-content {
    max-height: 48px !important;
}

.header-bottom .offer img {
    margin-right: 5px;
}

.categorie-menu-content ul.global-list li {
    border-bottom: 1px solid #f3f0f0;
    float: left;
    min-width: 148px;
}

.categorie-menu-content ul.global-list li .sg-dropdown-menu li {
    border-bottom: 0;
}

.sg-menu .navbar li ul li a {
    color: var(--secondary-color);
}

.sg-menu .navbar li.nav-home a {
    font-size: 18px;
}

.sg-menu .navbar li li a {
    padding: 5px 16px;
    white-space: nowrap;
}

.sg-menu .navbar .sg-dropdown-menu {
    padding: 0;
    background-color: #fff;

    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.sg-menu .navbar .sg-dropdown-menu li a {
    padding: 8px 16px;
    /* border-top: 1px solid #eee; */
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    font-family: Nunito;
}

.sg-categorie-menu button {
    margin-left: 0px;
    margin-right: 16px;
}

.product-footer .btn,
.product-footer .btn span {
    font-size: 14px;
}

/*common class*/
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/*hero-v-2*/

.hero-v-2 #hero-slider {
    margin-right: 0;
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-section.hero-v-2 {
    margin-top: 0;
    background-color: #f5f5f5;
}

.hero-v-2 .hero-content {
    margin-top: 0;
}

.hero-v-2 .hero-text {
    text-align: left;
}

.hero-v-2 .hero-text h1 {
    font-size: 30px;
    color: var(--secondary-color);
    font-weight: 500;
    text-transform: uppercase;
}

.hero-v-2 .hero-text h2 {
    font-size: 20px;
    color: #363f4d;
    font-weight: normal;
}

.hero-v-2 .hero-text .btn.btn-primary {
    color: #363f4d;
    background-color: #fff;
    background-image: none;
    display: inline-flex;
    padding: 10px 25px;
}

.hero-v-2 .hero-text .btn.btn-primary span {
    margin-right: 0;
    font-size: 20px;
    line-height: 20px;
}

.hero-v-2 .hero-text .btn.btn-primary:hover {
    opacity: 1;
    color: #fff;
    background-color: var(--primary-color);
}

/*product-view*/

.sg-product.style-2 {
    display: flex;
    margin-bottom: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

.products .sg-product.style-2:last-child {
    margin-bottom: 0;
}

.sg-product.style-2 .product-thumb {
    max-width: 100px;
    margin-bottom: 0;
    margin-right: 15px;
}

.sg-product.style-2 .product-info h3 {
    border-bottom: 0;
    padding-bottom: 0;
}

.top-selling {
    border: 2px solid #f3f3f3;
    padding: 25px;
    -webkit-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    -o-box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
}

.top-selling .title {
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.sg-product.style-2 {
    border: 2px solid #f3f3f3;
    padding: 10px;
}

.sg-product.style-2 .product-thumb {
    background-color: #f5f5f5;
    padding: 15px;
    margin-bottom: 0;
    margin-right: 15px;
    max-width: 80px;
}

.sg-product.style-2 .product-info {
    align-self: center;
}

.sg-product.style-2 .product-info h3,
.sg-product.style-2 .price {
    font-weight: normal;
    font-size: 18px;
}

.sg-product.style-2 .product-info h3 a {
    color: #363f4d;
}

.top-selling .product-slider-1 .slick-arrow {
    top: -55px;
}

.arrow-style-1 .slick-arrow {
    background-color: #fff;
    top: -70px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    padding: 0;
    color: #a8acb5;
}

.arrow-style-1 .slick-arrow:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.arrow-style-1 .slick-arrow {
    top: -70px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.arrow-style-2 .slick-arrow {
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    line-height: 30px;
    text-align: center;
    background-color: var(--secondary-color);
    border-radius: 4px;
    box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 5%);
    padding: 0;
    font-size: 16px;
    color: #fff;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

.arrow-style-2 .slick-arrow:hover {
    color: #fff;
    background-color: var(--primary-color);
}

.arrow-style-2 .slick-arrow.mdi-chevron-left {
    left: 8px;
}

.arrow-style-2 .slick-arrow.mdi-chevron-right {
    right: 8px;
}

.arrow-style-1 .slick-arrow.mdi-chevron-left {
    right: 35px;
}

.product-details .details-slider-1 {
    text-align: center;
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.details-slider-1 img {
    display: inline-block;
}

.slider-nav-1 {
    margin-top: 30px;
}

.slider-nav-1 .thumb {
    padding: 20px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.slider-nav-1 .slick-slide {
    padding-left: 15px;
    padding-right: 15px;
}

/*featured-section*/

.featured-content {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
}

.featured-product {
    display: flex;
    padding: 40px;
    width: 50%;
    margin-left: 8px;
    margin-right: 8px;
    background-color: #fff;
}

.featured-product .product-info {
    max-width: 70%;
    align-self: center;
}

.featured-product .product-info h3 {
    font-size: 22px;
    border-bottom: 0;
    margin-bottom: 0;
    font-weight: 500;
}

.featured-product .product-info h3 a {
    color: var(--secondary-color);
}

.feature,
.feature-1 {
    background-color: #ebdfdb;
    box-shadow: none;
}

.feature-1 {
    background-color: #dbe4eb;
}

.feature-2 {
    background-color: #ebeadb;
}

/* category-section */

.category-section {
    background-color: #f8f8f8;
}

.category-section .title h1 {
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: #363f4d;
}

.category-slider {
    margin-left: -10px;
    margin-right: -10px;
}

.category-slider.arrow-style-1 .slick-arrow {
    top: -50px;
}

.category-slider .slick-slide {
    padding-left: 10px;
    padding-right: 10px;
}

.category h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-top: 10px;
}

.category .product-thumb {
    background-color: #fff;
    border: 1px solid #f3f3f3;
    text-align: center;
    padding: 15px;
}

.title-style-2 h1,
.title-style-3 h1 {
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: #363f4d;
    margin-bottom: 30px;
}

.title-style-3 h1 {
    text-align: left;
    margin-bottom: 10px;
}

.nav-tabs.style-2 {
    border-bottom: 0;
    justify-content: center;
    margin-bottom: 40px;
}

.nav-tabs.style-2 li a {
    color: #363f4d;
    font-weight: 500;
    padding: 8px 25px;
    display: block;
    border-radius: 4px;
    border: 1px solid #dfe4ee;
    background-color: transparent;
}

.nav-tabs.style-2 li {
    margin-right: 15px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.nav-tabs.style-2 li a:hover,
.nav-tabs.style-2 li a.active {
    color: var(--primary-color);
    background-color: transparent;
    border-color: var(--primary-color);
}

/* sg-convenience */

.sg-convenience ul {
    border: 1px solid #dfe4ee;
    padding: 15px;
    border-radius: 4px;
}

/*.sg-convenience ul li {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;   
}*/

.sg-convenience ul li p {
    margin-bottom: 0;
}

.sg-convenience ul li:first-child .convenience {
    padding-left: 30px;
}

.sg-convenience .slick-slide:last-child .convenience {
    border-right: 0;
    margin-right: 0;
}

.convenience {
    display: flex;
    padding: 15px;
    position: relative;
    margin-right: 30px;
    border-right: 1px solid #dfe4ee;
}

.convenience .icon {
    font-size: 40px;
    margin-right: 15px;
    align-self: center;
    line-height: 40px;
    color: var(--primary-color);
}

.after-none:after {
    display: none;
}

.convenience .text span {
    font-size: 14px;
    font-weight: 600;
    color: #363f4d;
}

.convenience .text p {
    color: #6b6f78;
    font-size: 13px;
}

.convenience-slider-1 {
    margin-left: -10px;
    margin-right: -10px;
}

.convenience-slider-1 .slick-slide {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}

.convenience-style-1 {
    border: 1px solid #dfe4ee;
    padding: 15px;
}

.convenience-style-1 .icon {
    margin-bottom: 15px;
    min-height: 35px;
}

.convenience-style-1 .text span {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.convenience-style-1 .text p {
    color: var(--secondary-color);
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 0;
}

/*brand-section*/

.brand-section .title-style-2 {
    margin-bottom: 30px;
}

.brand {
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
}

.brand img {
    width: 100%;
}

/*brand-section*/

.brand-slider {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
}

.brand-slider .slick-arrow {
    position: absolute;
    top: 50%;
    color: #707070;
    cursor: pointer;
    z-index: 99;
    font-size: 20px;
    margin-top: -18px;
    font-size: 24px;
}

.brand-slider.arrow-style-1 .slick-arrow.mdi-chevron-left {
    left: inherit;
    right: 35px;
}

.brand-slider.arrow-style-1 .slick-arrow.mdi-chevron-right {
    right: 0;
}

.brand-slider.arrow-style-1 .slick-arrow {
    top: -50px;
}

.brand-section.style-1 .brand-slider {
    border: 0;
    padding: 0;
}

.brand-section.style-1 .slick-slide {
    padding-left: 10px;
    padding-right: 10px;
}

.brand-section.style-1 .brand {
    border-radius: 4px;
    border: 1px solid #dfe4ee;
}

.brand-slider .slick-arrow.mdi-chevron-left .brand-slider .slick-arrow.mdi-chevron-right {
    right: 20px;
}

.category-product {
    position: relative;
}

.category-product:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 80%;
    z-index: 1;
    border-radius: 4px;
    background: -moz-linear-gradient(top,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.07) 11%,
            rgba(0, 0, 0, 0.19) 24%,
            rgba(0, 0, 0, 0.69) 64%,
            rgba(0, 0, 0, 0.85) 79%,
            rgba(0, 0, 0, 0.97) 93%,
            rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.07) 11%,
            rgba(0, 0, 0, 0.19) 24%,
            rgba(0, 0, 0, 0.69) 64%,
            rgba(0, 0, 0, 0.85) 79%,
            rgba(0, 0, 0, 0.97) 93%,
            rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.07) 11%,
            rgba(0, 0, 0, 0.19) 24%,
            rgba(0, 0, 0, 0.69) 64%,
            rgba(0, 0, 0, 0.85) 79%,
            rgba(0, 0, 0, 0.97) 93%,
            rgba(0, 0, 0, 1) 100%);
}

.category-product:hover:before {
    padding-top: 100%;
}

.category-product .text {
    position: absolute;
    color: #fff;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
}

.category-product .text p {
    margin-bottom: 5px;
}

.category-product .text h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
}

.category-product .text h4 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.category-product .thumb {
    margin-bottom: 20px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    max-height: 370px;
}

.category-product .button {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
}

.category-product .button a {
    border: 1px solid #dfe4ee;
    background-color: #fff;
}

.category-product .button a span {
    margin-right: 0;
}

.category-product .button a:hover {
    color: #fff;
    background-color: var(--primary-color);
}

/*sticky-sm-menu*/

.sticky-sm-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 9999;
    border-top: 1px solid #4a4a4a;
    background-color: var(--secondary-color);
    -webkit-box-shadow: 0 10px 15px 8px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px 8px rgb(0 0 0 / 5%);
}

.sticky-sm-menu ul {
    display: flex;
    justify-content: space-between;
}

.sticky-sm-menu ul li {
    margin-right: 10px;
    text-align: center;
}

.sticky-sm-menu ul li:last-child {
    margin-right: 0;
}

.sticky-sm-menu ul li span {
    display: block;
}

.sticky-sm-menu ul li a {
    padding: 10px 15px;
    display: block;
}

.sticky-sm-menu ul li span {
    font-size: 14px;
    color: #aea5a5;
}

.sticky-sm-menu ul li a:hover span {
    color: #fff;
}

.sticky-sm-menu ul li span i {
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}

.slideDown,
.slideUp {
    -webkit-transition: transform 0.5s ease-out;
    -moz-transition: transform 0.5s ease-out;
    -ms-transition: transform 0.5s ease-out;
    -o-transition: transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

.slideUp {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
}

.slideDown {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*sm-categorie-menu*/

.categorie-sm {
    position: fixed;
    top: 0;
    display: none;
    left: -275px;
    width: 275px;
    height: 100%;
    z-index: 999;
    padding-bottom: 70px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 15px 8px rgb(0 0 0 / 5%);
    -moz-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px 8px rgb(0 0 0 / 5%);
}

.categorie-sm .categorie-menu-content {
    width: 275px;
    height: 100%;
    position: absolute;
    overflow-x: hidden;
}

.categorie-sm a {
    display: block;
    padding: 8px 25px;
}

.categorie-sm .sg-toggle {
    position: absolute;
    right: 0;
    width: 40px;
    height: 37px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    z-index: 9999;
    font-size: 20px;
    background-color: var(--secondary-color);
}

.categorie-sm .sg-toggle:hover {
    background-color: var(--primary-color);
}

.sidebar-active .categorie-sm {
    left: 0;
    z-index: 99999;
}

/*sm-cart*/

.sm-cart {
    position: fixed;
    top: 0;
    right: -315px;
    width: 275px !important;
    height: 100%;
    z-index: 999;
}

.cart-active .sm-cart {
    right: 0;
    z-index: 99999999;
}

.sm-cart .c-toggle {
    position: absolute;
    left: -40px;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    z-index: 9999;
    font-size: 20px;
    background-color: var(--secondary-color);
}

.sm-cart .c-toggle:hover {
    background-color: var(--primary-color);
}

.user-option.sm-cart .sg-dropdown-menu>ul>li {
    width: initial;
}

.user-option.sm-cart .remove-icon {
    right: initial;
    left: 0;
    top: 10px;
}

.sm-cart .sg-dropdown-menu {
    visibility: visible;
    opacity: 1;
    width: 100%;
    border-radius: 0;
    min-width: 100%;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.title.style-2 {
    display: flex;
    justify-content: space-between;
}

.title.style-2 a {
    color: #8b8d92;
    align-self: center;
}

.title.style-2 a:hover {
    color: var(--primary-color);
}

.base {
    position: absolute;
    left: 10px;
    top: 10px;
    color: #fff;
    background-color: #ff5252;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 999;
}

/* sg-blog-section */

.entry-content {
    color: #999;
    padding: 15px;
    align-self: center;
}

.entry-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.entry-title a {
    color: var(--secondary-color);
}

.entry-title a:hover {
    color: var(--primary-color);
}

.read-more {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.read-more:before {
    content: "\f061";
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    opacity: 0;
}

.read-more:hover:before {
    right: -15px;
    opacity: 1;
}

.read-more:hover {
    color: var(--secondary-color);
}

.sg-blog-section .sa-box {
    padding-bottom: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.sg-sitebar.sa-box {
    padding-bottom: 20px;
}

.post {
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
}

.post .entry-thumbnail img {
    width: 100%;
}

.list-view-tab .post {
    display: flex;
}

.sg-blog-section.list-view-tab .sa-box .col-md-4,
.sg-blog-section.list-view-tab .sa-box .col-lg-4 {
    width: 100%;
}

.list-view-tab .entry-thumbnail {
    min-width: 280px;
}

.widget_recent_entries li {
    display: flex;
    margin-bottom: 20px;
}

.widget.widget_recent_entries li {
    padding: 0;
}

.widget_recent_entries li .entry-thumbnail {
    width: 65px;
    min-width: 65px;
    margin-right: 10px;
}

.widget_recent_entries li .entry-thumbnail img {
    width: 100%;
}

.sg-sitebar .widget_recent_entries ul li a {
    padding: 0;
}

.media-body {
    align-self: center;
}

.media-body h5 {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: normal;
}

.media-body a {
    color: var(--secondary-color);
}

.media-body a:hover {
    color: var(--primary-color);
}

.widget.widget_recent_entries span {
    font-size: 14px;
    display: block;
    color: #999;
}

.tagcloud a {
    padding: 5px 15px;
    border-radius: 0;
    border: 1px solid #f4f4f4;
    margin-bottom: 5px;
    margin-right: 2px;
    display: inline-block;
    color: var(--secondary-color);
    font-size: 14px;
    background-color: #f4f4f4;
}

.tagcloud a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.entry-meta ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.entry-meta ul li {
    margin-right: 30px;
    font-size: 16px;
    margin-bottom: 5px;
}

.entry-meta ul li span {
    margin-right: 10px;
}

.entry-meta ul li img {
    margin-right: 10px;
}

.entry-meta ul li a {
    color: #666666;
}

.entry-meta ul li a:hover {
    color: var(--primary-color);
}

blockquote {
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0 50px;
    font-weight: 600;
    color: var(--secondary-color);
}

blockquote span {
    font-size: 20px;
    line-height: 20px;
}

.blog-details .post {
    margin-bottom: 0;
    border: 0;
}

.blog-details .entry-header {
    margin-bottom: 30px;
}

.blog-details .entry-title {
    font-size: 20px;
}

.blog-details .entry-content {
    border: 0;
    padding: 0;
}

.blog-details .entry-content #noidung {
    font-size: 17px;
}

.blog-details .entry-content p {
    color: #666;
    line-height: 30px;
    margin-bottom: 30px;
}

.entry-content h4 {
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.blog-list {
    margin-bottom: 30px;
}

.blog-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 65px;
    color: #666;
}

.blog-list li:before {
    position: absolute;
    content: "";
    left: 45px;
    top: 8px;
    width: 7px;
    height: 7px;
    background-color: #000;
    border-radius: 100%;
}

.inner-thumb {
    margin-bottom: 20px;
}

.inner-thumb .thumb {
    margin-bottom: 20px;
}

.comment-area {
    margin-bottom: 50px;
}

.comment-area h3,
.comment-form h3 {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
}

.comment-meta ul {
    display: flex;
}

.comment-meta li a {
    color: #999999;
}

.comment-meta li a:hover {
    color: var(--primary-color);
}

.comment-box .title-1 {
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.comment-box .intro {
    font-size: 14px;
    color: #8e9eae;
    font-weight: normal;
}

.comment_info p {
    margin-top: 15px;
    color: #666666;
    line-height: 30px;
    margin-bottom: 0;
}

.commenter-avatar {
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    overflow: hidden;
    background-color: #f7f5f6;
}

.comment-list li {
    overflow: initial;
    width: initial;
    margin-top: 5px;
}

.comment-list>li:last-child .children .comment_info {
    border-bottom: 0;
}

.comment_info {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.children li:last-child .comment_info {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comment-list .children {
    padding-left: 0;
}

.comment-list .children {
    margin-left: 50px;
    border-bottom: 0;
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.comment-icon ul {
    display: flex;
    margin-bottom: 10px;
}

.comment-icon ul li {
    margin-right: 10px;
    font-size: 16px;
}

.comment-icon ul li:las-child {
    margin-right: 0;
}

.comment-icon ul li a {
    color: #999;
}

.comment-icon ul li a:hover {
    color: var(--primary-color);
}

.blog-header .right-content {
    display: flex;
    justify-content: space-between;
}

.blog-header .form-control {
    margin-bottom: 0;
    height: 43px;
}

.blog-header .sg-search {
    margin-left: 30px;
    min-width: 300px;
}

.blog-header .title h1 {
    align-self: center;
}

.blog-header form {
    position: relative;
}

.blog-header form button {
    position: absolute;
    top: -1px;
    right: -1px;
    border: 0;
    height: 100%;
    color: #fff;
    width: 90px;
    font-size: 20px;
    border-radius: 0px 4px 4px 0px;
    background-color: var(--secondary-color);
}

/* recent-product */

.recent-product-slider {
    margin-left: -8px;
    margin-right: -8px;
}

.recent-product-slider .slick-slide {
    padding-left: 8px;
    padding-right: 8px;
}

.recent-product {
    position: relative;
    overflow: hidden;
}

.recent-product .product-thumb {
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    height: 140px;
    border: 1px solid #eeeeee;
    background-color: #fff;
}

.recent-product .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: rgb(0 0 0 / 70%);
    opacity: 0;
}

.recent-product:hover .overlay {
    opacity: 1;
}

.recent-product h2 {
    font-size: 12px;
    text-align: center;
}

.recent-product h2 a {
    color: #fff;
    font-size: 20px;
}

.recent-product h2 a:hover {
    color: var(--primary-color);
}

/* cta-section */

.cta-section {
    padding: 100px 0;
}

/* subscribe-section */

.subscribe-section {
    background-color: var(--secondary-color);
    padding-bottom: 15px;
}

.subscribe-text {
    display: flex;
}

.subscribe-text .icon {
    margin-right: 20px;
    font-size: 70px;
    color: #fff;
    line-height: 70px;
}

.subscribe-text .text {
    color: #fff;
    font-weight: 500;
    align-self: center;
}

.subscribe-text .text p {
    margin-bottom: 5px;
    text-transform: uppercase;
}

.subscribe-text .text span {
    font-size: 12px;
}

.subscribe-form {
    position: relative;
}

.subscribe-section input,
.subscribe-section-2 input {
    height: 50px;
    padding: 6px 20px;
    padding-left: 30px;
    border: 1px solid #e1e1e1;
    width: 100%;
    font-size: 12px;
    margin-bottom: 0;
    border-radius: 6px;
    background-color: #fff;
}

.subscribe-section button,
.subscribe-section-2 button {
    position: absolute;
    right: 4px;
    top: 4px;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    padding: 10px 40px;
    font-weight: 500;
    background-color: var(--primary-color);
}

.subscribe-section-2 {
    background-color: #eeeeee;
}

.subscribe-content ul {
    display: flex;
    margin-top: 40px;
    justify-content: center;
}

.subscribe-content ul li {
    margin-right: 20px;
}

.subscribe-content ul li:last-child {
    margin-right: 0;
}

.header-title {
    margin-bottom: 40px;
}

.header-title h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* category-section */

.category-section {
    color: #666;
}

.category-section p {
    margin-bottom: 30px;
    line-height: 25px;
}

.category-section h2 {
    font-size: 24px;
    font-weight: 500;
    color: #666;
    margin-bottom: 20px;
}

/* wishlist */

.add-to-cart .btn {
    color: #fff;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.add-to-cart .btn:hover {
    color: var(--secondary-color);
    background-color: #fff;
}

/*step-content*/

.step-content .step ul {
    display: flex;
}

.step-content .step {
    margin-bottom: 50px;
    white-space: nowrap;
    justify-content: flex-start;
    display: -ms-flexbox;
}

.step-content .title {
    border-bottom: 0;
    margin-bottom: 0;
}

.step-content .title h1 {
    font-size: 16px;
}

.step-content .table> :not(:first-child) {
    border-top: 0;
}

.step-content .table ul li {
    margin-bottom: 10px;
}

.step-content .table ul li:last-child {
    margin-bottom: 0;
}

.step-content .table .product-name {
    max-width: 250px;
    text-align: left;
}

.account-table {
    margin-top: 50px;
}

.step-content .step ul li {
    flex: 0 0 auto;
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    padding-top: 30px;
    z-index: 1;
    white-space: normal;
}

.step-content .step ul li:after {
    position: absolute;
    content: "";
    left: 50%;
    top: 0;
    width: 100%;
    height: 8px;
    background-color: #eeeeee;
}

.step-content .step ul li.active:after {
    background-color: var(--secondary-color);
}

.step-content .step ul li.active:before,
.step-content .step ul li.active+li:before {
    color: #fff;
    background-color: var(--secondary-color);
}

.step-content .step ul li:before {
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -5px;
    content: "\F012C";
    line-height: 30px !important;
    font-size: 20px !important;
    width: 30px;
    height: 30px;
    color: #eee;
    border-radius: 100%;
    display: inline-block;
    z-index: 99999;
    background-color: #eee;
    font: normal normal normal 24px/1 "Material Design Icons";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.step-content .step ul li:last-child:after {
    display: none;
}

/* about-section */

.fun-fact {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

.fun-fact h3 {
    font-size: 24px;
    font-weight: 600;
    color: #08f;
    margin-bottom: 10px;
}

.about-text h2,
.gallery-content h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.about-text {
    margin-bottom: 30px;
}

.about-text ul li {
    position: relative;
    width: 100%;
    padding-left: 20px;
    color: var(--secondary-color);
    font-size: 13px;
    margin-bottom: 10px;
}

.about-text ul li:last-child {
    margin-bottom: 0;
}

.about-text ul li:before {
    position: absolute;
    content: "\f101";
    left: 0;
    top: 0;
    font-size: 12px;
    color: var(--secondary-color);
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

/* sg-testimonial */

.sg-testimonial,
.about-section {
    overflow: hidden;
}

.testimonial-title h2 {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: 20px;
}

.testimonial-content {
    display: flex;
}

.testimonial-slider .slick-slide {
    padding-left: 5px;
    padding-right: 5px;
}

.testimonial {
    padding: 20px;
    border: 1px solid #eeeeee;
    position: relative;
    margin-bottom: 30px;
    border-radius: 4px;
    background-color: #fff;
}

.testimonial:after {
    content: "";
    position: absolute;
    border-color: transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    left: 50%;
    bottom: -40px;
    border-top: 20px solid #eeeeee;
    margin-left: -25px;
}

.testimonial:before {
    content: "";
    position: absolute;
    border-color: transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    left: 50%;
    bottom: -39px;
    z-index: 99;
    border-top: 20px solid #fff;
    margin-left: -25px;
}

.testimonial-content .testimonial-thumb {
    border-radius: 100%;
    overflow: hidden;
    min-width: 70px;
    max-width: 70px;
    height: 70px;
    margin-right: 10px;
}

.testimonial-content .testimonial-thumb img {
    width: 100%;
    height: 100%;
}

.testimonial-text h5 {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--secondary-color);
    font-weight: 500;
}

.testimonial-text h6 {
    font-size: 12px;
    text-transform: uppercase;
    color: #999999;
    font-weight: 500;
    margin-bottom: 30px;
}

.product-slider .slick-dots {
    position: absolute;
    top: -55px;
    right: 7px;
    margin-top: 0;
    border-radius: 4px;
    padding: 2px 5px;
    background-color: var(--primary-color);
}

.product-slider .slick-dots li button {
    background-color: #fff;
}

.product-slider .slick-dots li.slick-active button,
.product-slider .slick-dots li button:hover {
    background-color: #333;
}

/* sg-category */

.category-style-2 {
    border: 1px solid #eeeeee;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
}

.category-style-2 h6 {
    font-size: 14px;
    color: var(--secondary-color);
    font-weight: 500;
    margin-bottom: 20px;
}

.category-list {
    display: flex;
    justify-content: space-between;
}

.category-list ul {
    min-width: 100px;
}

.category-list ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
    font-size: 12px;
    color: var(--secondary-color);
}

.category-list ul li:last-child {
    margin-bottom: 0;
}

.category-list ul li:before {
    position: absolute;
    content: "\F0142";
    left: -8px;
    top: -8px;
    color: var(--secondary-color);
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}

.category-thumb {
    align-self: center;
    padding-left: 20px;
}

/* coupon-content */

.coupon-content {
    padding-bottom: 10px;
}

.coupon-text-thumb {
    display: flex;
    justify-content: space-between;
    background-color: var(--secondary-color);
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 4px;
}

.coupon-thumb {
    border-left: 1px dashed #fff;
    padding-left: 10px;
}

.coupon-text {
    color: #fff;
    padding-right: 5px;
}

.coupon-text h3 a {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: bold;
}

.coupon-text .btn {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 100px;
    font-size: 12px;
}

.category-list-1 ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.category-list-1 ul li {
    margin-right: 10px;
    position: relative;
}

.category-list-1 ul li:last-child {
    margin-right: 0;
}

.category-list-1 ul li:after {
    position: absolute;
    content: "";
    right: -5px;
    top: 5px;
    width: 1px;
    height: 13px;
    background-color: #333333;
}

.category-list-1 ul li:last-child:after {
    display: none;
}

.category-style-3 {
    margin-bottom: 30px;
}

.category-content-style-1 {
    border-top: 1px solid #eeeeee;
    padding-top: 30px;
    margin-top: 30px;
}

.category-content-style-1 .title {
    padding-bottom: 0;
    margin-bottom: 10px;
}

.category-content-style-1 .title h1 {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

/*sg-quick-view*/

.sg-quick-view .sg-color input[type="radio"]+label {
    width: 60px;
    height: 60px;
}

.sg-quick-view .sg-size,
.sg-quick-view .sg-color {
    margin-bottom: 0;
}

.sg-quick-view .sg-quantity .quantity .btn span {
    margin-right: 0;
}

.sg-quick-view .sg-quantity .quantity .btn {
    padding: 5px;
}

.sg-quick-view .products-details-info .buttons .btn.btn-primary {
    padding: 14px 25px;
}

.sg-quick-view .products-details-info .sg-rating ul {
    margin-left: 15px;
}

.sg-quick-view .sg-quantity {
    margin-bottom: 15px;
}

.sg-quick-view .products-details-info h3 {
    font-size: 16px;
}

.specifications table th {
    background-color: #f4f4f4 !important;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.specifications .table> :not(caption)>*>* {
    padding: 15px;
    border-bottom-width: 0;
}

.specifications .table> :not(:first-child) {
    border-top: 0;
}

#quick-view-carousel .carousel-indicators {
    position: static;
}

.quick-view-slider {
    text-align: center;
}

.sg-quick-view .products-details-info {
    padding-left: 0;
}

.quick-view-slider .carousel-item {
    border: 1px solid #eeeeee;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 30px;
}

#quick-view-carousel .carousel-indicators [data-bs-target] {
    text-indent: 0;
    width: 60px;
    min-width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 4px;
    opacity: 1;
    border: 1px solid #eeeeee;
    background-color: #fff;
}

.deal-section h2 {
    font-size: 20px;
    font-weight: 600;
}

.deal-section p strong {
    font-weight: 600;
}

/*cta-text*/

.cta-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #f1e5d9;
}

.cta-text h1 {
    font-size: 30px;
    font-weight: 600;
}

.cta-text h1 span {
    display: block;
    font-weight: bold;
    color: var(--primary-color);
}

/*product-slider-2*/

.product-slider-2 .slick-dots {
    margin-top: 0;
}

a,
button,
.carousel-indicators li,
.sg-dropdown-menu,
.sg-sitebar ul li a:after,
.switch .toggle-inside,
.sg-product .icons,
.product-footer .btn,
.slick-arrow,
.categorie-sm,
.sm-cart,
.btn.btn-primary,
.carousel-indicators [data-bs-target],
.recent-product,
.overlay,
.accordion-button:after,
.products-details-info .buttons .btn.btn-white:hover,
.add-banner img,
.category-content ul li a img,
.product-thumb img,
.category-product:before,
.view-more,
.sg-countdown,
.read-more:before,
.sg-sitebar ul>li>a:before {
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}

.custom-file {
    position: relative;
    flex: auto;
}

.upload-image {
    float: right;
    background-color: #f8f8f8;
    text-align: center;
    cursor: pointer;
    display: block;
    height: 50px;
    padding: 12px 20px;
    border-radius: 4px;
    min-width: 130px;
    margin-left: -5px;
    border: 1px solid #eeeeee;
}

.upload-image img {
    margin-right: 5px;
}

.upload-image.form-control {
    text-align: left;
    width: 100%;
    margin-left: 0;
    color: #999;
    background-color: transparent;
}

.upload-image input {
    display: none;
}

.table-responsive {
    white-space: nowrap;
    justify-content: flex-start;
    display: -ms-flexbox;
}

.table-responsive table>tbody>tr>td {
    white-space: normal;
}

.breadcrumb {
    font-size: 18px;
    color: var(--bs-body-color);
}

.breadcrumb a {
    color: var(--bs-body-color);
}

.breadcrumb a:hover {
    color: var(--foundation-primary-primary-6);
}

.vector-2-stroke {
    position: absolute;
    top: 600px;
    left: 24px;
}

.home-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    text-align: center;
    font-size: var(--extra-size);
    position: relative;
    margin-top: 100px;
}

.home-description .title-child {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 200px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    z-index: 0;
    width: 437px;
    height: 18px;
}

.home-description .h1-title {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 120%;
    font-weight: 900;
    display: inline-block;
    width: 910px;
    z-index: 1;
}

.home-description .des {
    font-size: var(--bold1-size);
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 500;
    color: var(--text-sub);
    z-index: 2;
    padding: 0 50px;
    text-align: center;
}

.home-description h1 {
    font-size: 48px;
    line-height: 120%;
    color: black;
    font-weight: 800;
}

.home-description .total {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    color: var(--blue);
}

.home-description .card,
.home-description .card1 {
    /* border-radius: var(--br-xs);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-base) 0;
    gap: var(--gap-11xs);
    background: none;
    border: none;
    color: inherit; */
}

.home-description .card1 {
    color: var(--yellow);
}

.home-description .b,
.home-description .im-trng {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 130%;
}

.home-description .im-trng {
    font-size: var(--bold-size);
    line-height: 150%;
    color: var(--text-sub);
    text-align: left;
}

#header-menu-container {
    background-color: white;
    padding-top: 20px;
    position: relative;
}

#header-menu {
    z-index: 10;
    position: relative;
    padding-top: 6px;
}

#header-menu-cloud {
    /* background: url(/web/hvo/images/bg-cloud.png) 0px 0 no-repeat; */
    background: url(/web/hvo/images/group-328.png) 0px 0 no-repeat;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 83px;
    top: 30px;
}

.cha-me-dong-hanh {
    margin-left: 10px;
}

.slogan {
    font-size: var(--font-size-sm);
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 600;
}

#muc-tieu-chuong-trinh {
    /* background: url(/web/hvo/images/group-342.svg) 0 0 no-repeat;
    margin-top: 70px;
    height: 587px; */

    margin-top: 100px;
}

#muc-tieu-chuong-trinh .group-33 {
    position: relative;
    width: 1215px;
    height: 798.26px;
    margin-right: -8px;
    margin-top: 50px;
}

#muc-tieu-chuong-trinh .overlap-14 {
    position: absolute;
    width: 1207px;
    height: 534px;
    top: 82px;
    left: 0;
}

#muc-tieu-chuong-trinh .overlap-15 {
    position: absolute;
    width: 1207px;
    height: 534px;
    top: 0;
    left: 0;
}

#muc-tieu-chuong-trinh .overlap-16 {
    position: absolute;
    width: 1207px;
    height: 437px;
    top: 0;
    left: 0;
}

#muc-tieu-chuong-trinh .mask-group-2 {
    position: absolute;
    width: 407px;
    height: 407px;
    top: 15px;
    left: 403px;
}

#muc-tieu-chuong-trinh .text-wrapper-39 {
    position: absolute;
    width: 379px;
    top: 22px;
    left: 0;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    font-style: var(--16-medium-font-style);
}

#muc-tieu-chuong-trinh .text-wrapper-40 {
    position: absolute;
    top: 22px;
    left: 830px;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    white-space: nowrap;
    font-style: var(--16-medium-font-style);
}

#muc-tieu-chuong-trinh .frame-53 {
    display: inline-flex;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: 352px;
    left: 830px;
}

#muc-tieu-chuong-trinh .group-34 {
    position: relative;
    width: 58.89px;
    height: 62.23px;
}

#muc-tieu-chuong-trinh .overlap-group-18 {
    position: relative;
    width: 59px;
    height: 62px;
}

#muc-tieu-chuong-trinh .rectangle-10 {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 0;
    left: 0;
    background-color: #f4effe;
    border-radius: 4px;
}

#muc-tieu-chuong-trinh .think {
    position: absolute;
    width: 54px;
    height: 54px;
    top: 8px;
    left: 5px;
}

#muc-tieu-chuong-trinh .text-wrapper-41 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
    white-space: nowrap;
}

#muc-tieu-chuong-trinh .frame-54 {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 350px;
    left: 0;
}

#muc-tieu-chuong-trinh .group-35 {
    height: 63.26px;
    position: relative;
    width: 59px;
}

#muc-tieu-chuong-trinh .text-wrapper-42 {
    position: relative;
    width: 271px;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
}

#muc-tieu-chuong-trinh .overlap-group-19 {
    position: relative;
    width: 59px;
    height: 63px;
}

#muc-tieu-chuong-trinh .rectangle-11 {
    background-color: #ffdab4;
    position: absolute;
    width: 51px;
    height: 51px;
    top: 0;
    left: 0;
    border-radius: 4px;
}

#muc-tieu-chuong-trinh .img-5 {
    position: absolute;
    width: 54px;
    height: 54px;
    top: 9px;
    left: 5px;
}

#muc-tieu-chuong-trinh .vector-35 {
    position: absolute;
    width: 455px;
    height: 74px;
    top: 0;
    left: 752px;
}

#muc-tieu-chuong-trinh .vector-36 {
    position: absolute;
    width: 455px;
    height: 74px;
    top: 363px;
    left: 752px;
}

#muc-tieu-chuong-trinh .text-wrapper-45 {
    position: relative;
    width: 277px;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
}


#muc-tieu-chuong-trinh .vector-37 {
    position: absolute;
    width: 455px;
    height: 74px;
    top: 0;
    left: 3px;
}

#muc-tieu-chuong-trinh .vector-38 {
    position: absolute;
    width: 455px;
    height: 74px;
    top: 363px;
    left: 3px;
}

#muc-tieu-chuong-trinh .line-2 {
    position: absolute;
    width: 5px;
    height: 108px;
    top: 426px;
    left: 607px;
}

#muc-tieu-chuong-trinh .text-wrapper-43 {
    position: absolute;
    top: 454px;
    left: 830px;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    white-space: nowrap;
    font-style: var(--16-medium-font-style);
}

#muc-tieu-chuong-trinh .text-wrapper-44 {
    position: absolute;
    width: 379px;
    top: 454px;
    left: 0;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    font-style: var(--16-medium-font-style);
}

#muc-tieu-chuong-trinh .frame-55 {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

#muc-tieu-chuong-trinh .group-36 {
    height: 63.74px;
    position: relative;
    width: 59px;
}

#muc-tieu-chuong-trinh .overlap-group-20 {
    position: relative;
    width: 59px;
    height: 64px;
}

#muc-tieu-chuong-trinh .rectangle-12 {
    background-color: #d7f4f4;
    position: absolute;
    width: 51px;
    height: 51px;
    top: 0;
    left: 0;
    border-radius: 4px;
}

#muc-tieu-chuong-trinh .img-6 {
    position: absolute;
    width: 54px;
    height: 54px;
    top: 10px;
    left: 5px;
}

#muc-tieu-chuong-trinh .frame-56 {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 0;
    left: 830px;
}

#muc-tieu-chuong-trinh .group-37 {
    height: 63.63px;
    position: relative;
    width: 59px;
}

#muc-tieu-chuong-trinh .text-wrapper-46 {
    position: relative;
    width: 221px;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
}

#muc-tieu-chuong-trinh .overlap-group-5 {
    position: relative;
    height: 64px;
}

#muc-tieu-chuong-trinh .rectangle-13 {
    background-color: var(--foundation-blueblue-50);
    position: absolute;
    width: 51px;
    height: 51px;
    top: 0;
    left: 0;
    border-radius: 4px;
}

#muc-tieu-chuong-trinh .frame-57 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 629px;
    left: 423px;
}

#muc-tieu-chuong-trinh .frame-58 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
}

#muc-tieu-chuong-trinh .text-wrapper-41 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
    white-space: nowrap;
}

#muc-tieu-chuong-trinh .text-wrapper-47 {
    position: relative;
    width: 367px;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    text-align: center;
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    font-style: var(--16-medium-font-style);
}

#muc-tieu-chuong-trinh .group-parent {}

#muc-tieu-chuong-trinh .frame-child,
#muc-tieu-chuong-trinh .rectangle-parent {
    position: relative;
}

#muc-tieu-chuong-trinh .frame-group,
#muc-tieu-chuong-trinh .group-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#muc-tieu-chuong-trinh .frame-group {
    gap: var(--gap-25xl);
    text-align: left;
    font-size: var(--bold1-size);
    margin-top: 50px;
}

.mc-tiu-chng {
    text-align: center;
    font-size: var(--extra-size);
    letter-spacing: 0.01em;
    line-height: 120%;
    font-weight: 800;
    position: relative;
}

.frame-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-25xl);
}

.frame-div,
.hnh-thnh-tr-nim-yu-thc-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.hnh-thnh-tr-nim-yu-thc-parent {
    flex: 1;
    flex-direction: column;
    gap: var(--gap-5xs);
}

.hnh-thnh,
.tip-thu-kin {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.tip-thu-kin {
    font-size: var(--regular-size);
    color: var(--text-sub);
}

.hnh-thnh {
    font-weight: 800;
}

.gip-tr-c {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 800;
}

.frame-div {
    width: 370px;
    flex-direction: row;
    gap: var(--gap-xl);
}

#muc-tieu-chuong-trinh .group-child,
#muc-tieu-chuong-trinh .group-item {
    position: absolute;
    top: 50%;
    left: -30px;
}

.group-item {
    top: 27px;
    left: 102px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 411px;
    height: 18px;
}

#uu-diem .frame-parent2,
#uu-diem .title-parent {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#uu-diem .title-parent {
    margin-top: 120px;
    position: relative;
}

#uu-diem .title1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
}

#uu-diem .title-item {
    margin: 0 !important;
    top: 27px;
    left: -15px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 305px;
    height: 18px;
    z-index: 0;
    position: absolute;
}

.l-chng-trnh,
.u-im-vt {
    letter-spacing: 0.01em;
    display: inline-block;
    text-align: center;
    font-size: var(--extra-size);
    color: var(--text-main);
    font-family: var(--regular);
}

.u-im-vt {
    position: relative;
    line-height: 120%;
    font-weight: 800;
    /* width: 664px; */
    z-index: 1;
}

.h-thng,
.l-chng-trnh,
.title1 {
    position: relative;
}

.l-chng-trnh {
    font-size: var(--bold1-size);
    line-height: 150%;
    font-weight: 500;
    color: var(--text-sub);
    width: 903px;
    height: 67px;
    flex-shrink: 0;
    z-index: 2;
    display: none !important;
}

.l-chng-trnh,
.u-im-vt {
    letter-spacing: 0.01em;
    display: inline-block;
}


#uu-diem .group-4 {
    position: relative;
    width: 1284px;
    height: 704px;
}

#uu-diem .overlap-3 {
    position: absolute;
    width: 851px;
    height: 704px;
    top: 0;
    left: 0;
}

#uu-diem .overlap-4 {
    position: absolute;
    width: 776px;
    height: 549px;
    top: 155px;
    left: 75px;
}

#uu-diem .frame-7 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 0;
    left: 0;
}

#uu-diem .frame-8 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

#uu-diem .play-button {
    position: relative;
    width: 60px;
    height: 58.66px;
}

#uu-diem .text-wrapper-8 {
    width: fit-content;
    font-weight: var(--24-bold-font-weight);
    color: #1bc3b8;
    font-size: var(--24-bold-font-size);
    letter-spacing: var(--24-bold-letter-spacing);
    line-height: var(--24-bold-line-height);
    white-space: nowrap;
    position: relative;
    font-family: var(--24-bold-font-family);
    text-align: center;
    font-style: var(--24-bold-font-style);
}

#uu-diem .frame-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px;
    position: relative;
    flex: 0 0 auto;
    background-color: #defcfa;
    border-radius: 12px;
    overflow: hidden;
}

#uu-diem .div-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

#uu-diem .text-wrapper-9 {
    width: 329px;
    margin-top: -1px;
    font-weight: 500;
    color: var(--text-sub);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
    position: relative;
    font-family: "Nunito", Helvetica;
    text-align: center;
}

#uu-diem .school-child {
    position: absolute;
    width: 418px;
    height: 396px;
    top: 153px;
    left: 358px;
}

#uu-diem .frame-9 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 0;
    left: 460px;
}

#uu-diem .img-3 {
    position: relative;
    width: 60px;
    height: 60px;
}

#uu-diem .text-wrapper-10 {
    position: relative;
    width: fit-content;
    font-family: var(--24-bold-font-family);
    font-weight: var(--24-bold-font-weight);
    color: #4f95ff;
    font-size: var(--24-bold-font-size);
    text-align: center;
    letter-spacing: var(--24-bold-letter-spacing);
    line-height: var(--24-bold-line-height);
    white-space: nowrap;
    font-style: var(--24-bold-font-style);
}

#uu-diem .frame-10 {
    flex: 0 0 auto;
    background-color: #eaf3ff;
    display: flex;
    flex-direction: column;
    width: 364px;
    align-items: center;
    gap: 24px;
    padding: 24px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

#uu-diem .text-wrapper-11 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-sub);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
}

#uu-diem .frame-11 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 440px;
    left: 0;
}

#uu-diem .frame-12 {
    flex: 0 0 auto;
    background-color: #fee9e7;
    display: flex;
    flex-direction: column;
    width: 364px;
    align-items: center;
    gap: 24px;
    padding: 24px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

#uu-diem .frame-13 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 154px;
    left: 851px;
}

#uu-diem .text-wrapper-13 {
    position: relative;
    width: fit-content;
    font-family: var(--24-bold-font-family);
    font-weight: var(--24-bold-font-weight);
    color: #fac130;
    font-size: var(--24-bold-font-size);
    text-align: center;
    letter-spacing: var(--24-bold-letter-spacing);
    line-height: var(--24-bold-line-height);
    white-space: nowrap;
    font-style: var(--24-bold-font-style);
}

#uu-diem .frame-14 {
    height: 120px;
    justify-content: center;
    background-color: #fff6df;
    display: flex;
    flex-direction: column;
    width: 364px;
    align-items: center;
    gap: 24px;
    padding: 24px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

#uu-diem .frame-15 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 440px;
    left: 920px;
}

#uu-diem .frame-16 {
    flex: 0 0 auto;
    background-color: #edeaff;
    display: flex;
    flex-direction: column;
    width: 364px;
    align-items: center;
    gap: 24px;
    padding: 24px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

#uu-diem .text-wrapper-14 {
    position: relative;
    width: fit-content;
    font-family: var(--24-bold-font-family);
    font-weight: var(--24-bold-font-weight);
    color: #7a6ad7;
    font-size: var(--24-bold-font-size);
    text-align: center;
    letter-spacing: var(--24-bold-letter-spacing);
    line-height: var(--24-bold-line-height);
    white-space: nowrap;
    font-style: var(--24-bold-font-style);
}

.frame-parent2 {
    font-size: var(--bold-size);
    color: var(--red-dark-1);
}

.frame-parent2,
.frame-parent4,
.title-parent {
    display: flex;
    justify-content: flex-start;
    gap: var(--gap-29xl);
}

.frame-parent3 {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-29xl);
}

.frame-parent3,
.idea-1-parent {
    display: flex;
    justify-content: flex-start;
}

.book-1-1-parent,
.h-thng-parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.book-1-1-parent {
    border-radius: var(--br-29xl);
    background-color: #fee9e7;
    width: 364px;
    overflow: hidden;
    flex-shrink: 0;
    padding: var(--padding-13xl) var(--padding-5xl);
    box-sizing: border-box;
    gap: var(--gap-5xl);
}

.play-button-1-parent {
    border-radius: var(--br-29xl);
    background-color: #defcfa;
    width: 364px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-13xl) var(--padding-5xl);
    box-sizing: border-box;
    gap: var(--gap-5xl);
    color: #1bc4b8;
}

.idea-1-parent {
    align-self: stretch;
    border-radius: var(--br-29xl);
    background-color: #eaf3ff;
    width: 364px;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-13xl) var(--padding-5xl);
    box-sizing: border-box;
    gap: var(--gap-5xl);
    color: #4f96ff;
}

.frame-parent4 {
    height: 317px;
    flex-direction: row;
    align-items: flex-start;
    color: #fac130;
}

.think-1-parent {
    align-self: stretch;
    border-radius: var(--br-29xl);
    background-color: #fff6e0;
    width: 364px;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-13xl) var(--padding-5xl);
    box-sizing: border-box;
    gap: var(--gap-5xl);
}

.h-thng-parent {
    align-self: stretch;
    gap: var(--gap-xs);
}

#uu-diem .frame-wrapper {
    align-self: stretch;
    border-radius: var(--br-29xl);
    background-color: #edeaff;
    width: 364px;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-start;
    padding: var(--padding-13xl) var(--padding-5xl);
    box-sizing: border-box;
    color: #7a6bd7;
}

.girl-1-1-parent {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-5xl);
}

.tri-nghim-thc {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

#uu-diem .frame-wrapper,
#uu-diem .girl-1-1-parent,
#uu-diem .think-1-parent {
    display: flex;
    justify-content: flex-start;
}

.h-thng-gio {
    margin: 0;
}

.h-thng {
    align-self: stretch;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.h-thng-gio-container {
    align-self: stretch;
    position: relative;
    font-size: var(--regular-size);
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 500;
    color: var(--text-sub);
}

.group-parent11 {
    background: url(/web/hvo/images/group-359.svg) 0 0 no-repeat;
    position: relative;
    margin-top: 100px;
    padding-top: 70px;
}

.rectangle-parent4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 0;
    box-sizing: border-box;
    gap: var(--gap-29xl);
}

.frame-child10,
.group-child3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 1441.23px;
    height: 632.68px;
}

.frame-child10 {
    margin: 0 !important;
    top: 180px;
    left: 340px;
    border-radius: var(--br-81xl);
    background-color: var(--white);
    width: 486px;
    height: 18px;
    z-index: 0;
}

.tng-quan-v {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 130%;
    font-weight: 800;
    z-index: 1;
    text-align: center;
    font-size: var(--extra-size);
    color: var(--text-main);
    font-family: var(--regular);
}

.frame-parent9 {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-21xl);
    z-index: 2;
    font-size: var(--font-size-13xl);
}

.frame-parent9,
.sign-2-parent {
    display: flex;
    justify-content: flex-start;
}

.frame-child16 {
    position: absolute;
    margin: 0 !important;
    top: 43px;
    left: 1262px;
    width: 127px;
    height: 63.73px;
    z-index: 3;
}

.cp-2-parent,
.frame-parent11,
.group-parent12,
.user-1-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.user-1-group {
    flex-direction: row;
    gap: var(--gap-xs);
}

.cp-2-parent,
.frame-parent11 {
    align-self: stretch;
    flex-direction: column;
}

.frame-parent11 {
    gap: var(--gap-base);
    text-align: left;
    font-size: var(--regular-size);
    color: var(--text-sub);
}

.cp-2-parent {
    overflow: hidden;
    gap: var(--gap-xl);
    z-index: 1;
}

.group-parent12 {
    align-self: stretch;
    border-radius: var(--br-17xl);
    background-color: var(--white);
    box-shadow: var(--effect);
    flex-direction: column;
    padding: var(--padding-41xl) var(--padding-5xl) var(--padding-13xl);
    position: relative;
    gap: var(--gap-13xl);
}

.group-parent13,
.sign-2-icon {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.group-parent13 {
    align-self: stretch;
    border-radius: var(--br-17xl);
    background-color: var(--white);
    box-shadow: var(--effect);
    width: 374px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-41xl) var(--padding-5xl) var(--padding-13xl);
    box-sizing: border-box;
    gap: var(--gap-13xl);
}

.sign-2-parent {
    align-self: stretch;
    border-radius: var(--br-17xl);
    background-color: var(--white);
    box-shadow: var(--effect);
    width: 374px;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-41xl) var(--padding-5xl) var(--padding-13xl);
    box-sizing: border-box;
    position: relative;
    gap: var(--gap-13xl);
}

.cp-1-parent,
.frame-parent10 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.frame-parent10 {
    align-items: flex-start;
    gap: var(--gap-base);
    text-align: left;
    font-size: var(--regular-size);
    color: var(--text-sub);
}

.cp-1-parent {
    width: 326px;
    align-items: center;
    gap: var(--gap-xl);
    z-index: 1;
}

.user-1,
.user-1-parent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.user-1-parent {
    align-self: stretch;
    flex-direction: row;
    gap: var(--gap-xs);
}

.user-1 {
    width: 24px;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    padding: var(--padding-11xs);
    box-sizing: border-box;
}

.v-chng-ti {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 500;
}

.vector-icon1,
.vector-icon2 {
    position: relative;
    width: 9.63px;
    height: 9.63px;
}

.vector-icon2 {
    width: 16.69px;
    height: 10.34px;
}

.frame-child11 {
    position: relative;
    width: 140px;
    height: 150.43px;
    z-index: 0;
}

.frame-child12 {
    position: absolute;
    margin: 0 !important;
    height: 25.13%;
    width: 92.92%;
    top: 0;
    right: 0.67%;
    bottom: 74.87%;
    left: 6.42%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 2;
}

.frame-child14 {
    position: absolute;
    margin: 0 !important;
    height: 42.62%;
    width: 91.84%;
    top: 0;
    right: 4.08%;
    bottom: 57.38%;
    left: 4.08%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 2;
}

.frame-child15 {
    position: absolute;
    margin: 0 !important;
    height: 24.27%;
    width: 91.5%;
    top: 0.61%;
    right: 8.33%;
    bottom: 75.13%;
    left: 0.17%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    z-index: 2;
}

.xem-chi-tit-wrapper {
    position: relative;
    border-radius: var(--br-81xl);
    background-color: var(--foundation-primary-primary-5);
    width: 244px;
    height: 56px;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 3;
    font-size: var(--bold1-size);
    color: var(--white);
}

.xem-chi-tit-wrapper-giaovien {
    font-size: var(--bold1-size);
    border-radius: var(--br-81xl);
    background-color: var(--foundation-primary-primary-5);
    margin: 0 auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: 30px;
}

.xem-chi-tit-wrapper-giaovien a {
    color: var(--white);
    font-weight: bold;
}

.h-thng {
    align-self: stretch;
    letter-spacing: 0.01em;
    line-height: 150%;
    text-align: center;
}

.xem-chi-tit {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 56px);
    letter-spacing: 0.01em;
    line-height: 150%;
}

.xem-chi-tit a {
    color: white;
}

.cp-3-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xl);
    z-index: 1;
}

.trang-chslide-1-inner {
    margin-top: 80px;
    background-color: var(--white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 120px;
    text-align: left;
    font-size: var(--bold1-size);
}

.frame-parent13 {
    position: relative;
    width: 1200px;
    height: 695px;
}

.boy-parent,
.chase-parent {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}

.boy-parent {
    top: 26px;
    left: calc(50% - 85px);
}

.chase-parent {
    top: 152px;
    left: 0;
}

.chase-icon {
    position: relative;
    width: 152.25px;
    height: 154px;
}

.tri-nghim-thc {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.abacus-parent,
.father-parent,
.stationery-parent {
    position: absolute;
    top: 156px;
    left: 915px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}

.abacus-parent,
.stationery-parent {
    top: 508px;
    left: 690px;
}

.stationery-parent {
    top: 495px;
    left: 278px;
    align-items: flex-end;
}

.group-child4 {
    position: absolute;
    top: 63.84px;
    left: 727.91px;
    width: 216.09px;
    height: 64.14px;
}

.group-child5,
.group-child6 {
    position: absolute;
    top: 53.24px;
    left: 240.24px;
    width: 213.8px;
    height: 71.23px;
}

.group-child6 {
    top: 378.35px;
    left: 970.57px;
    width: 83.33px;
    height: 159.72px;
}

.group-child7,
.group-child8 {
    position: absolute;
    top: 602.49px;
    left: 481.58px;
    width: 240.19px;
    height: 24.72px;
}

.group-child8 {
    top: 388.72px;
    left: 111.42px;
    width: 122px;
    height: 150.98px;
}

.group-parent14 {
    position: absolute;
    top: 279px;
    left: 365px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
    font-size: var(--extra-size);
}

.rectangle-parent5 {
    position: relative;
    width: 491px;
    height: 62px;
}

.p-dng-phng {
    position: relative;
    font-size: var(--bold-size);
    letter-spacing: 0.01em;
    line-height: 150%;
    display: inline-block;
    color: var(--red);
    text-align: center;
    width: 488px;
}

.group-div {
    background: url(/web/hvo/images/group-351.svg) 0 0 no-repeat;
    margin-top: 80px;
    height: 646px;
    position: relative;
}

.group-parent5,
.group-parent6 {
    display: flex;
    justify-content: flex-start;
}

.group-parent6 {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-21xl);
    font-size: var(--regular-size);
}

.group-parent5 {
    position: absolute;
    top: 105px;
    left: calc(50% - 476px);
    flex-direction: column;
    align-items: center;
    gap: var(--gap-29xl);
}

.group-inner,
.rectangle-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 646px;
}

.rectangle-div {
    top: 29px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 417px;
    height: 18px;
}

.rectangle-group {
    position: relative;
    width: 900px;
    height: 124px;
}

.nh-gi-ca {
    position: absolute;
    top: 0;
    left: 3.25px;
    letter-spacing: 0.01em;
    line-height: 130%;
    font-weight: 800;
    display: inline-block;
    text-align: center;
    font-size: var(--extra-size);
    color: var(--text-main);
    font-family: var(--regular);
}

.frame-parent5,
.frame-parent6 {
    position: relative;
    width: 296px;
    height: 255px;
}

.frame-parent6 {
    width: 300px;
}

.avatarwoman1-parent,
.c-nguyn-tng-vn-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-11xs);
}

.avatarwoman1-parent {
    position: absolute;
    top: 207px;
    left: 14px;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-5xs);
}

.frame-child2,
.group-parent7 {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 34.14px;
}

.group-parent7 {
    top: 0;
    left: 0;
    width: 289px;
    height: 195px;
    text-align: left;
    color: var(--white);
}

.avatarwoman1-parent,
.c-nguyn-tng-vn-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-11xs);
}

.avatarwoman1-parent {
    position: absolute;
    top: 207px;
    left: 14px;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-5xs);
}

.avatarwoman1-icon {
    position: relative;
    width: 48px;
    height: 48px;
}

.tri-nghim-thc {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.hiu-trng-trng {
    position: relative;
    font-size: var(--font-size-xs);
    letter-spacing: 0.01em;
    line-height: 150%;
}

.rectangle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 289px;
    height: 195px;
}

.group-child1 {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--br-13xl);
    background-color: #feb9cc;
    width: 289px;
    height: 172px;
}

.chng-trnh-dy {
    position: absolute;
    top: 24px;
    left: 20px;
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 600;
    display: inline-block;
    width: 249px;
}

.vector-icon {
    position: absolute;
    top: 170.57px;
    left: 47px;
    width: 25px;
    height: 25px;
}

.frame-parent8,
.group-parent10,
.rectangle-parent2 {
    display: flex;
    gap: var(--gap-21xl);
    flex-wrap: wrap;
    width: 1210px;
    margin: 0 auto;
}

.album_name {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    padding-top: 10px;
}

.frame-parent8,
.group-parent10 {
    /* flex-direction: column; */
}

.group-parent10 {
    align-items: center;
    gap: var(--gap-29xl);
    margin-top: 80px;
}

.mt-s-hnh {
    position: absolute;
    top: 0;
    left: 3.5px;
    letter-spacing: 0.01em;
    line-height: 130%;
    font-weight: 800;
    display: inline-block;
    width: 713px;
    text-align: center;
    font-size: var(--extra-size);
    color: var(--text-main);
    font-family: var(--regular);
}

.rectangle-icon,
.rectangle-parent1 {
    position: relative;
    width: 717px;
    height: 124px;
    margin: 0 auto;
}

.rectangle-icon {
    border-radius: var(--br-13xl);
    width: 373px;
    height: 373px;
    object-fit: cover;
}

.footer {
    /* background: url(/web/hvo/images/vector-1.svg) 0 0 no-repeat; */
    background: url(/web/hvo/images2/vector-1-1.svg) 0 0 no-repeat;
    text-align: left;
    font-size: var(--regular-size);
    color: var(--text-main);
    font-family: var(--regular);
    position: relative;
    margin-top: 100px;
    padding-top: 80px;
    min-height: 473px;
}

.footer .google_map {
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.frame-icon,
.group-child10 {
    position: absolute;
    top: 0px;
    left: 23px;
}

.footer-child {
    position: absolute;
    top: 400px;
    left: 1190px;
    width: 250px;
    height: 100px;
}

.h-thng-vn-phng-i-din-v-parent,
.left-parent,
.xem-tt-c-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.left-parent {
    flex-direction: row;
    gap: 100px;
}

.left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.h-thng-vn-phng-i-din-v-parent {
    flex-direction: column;
    /* gap: var(--gap-xs); */
    font-family: var(--font-inter);
    /* width: 100%; */
}

.logo-png-1-1-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
    font-size: var(--bold1-size);
}

.logo-png-1-11 {
    position: relative;
    width: 120px;
    height: 49.76px;
    object-fit: cover;
}

.ton-t-duy {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    display: inline-block;
    width: 472px;
}

.giy-chng-nhn,
.vn-phng-giao {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    display: inline-block;
}

.giy-chng-nhn {
    font-weight: 500;
    width: 472px;
}

.left-inner,
.vuesaxoutlinelocation-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.left-inner {
    flex-direction: column;
}

.left-inner,
.vuesaxoutlinelocation-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.vuesaxoutlinelocation-parent {
    flex-direction: row;
    gap: var(--gap-5xs);
}

.vuesaxboldarrow-down-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.giy-chng-nhn,
.vn-phng-giao {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    display: inline-block;
}

.vn-phng-giao {
    width: 492px;
    flex-shrink: 0;
}

.email,
.phone {
    position: relative;
    width: 500px;
    height: 25px;
}

.email-infohvovn {
    position: absolute;
    top: 1px;
    left: 40px;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.communication-email {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
}

.communication-fb {
    position: absolute;
    top: 3px;
}

.high-valuable-outcomes {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: bold;
    font-family: var(--regular);
    text-align: left;
}

.xem-tt-c-parent {
    flex-direction: column;
    gap: var(--gap-xs);
    color: var(--blue);
}

.xem-tt-c {
    position: relative;
    text-decoration: underline;
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 600;
    background: none;
    border: 0 none;
    color: unset;
    padding: 0;
}

.frame-child19 {
    position: relative;
    width: 362px;
    height: 240px;
}

.footer-wrapper {
    width: 75%;
    margin: 0 auto;
    display: block;
}

.map-infowindow {
    border-radius: 4px;
    box-shadow: var(--effect);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    font-size: 15px;
}

.vuesaxoutlinelocation-group {
    align-self: stretch;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}

.vuesaxoutlinelocation-icon1 {
    position: relative;
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.hvo-vit-nam {
    flex: 1;
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.a-ch-l-06-i-l-v-nguyn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    font-size: 12px;
    padding-left: 28px;
}

.pop_html {
    border-radius: var(--br-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    gap: 48px;
    font-size: 28px;
}

#exampleModal .btn-close,
#lien-he-modal .btn-close,
#thong-bao-modal .btn-close {
    background: url(/web/hvo/images/btn_pop_close.png) 0 0 no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
}

.pop_title {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    z-index: 0;
}

.pop_title .line1 {
    line-height: 120%;
    font-weight: 800;
    display: inline-block;
    text-align: center;
    color: var(--text-main);
    font-family: var(--regular);
}

.pop_title .line2 {
    font-size: var(--medium-size);
    line-height: 150%;
    font-weight: 500;
    color: var(--text-sub);
    text-align: center;
    font-family: var(--regular);
}

.a-ch-71-nguyn-th-lu-ph-wrapper,
.pop_location_item,
.pop_locations {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.pop_location_item {
    gap: var(--gap-3xs);
}

.pop_locations {
    gap: 24px;
    z-index: 1;
    text-align: left;
    font-size: var(--regular-size);
    color: var(--text-main);
    font-family: var(--regular);
    height: 624px;
    overflow-y: scroll;
}

.vuesaxoutlinelocation-parent {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}

.vuesaxboldarrow-down-icon {
    position: relative;
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.tr-s-chnh {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.a-ch-kkd-s-82-ng-67-thi-parent {
    flex-direction: column;
    padding: 0 var(--padding-13xl);
}

.a-ch-71-nguyn-th-lu-ph-wrapper {
    padding: 0 var(--padding-13xl);
}

/* Thiết lập kiểu cho thanh scrollbar dọc */
/* WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px;
    /* Chiều rộng của thanh scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #ddd;
    /* Màu của "nút kéo" (thumb) */
    border-radius: 6px;
    /* Bo góc cho "nút kéo" */
}

::-webkit-scrollbar-track {
    background-color: white;
    /* Màu của "dải đường đối tượng" (track) */
}

/* Firefox */
/* (Lưu ý: Firefox không hỗ trợ các pseudo-elements như ::-webkit-scrollbar) */
/* Dùng -moz- để tùy chỉnh cho Firefox */
* {
    scrollbar-color: #ddd #ddd;
    /* Màu của "nút kéo" và "dải đường đối tượng" */
    scrollbar-width: thin;
    /* Chiều rộng của thanh scrollbar */

    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

#exampleModal2 .pop_html {
    align-items: center;
    padding: 32px 48px;
    gap: var(--gap-13xl);
}

.frame-group-popup,
.thng-tin-ca-chng-ti-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.thng-tin-ca-chng-ti-parent {
    gap: var(--gap-xl);
    z-index: 2;
}

.thng-tin-ca {
    align-self: stretch;
    text-align: left;
    color: var(--foundation-primary-primary-6);
    font-size: var(--bold-size);
}

.frame-group-popup {
    gap: var(--gap-base);
    font-size: var(--regular-size);
    color: var(--text-main);
}

.communication-location-on-parent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
}

.vuesaxboldarrow-down-icon {
    position: relative;
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.a-ch-s,
.thng-tin-ca {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;

}

.bn-cn-h-tr-t-vn-parent,
.form-group-group {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.frame-container-popup {
    margin-top: 12px;
}

.bn-cn-h-tr-t-vn-parent,
.frame-container-popup {
    flex-direction: column;
}

.bn-cn-h-tr-t-vn-parent {
    gap: var(--gap-xl);
    z-index: 3;
    margin-top: 30px;
}

.modal-backdrop {
    z-index: 1;
}

.btn-lienhe-hoptac {
    font-size: var(--bold1-size);
    color: var(--white);
    border-radius: var(--br-81xl);
    background-color: var(--foundation-primary-primary-5);
    display: block;
    border: 0 none;
    box-shadow: 0px 4px 20px 0px rgba(255, 164, 28, 0.20);
    width: 325px;
    height: 48px;
    line-height: 48px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.little-cute-boy-proud-when-he-parent {
    position: relative;
    overflow: hidden;
    text-align: left;
    color: var(--text-sub);
}

.frame-child-about {
    position: absolute;
    top: 294px;
    left: 220px;
    border-radius: 50%;
    background-color: var(--color-white);
    width: 372px;
    height: 377px;
}

.idea-1-icon {
    position: relative;
    width: 86px;
    height: 86px;
    overflow: hidden;
    flex-shrink: 0;
}

.tm-hiu-parent {
    position: absolute;
    top: 365px;
    left: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.tm-hiu,
.v-chng-ti1 {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.tm-hiu {
    font-weight: 500;
}

.v-chng-ti1 {
    font-size: 36px;
    color: black;
}

.logo-png-1-1 {
    position: absolute;
    top: calc(50% + 170px);
    left: 310px;
    height: 78.94px;
}

.strelitzia-1-icon,
.strelitzia-2-icon {
    position: absolute;
    top: 360px;
    left: 40px;
    width: 193.73px;
    height: 222.73px;
    overflow: hidden;
    object-fit: cover;
}

.strelitzia-2-icon {
    top: 410px;
    left: 580px;
    height: 176px;
}

.group-icon-about {
    position: absolute;
    top: 540px;
    left: 0;
}

.gioi-thieu-parent {
    position: relative;
    flex-direction: column;
    align-items: center;
    color: var(--text-sub);
    display: flex;
    justify-content: flex-start;
    gap: var(--gap-5xl);
    text-align: center;
    font-size: var(--medium-size);
    font-family: var(--regular);
    margin-top: 80px;
}

.gioi-thieu,
.about-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.about-title-child {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 80px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 437px;
    height: 18px;
    z-index: 0;
}

.lch-s-hnh,
.thnh-lp-t {
    position: relative;
    letter-spacing: 0.01em;
    display: inline-block;
}

.lch-s-hnh {
    font-size: var(--extra-size);
    line-height: 120%;
    font-weight: 800;
    color: var(--text-main);
    width: 830px;
    z-index: 1;
}

.chng-ti-hot-container {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
    display: inline-block;
    width: 1004px;
    z-index: 3;
    margin-top: 20px;
}

.about-frame-parent {
    display: flex;
    justify-content: flex-start;
    gap: var(--gap-5xl);

    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-start;
    font-size: var(--regular-size);
    color: var(--text-main);
}

.pencil-1-parent {
    border-radius: var(--padding-41xl);
    background-color: var(--pink-light-1);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-3xs);
}

.pencil-1-icon {
    position: relative;
    width: 21.08px;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}

.tr-tu {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 150%;
}

.about-frame-div,
.pencil-1-container,
.pencil-1-group {
    border-radius: var(--padding-41xl);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-base) var(--padding-5xl);
    gap: var(--gap-3xs);
}

.pencil-1-group {
    background-color: var(--foundation-primary-primary-2);
}

.pencil-1-container {
    background-color: var(--color-skyblue);
}

.about-frame-div {
    background-color: #97edde;
}

.hot-air-balloon-1-1 {
    position: absolute;
    overflow: hidden;
    object-fit: cover;
    bottom: -25px;
    right: 0;
    width: 69px;
    height: 69px;
}

#sumenh-tamnhin {
    background: url(/web/hvo/images/bg_vechungtoi_1.png) 0 0 no-repeat;
    background-size: cover;
    min-height: 550px;
    margin-top: 80px;
    text-align: center;
    padding-top: 130px;
    font-family: var(--regular);
}

.gioi-thieu1,
.gioi-thieu2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--extra-size);
}

.gioi-thieu2 {
    margin-top: 55px;
}

.sumenh-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    gap: var(--gap-xs);
}

#sumenh-tamnhin .title-item {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 585px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 202px;
    height: 18px;
    z-index: 0;
}

.title-inner {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 585px;
    border-radius: var(--br-81xl);
    background-color: var(--color-skyblue);
    width: 202px;
    height: 18px;
    z-index: 0;
}

.s-mnh,
.s-mnh-ca {
    position: relative;
    letter-spacing: 0.01em;
    line-height: 120%;
    font-weight: 800;
    display: inline-block;
    width: 830px;
    z-index: 1;
}

.s-mnh-ca {
    font-size: var(--semi-size);
    line-height: 150%;
    font-weight: 600;
    color: var(--text-sub);
    width: 1004px;
    z-index: 2;
}

.top-1-n {
    position: relative;
    font-size: var(--semi-size);
    letter-spacing: 0.01em;
    line-height: 150%;
    font-weight: 600;
    color: var(--text-sub);
    z-index: 2;
}

.path2424-stroke-icon,
.path2424-stroke-icon1 {
    position: absolute;
    margin: 0 !important;
    top: 77px;
    left: 68px;
    width: 19.96px;
    height: 19.96px;
    object-fit: contain;
    z-index: 3;
}

.path2424-stroke-icon1 {
    top: 799.04px;
    left: 21px;
    z-index: 4;
}

#kinhnghiem-thanhtich {
    /* background: url(/web/hvo/images/bg-1@2x.png) 50% / contain no-repeat;
    background-size: cover;
    min-height: 550px;
    text-align: center;
    font-family: var(--regular);
    position: relative;
    padding-top: 100px; */
}

/* .little-boy-surprised-by-book-c-parent {
    position: relative;
    border-radius: 32px;
    background-color: var(--color-white);
    width: 1200px;
    height: 549px;
    overflow: hidden;
    text-align: left;
    margin: 0 auto;
}

.little-boy-surprised-by-book-c-icon {
    position: absolute;
    top: calc(50% - 238.5px);
    left: 677px;
    border-radius: var(--br-5xl);
    width: 467px;
    height: 477px;
    object-fit: cover;
}

.kinhnghiem-frame-group {
    position: absolute;
    top: 36px;
    left: 63px;
    width: 472.62px;
    height: 428px;
} */

#sumenh-thanhtich {
    position: relative;
    margin: 100px auto 0 auto;
    background: #ffffff;
    overflow: hidden;
}

.group-4 {}

.pic-8 {
    position: absolute;
    width: 147px;
    height: 147px;
    top: 0;
    left: 1005px;
    background: url(/web/hvo/images/f1a5e112-4021-4d62-8401-11c7828f459c.png) no-repeat center;
    background-size: cover;
    z-index: 58;
    overflow: hidden;
}

#sumenh-thanhtich .group-5 {
    margin-top: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

.wrapper-4,
.box-11 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    position: relative;
    min-width: 0;
    z-index: 63;
}

.sumenh-title-child {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 580px;
    border-radius: var(--br-81xl);
    background-color: var(--pink-light-1);
    width: 202px;
    height: 18px;
    z-index: 0;
}

.tamnhin-title-child {
    position: absolute;
    margin: 0 !important;
    top: 27px;
    left: 580px;
    border-radius: var(--br-81xl);
    background-color: var(--color-skyblue);
    width: 202px;
    height: 18px;
    z-index: 0;
}

.box-11 {
    margin-top: 50px;
}

.text-30 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 48px;
    font-weight: 800;
    line-height: 57.6px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.24px;
}

.text-31 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #50575c;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.12px;
    z-index: 71;
}

.img-21 {
    background: url(/web/hvo/images/daf1d55b-dc11-415d-bf64-d2a0159b7d08.png) no-repeat center;
    flex-shrink: 0;
    position: absolute;
    width: 19.955px;
    height: 19.955px;
    top: 80px;
    left: 170px;
    background-size: cover;
    transform: rotate(-27.03deg);
    z-index: 72;
}

.img-22 {
    background: url(/web/hvo/images/b174998d-1ad9-49f2-b864-edb2a3843b0b.png) no-repeat center;
    position: absolute;
    width: 34px;
    height: 27px;
    top: 380px;
    left: 120px;
    background-size: 100% 100%;
    z-index: 60;
}

.img-24 {
    background: url(/web/hvo/images/6a8b7de8-709f-4d37-a9a0-ef30dfb2e2f3.png) no-repeat center;
    position: absolute;
    width: 2.57%;
    height: 1.08%;
    top: 37.53%;
    left: 3.26%;
    background-size: 100% 100%;
    z-index: 74;
}

.pic-25 {
    position: absolute;
    width: 32px;
    height: 31px;
    top: 0;
    left: 175px;
    background: url(/web/hvo/images/c8edba00-013d-4341-996d-8a7587a095d4.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(-47.87deg);
    z-index: 77;
}

.pic-26 {
    flex-shrink: 0;
    position: absolute;
    width: 19.955px;
    height: 19.955px;
    top: 799.038px;
    left: 21.004px;
    background: url(/web/hvo/images/0263abd3-a1b6-44c6-a486-d71563d91dcc.png) no-repeat center;
    background-size: cover;
    transform: rotate(-27.03deg);
    z-index: 73;
}

.pic-27 {
    position: absolute;
    width: 34px;
    height: 27px;
    top: 356px;
    left: 87%;
    background: url(/web/hvo/images/80bf909d-5a07-4058-a08d-bfa86e5112bc.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 59;
}

.text-14 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 830px;
    height: 58px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 48px;
    font-weight: 800;
    line-height: 57.6px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.24px;
    z-index: 65;
}

.text-15 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 1004px;
    height: 72px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #50575c;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    letter-spacing: 0.12px;
    z-index: 66;
}

.wrapper-5 {
    position: relative;
    width: 1282.45px;
    height: 549px;
    margin: 210px 0 0 93px;
    z-index: 86;
}

.wrapper-a {
    position: relative;
    width: 1463.955px;
    height: 193px;
    margin: 6px 0 0 0;
    z-index: 106;
}

.group-e {
    position: relative;
    width: 1440px;
    height: 500px;
    margin: 100px 0 0 0;
    z-index: 158;
    overflow: hidden;
}

.img-1f {
    position: absolute;
    width: 1441.459px;
    height: 79px;
    top: 601px;
    left: 0;
    background: url(/web/hvo/images/d58bc56d-9a92-4969-9bf5-b7122e23b91a.png) no-repeat center;
    background-size: cover;
    z-index: 19;
}

.pic-24 {
    position: absolute;
    width: 1599.527px;
    height: 555.177px;
    top: 0;
    left: 50%;
    background: url(/web/hvo/images/a633c171-0031-4c69-8753-fb3bd17cfbda.png) no-repeat center;
    background-size: cover;
    transform: translate(-49.96%, 0) rotate(1.51deg);
    z-index: 6;
}

.img-20 {
    position: absolute;
    width: 1440px;
    height: 497px;
    top: 40px;
    left: 50%;
    background: url(/web/hvo/images/2c14eb02-4861-4e21-a13b-d1c940ee8d1e.png) no-repeat center;
    background-size: cover;
    transform: translate(-50%, 0);
    z-index: 7;
}

.img-23 {
    position: absolute;
    width: 1440px;
    height: 975px;
    top: 396px;
    left: 50%;
    background: url(/web/hvo/images/5cf994665b6e10ee7b3caeca7467708e61b0ea05.png) no-repeat center;
    background-size: cover;
    transform: translate(-50%, 0);
}

.img-24 {
    position: absolute;
    width: 37px;
    height: 45px;
    top: 435px;
    left: 3.26%;
    background: url(/web/hvo/images/6a8b7de8-709f-4d37-a9a0-ef30dfb2e2f3.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 74;
}

.pic-28 {
    position: absolute;
    width: 28px;
    height: 29px;
    top: 416px;
    left: 90%;
    background: url(/web/hvo/images/ff4f9dd3-7f83-4893-9c4d-a35c6c45aeeb.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(-43.22deg);
    z-index: 80;
}

.box-6 {
    position: absolute;
    width: 1200px;
    height: 549px;
    top: 0;
    left: 50%;
    background: #ffffff;
    transform: translate(-51.19%, 0);
    z-index: 86;
    overflow: hidden;
    border-radius: 32px;
}

.img-9 {
    position: absolute;
    width: 467px;
    height: 477px;
    top: 50%;
    left: 677px;
    background: url(/web/hvo/images/9ce0d8eb46117d7ef3c498b8f604f512c6fa4962.png) no-repeat center;
    background-size: cover;
    transform: translate(0, -50%);
    z-index: 87;
    border-radius: 24px;
}

#sumenh-thanhtich .group-6 {
    position: absolute;
    width: 472.617px;
    height: 428px;
    top: 36px;
    left: 63px;
    z-index: 88;
}

.pic-c {
    position: absolute;
    width: 2.84%;
    height: 8.15%;
    top: 15.5%;
    left: 97.16%;
    background: url(/web/hvo/images/34e9b4d2-13aa-482e-ac58-5ee2ae2c721f.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(-43.22deg);
    z-index: 79;
}

.img-b {
    position: absolute;
    width: 2.1%;
    height: 6.02%;
    top: 26.67%;
    left: 0;
    background: url(/web/hvo/images/926e2031-4975-49d4-bbc6-d18b9b3f4e27.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 81;
}

.wrapper-6 {
    position: relative;
    width: 375px;
    height: 116px;
    margin: 0 0 0 0;
    z-index: 102;
    border-radius: 100px;
}

.box-7 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* flex-wrap: nowrap; */
    gap: 20px;
    position: relative;
    width: 580px;
    margin: 36px 0 0 19px;
}

.text-16 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 356px;
    height: 116px;
    top: 0;
    left: 19px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 48px;
    font-weight: 800;
    line-height: 57.6px;
    text-align: left;
    letter-spacing: 0.24px;
    z-index: 104;
}

.wrapper-7 {
    position: absolute;
    width: 305px;
    height: 18px;
    top: 27px;
    left: 0;
    background: #ffdbe5;
    z-index: 103;
    border-radius: 100px;
}

.wrapper-8 {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 7px;
    position: relative;
    width: 500px;
    margin-bottom: 20px;
}

.pic-9,
.img-a,
.pic-a,
.pic-b {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 36px;
    background: url(/web/hvo/images/9b248d80-e108-49e9-9df5-72876003b837.png) no-repeat center;
    background-size: cover;
}

.text-17 {
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 30px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    white-space: normal;
    letter-spacing: 0.1px;
    width: 100%;
}

.gi-hng .group-7 {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 16px;
}

.gi-hng .group-7-row {
    display: flex;
}

.text-18 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 403px;
    height: 60px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    letter-spacing: 0.1px;
}

.text-19 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 406px;
    height: 60px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    letter-spacing: 0.1px;
    z-index: 98;
}

.wrapper-9 {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 16px;
    position: relative;
    z-index: 96;
}

#sumenh-thanhtich .group-7,
#sumenh-thanhtich .group-8 {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 16px;
    position: relative;
    z-index: 99;
}

.text-1a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 406px;
    height: 60px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    letter-spacing: 0.1px;
    z-index: 101;
}

.img-c {
    position: absolute;
    width: 79px;
    height: 79px;
    top: 0;
    left: 250px;
    background: url(/web/hvo/images/f01e35b9-8013-4e30-8a22-d004d0af8bf2.png) no-repeat center;
    background-size: cover;
    z-index: 106;
    overflow: hidden;
}

.pic-d {
    position: absolute;
    width: 2.75%;
    height: 25.56%;
    top: 10.14%;
    left: 9.99%;
    background: url(/web/hvo/images/aed328d3-25d6-4154-a168-4f7aa01120f2.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(-47.87deg);
    z-index: 78;
}

.pic-11 {
    position: absolute;
    width: 2.53%;
    height: 23.52%;
    top: 75%;
    left: 0;
    background: url(/web/hvo/images/adbb40de-abf8-4470-bde6-2af355f2715a.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 75;
}

.img-d {
    position: absolute;
    width: 155.755px;
    height: 144px;
    top: 49px;
    left: 1246.062px;
    background: url(/web/hvo/images/79cbf97d-12a0-423b-bcb6-7d31a76aa362.png) no-repeat center;
    background-size: cover;
    z-index: 5;
}

.pic-e {
    position: absolute;
    width: 136.913px;
    height: 113.904px;
    top: 78.389px;
    left: 1177px;
    background: url(/web/hvo/images/72ded5f5-29cb-4491-9dbe-b7c207092e7b.png) no-repeat center;
    background-size: cover;
    z-index: 4;
}

.pic-f {
    position: absolute;
    width: 136.913px;
    height: 113.904px;
    top: 78.389px;
    left: 1327.042px;
    background: url(/web/hvo/images/a6680058-b417-492c-9ff6-4b3add00e2e4.png) no-repeat center;
    background-size: cover;
    z-index: 3;
}

.pic-10 {
    position: absolute;
    width: 3.29%;
    height: 30.57%;
    top: 52.22%;
    left: 95.33%;
    background: url(/web/hvo/images/1832a742-796f-4f92-a802-d3d46e4baba3.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(26.13deg);
    z-index: 76;
}

.pic-11 {
    position: absolute;
    width: 2.53%;
    height: 23.52%;
    top: 75%;
    left: 0;
    background: url(/web/hvo/images/adbb40de-abf8-4470-bde6-2af355f2715a.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 75;
}

.img-e {
    position: absolute;
    width: 2.51%;
    height: 4.32%;
    top: 0;
    left: 97.49%;
    background: url(/web/hvo/images/88977913-cd95-4d1a-882b-9cbcd16abfcf.png) no-repeat center;
    background-size: 100% 100%;
    transform: rotate(26.13deg);
    z-index: 83;
}

.img-15 {
    position: absolute;
    width: 1.93%;
    height: 3.33%;
    top: 5.43%;
    left: 2.91%;
    background: url(/web/hvo/images/6fd3d55a-b318-46fe-a5dd-9730382aab4c.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 82;
}

.wrapper-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 56px;
    overflow: hidden;
}

.section-7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    position: relative;
    width: 1182px;
    z-index: 108;
}

.group-9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    position: relative;
    min-width: 0;
    z-index: 109;
}

.text-1b {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    width: 830px;
    height: 58px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #05121b;
    font-size: 48px;
    font-weight: 800;
    line-height: 57.6px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.24px;
    z-index: 111;
}

.text-1c {
    align-self: stretch;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 30px;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #50575c;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.1px;
    z-index: 112;
}

.box-8 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 950px;
}

#doi-ngu-giao-vien,
#news-detail-page {
    padding-top: 20px;
    background-color: white;
}

#doi-ngu-giao-vien .box-8 {
    width: 100%;
}

.box-9 {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 40px;
    position: relative;
    width: 950px;
    z-index: 114;
}


.wrapper-d {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    border-radius: 24px;
}

.section-9 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    position: relative;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    z-index: 122;
    overflow: hidden;
    border-radius: 24px;
}

.section-a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    position: relative;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    z-index: 129;
    overflow: hidden;
    border-radius: 24px;
}

.wrapper-f {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 40px;
    position: relative;
    width: 950px;
    z-index: 136;
}

.box-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    position: relative;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    z-index: 137;
    overflow: hidden;
    border-radius: 24px;
}

.wrapper-10 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    position: relative;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    z-index: 144;
    overflow: hidden;
    border-radius: 24px;
}

.box-d {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 13px;
    position: relative;
    width: 290px;
    height: 395px;
    padding: 20px 24px 20px 24px;
    background: #f8f8f8;
    z-index: 151;
    overflow: hidden;
    border-radius: 24px;
}

.pic-12 {
    flex-shrink: 0;
    position: relative;
    width: 242px;
    height: 229px;
    background-size: cover;
    z-index: 116;
    border-radius: 16px;
}

.text-1d {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    height: 24px;
    font-family: Public Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
    color: #1f1c14;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    margin-top: 5px;
}

.img-f {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    width: 80px;
    height: 12px;
    background: url(/web/hvo/images/bf930ebc-f3b5-479b-893d-a47a3af0b6a4.png) no-repeat center;
    background-size: cover;
    z-index: 120;
}

.text-1e {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}

.text-1e * {
    margin: 0;
    padding: 0;
}

.group-a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    width: 242px;
    z-index: 124;
}

.section-8 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    position: relative;
    width: 102px;
    z-index: 118;
}

.card-latest {
    flex-shrink: 0;
    z-index: 64;
    box-sizing: border-box;
    /* position: relative; */
    min-height: 243px;
    border-radius: 5px;
    box-shadow: 0 5px 4px 0 rgba(221, 221, 221, 0.25);
    border: 1px solid #d9d9d9;
    background: #ffffff;
}

.card-latest .rectangle {
    /* position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 65; */
}

.card-latest .thumnail {
    /* position: absolute; */
    width: 423px;
    height: 242px;
    /* top: 0;
    right: 0; */
    background: #fdd79d;
    /* z-index: 71; */
    overflow: hidden;
    border-radius: 4px;
    float: right;
}

.card-latest .pic {
    /* position: relative; */
    width: 311px;
    height: 235px;
    margin: 7px 0 0 59px;
    background-size: cover !important;
    z-index: 72;
}

.clearfix:before,
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.card-latest .content {
    width: 870px;
    min-height: 137px;
    float: left;
    padding: 10px 40px 0 40px;
}

.card-latest .text-3 {
    color: #50575c;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.523px;
    text-align: left;
    white-space: nowrap;
    float: left;
    margin-top: 20px;
}

.card-latest .doc-them {
    color: #fba11b;
    font-size: 14px;
    font-weight: 600;
    line-height: 16.943px;
    text-align: right;
    text-decoration: underline;
    white-space: nowrap;
    float: right;
    margin-top: 20px;
}

.giai-phap-dong-hanh-cung-con-hoc-toan-hieu-qua-ca-nha-cung-vui {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    /* position: relative; */
    color: #05121b;
    font-size: 24px;
    font-weight: 700;
    line-height: 31.2px;
    text-align: left;
    letter-spacing: 0.12px;
    /* z-index: 69; */
}

.giai-phap-dong-hanh-cung-con-hoc-toan-hieu-qua-ca-nha-cung-vui a:hover,
#news-list a:hover {
    color: var(--foundation-primary-primary-6)
}

.lam-cha-me-khong-chi-la-mot-thien-chuc-ma-da-la-nghe-doi-hoi-su-chuan-bi-ky-cang-ve-kien-thuc-ky-nang-tam-the-doi-dien-voi-nhung-thay-doi-hang-ngay-qua-cac-giai-doan-phat-trien-cua-con {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    /* position: relative; */
    color: #50575c;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    /* z-index: 70; */
}

#news-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 40px;
    /* position: relative; */
    /* z-index: 73; */

}

#news-list .news-item {
    /* position: relative; */
    width: 31%;
    height: 380px;
    z-index: 74;
    display: block;
    flex-shrink: 0;
    border-radius: 5px;
    box-shadow: 0 4px 4px 0 rgba(192, 189, 189, 0.25);
}

#news-list .news-rectangle {
    /* position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 75;
    border-radius: 5px;
    box-shadow: 0 4px 4px 0 rgba(192, 189, 189, 0.25); */
}

#news-list .news-image {
    /* position: relative; */
    /* width: 373px; */
    height: 179px;
    margin: 0 0 0 0;
    background-size: cover !important;
    z-index: 99;
}

#news-list .news-title {
    font-family: var(--regular);
    display: block;
    /* position: relative; */
    height: 30px;
    margin: 15px 15px 0 15px;
    color: #05121b;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    text-align: left;
    z-index: 76;
}

#news-list .news-title a {
    font-weight: bold;
}

#news-list .news-recap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* position: relative; */
    max-height: 110px;
    margin: 0 15px;
    color: #50575c;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: justify;
    padding-top: 22px;
    z-index: 100;
    overflow: hidden;
}

#news-list .buttons {
    padding: 15px;
    color: #50575c;
    font-size: 14px;
}

#news-list .buttons a {
    color: var(--foundation-primary-primary-6);
}

.home-description .t-otal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 8px 342px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--blue);
    margin-top: 15px;
}

.home-description .card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0px;
    position: relative;
    flex: 0 0 auto;
    margin-left: -11.5px;
    border-radius: 12px;
    overflow: hidden;
    background: none;
    border: 0 none;
    flex-direction: inherit;
}

.home-description .img-3 {
    position: relative;
    width: 60px;
    height: 60px;
}

.home-description .frame-50 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    flex: 0 0 auto;
}

.home-description .text-wrapper-36 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--36-bold-font-family);
    font-weight: var(--36-bold-font-weight);
    color: var(--white);
    font-size: var(--36-bold-font-size);
    text-align: center;
    letter-spacing: var(--36-bold-letter-spacing);
    line-height: var(--36-bold-line-height);
    white-space: nowrap;
    font-style: var(--36-bold-font-style);
}

.home-description .text-wrapper-37 {
    position: relative;
    width: fit-content;
    font-family: var(--20-medium-font-family);
    font-weight: var(--20-medium-font-weight);
    color: var(--white);
    font-size: var(--20-medium-font-size);
    letter-spacing: var(--20-medium-letter-spacing);
    line-height: var(--20-medium-line-height);
    white-space: nowrap;
    font-style: var(--20-medium-font-style);
}

.home-description .line {
    position: relative;
    width: 1px;
    height: 55px;
    object-fit: cover;
}

.home-description .card-2 {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0px;
    position: relative;
    flex: 0 0 auto;
    margin-right: -11.5px;
    border-radius: 12px;
    overflow: hidden;
}


#quy-trinh-giang-day .frame-28 {}

#quy-trinh-giang-day .overlap-6 {
    position: relative;
    width: 1200px;
    height: 775px;
    margin: 0 auto;
}

#quy-trinh-giang-day .group-11 {
    position: absolute;
    width: 1200px;
    height: 722px;
    top: 52px;
    left: 26px;
}

#quy-trinh-giang-day .frame-29 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 180px;
    left: 0;
}

#quy-trinh-giang-day .frame-30 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 54px;
    left: 515px;
}

#quy-trinh-giang-day .overlap-7 {
    position: absolute;
    width: 922px;
    height: 530px;
    top: 184px;
    left: 278px;
}

#quy-trinh-giang-day .frame-31 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 0;
    left: 637px;
}

#quy-trinh-giang-day .father {
    position: relative;
    width: 160px;
    height: 160px;
}

#quy-trinh-giang-day .overlap-group-8 {
    position: relative;
    width: 161px;
    height: 156px;
    top: -16px;
    left: -14px;
}

#quy-trinh-giang-day .ellipse-11 {
    position: absolute;
    width: 147px;
    height: 147px;
    top: 0;
    left: 0;
    background-color: #f5f2ff;
    border-radius: 73.5px;
}

#quy-trinh-giang-day .group-14 {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 16px;
    left: 21px;
}

#quy-trinh-giang-day .vector-30 {
    position: absolute;
    width: 257px;
    height: 81px;
    top: 74px;
    left: 709px;
}

#quy-trinh-giang-day .vector-31 {
    position: absolute;
    width: 214px;
    height: 71px;
    top: 81px;
    left: 240px;
}

#quy-trinh-giang-day .vector-32 {
    position: absolute;
    width: 122px;
    height: 151px;
    top: 417px;
    left: 111px;
}

#quy-trinh-giang-day .overlap-group-wrapper-2 {
    position: relative;
    width: 140px;
    height: 140px;
}

#quy-trinh-giang-day .text-wrapper-19 {
    position: relative;
    width: fit-content;
    font-family: var(--20-bold-font-family);
    font-weight: var(--20-bold-font-weight);
    color: #05121b;
    font-size: var(--20-bold-font-size);
    letter-spacing: var(--20-bold-letter-spacing);
    line-height: var(--20-bold-line-height);
    white-space: nowrap;
    font-style: var(--20-bold-font-style);
}

.gi-hng-popup-mua .modal-dialog {
    width: 700px !important;
}

.gi-hng-popup-mua .text-wrapper-19 {
    position: relative;
    flex: 1;
    font-family: var(--16-regular-font-family);
    font-weight: var(--16-regular-font-weight);
    color: var(--text-sub);
    font-size: var(--16-regular-font-size);
    letter-spacing: var(--16-regular-letter-spacing);
    line-height: var(--16-regular-line-height);
    font-style: var(--16-regular-font-style);
}

.gi-hng-popup-mua .text-wrapper-20 {
    text-align: right;
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
    flex: 1;
    white-space: nowrap;
}

.gi-hng-popup-mua .text-wrapper-22 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.1px;
    line-height: 30px;
    white-space: nowrap;
}

#quy-trinh-giang-day .overlap-group-6 {
    position: relative;
    width: 152px;
    height: 139px;
    top: -14px;
    left: -12px;
}

#quy-trinh-giang-day .ellipse-10 {
    position: absolute;
    width: 129px;
    height: 129px;
    top: 0;
    left: 0;
    background-color: #f5f2ff;
    border-radius: 64.31px;
}

#quy-trinh-giang-day .group-12 {
    position: absolute;
    width: 140px;
    height: 110px;
    top: 29px;
    left: 12px;
}

#quy-trinh-giang-day .vector-2 {
    position: absolute;
    width: 29px;
    height: 37px;
    top: 37px;
    left: 102px;
}

#quy-trinh-giang-day .vector-3 {
    position: absolute;
    width: 8px;
    height: 11px;
    top: 34px;
    left: 104px;
}

#quy-trinh-giang-day .vector-4 {
    position: absolute;
    width: 20px;
    height: 37px;
    top: 37px;
    left: 111px;
}

#quy-trinh-giang-day .vector-5 {
    position: absolute;
    width: 5px;
    height: 11px;
    top: 34px;
    left: 106px;
}

#quy-trinh-giang-day .vector-6 {
    position: absolute;
    width: 29px;
    height: 37px;
    top: 37px;
    left: 34px;
}

#quy-trinh-giang-day .vector-7 {
    position: absolute;
    width: 29px;
    height: 34px;
    top: 40px;
    left: 34px;
}

#quy-trinh-giang-day .vector-8 {
    position: absolute;
    width: 8px;
    height: 11px;
    top: 34px;
    left: 53px;
}

#quy-trinh-giang-day .vector-9 {
    position: absolute;
    width: 5px;
    height: 11px;
    top: 34px;
    left: 56px;
}

#quy-trinh-giang-day .vector-10 {
    position: absolute;
    width: 66px;
    height: 57px;
    top: 26px;
    left: 49px;
}

#quy-trinh-giang-day .vector-11 {
    position: absolute;
    width: 37px;
    height: 57px;
    top: 26px;
    left: 79px;
}

#quy-trinh-giang-day .vector-12 {
    position: absolute;
    width: 54px;
    height: 27px;
    top: 26px;
    left: 55px;
}

#quy-trinh-giang-day .vector-13 {
    position: absolute;
    width: 33px;
    height: 27px;
    top: 26px;
    left: 77px;
}

#quy-trinh-giang-day .vector-14 {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 54px;
    left: 69px;
}

#quy-trinh-giang-day .vector-15 {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 54px;
    left: 89px;
}

#quy-trinh-giang-day .vector-16 {
    position: absolute;
    width: 21px;
    height: 11px;
    top: 65px;
    left: 72px;
}

#quy-trinh-giang-day .vector-17 {
    position: absolute;
    width: 66px;
    height: 57px;
    top: 85px;
    left: 86px;
}

#quy-trinh-giang-day .vector-18 {
    position: absolute;
    width: 37px;
    height: 57px;
    top: 85px;
    left: 116px;
}

#quy-trinh-giang-day .vector-19 {
    position: absolute;
    width: 54px;
    height: 27px;
    top: 85px;
    left: 92px;
}

#quy-trinh-giang-day .vector-20 {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 113px;
    left: 106px;
}

#quy-trinh-giang-day .vector-21 {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 113px;
    left: 126px;
}

#quy-trinh-giang-day .vector-22 {
    position: absolute;
    width: 21px;
    height: 11px;
    top: 124px;
    left: 109px;
}

#quy-trinh-giang-day .vector-23 {
    position: absolute;
    width: 66px;
    height: 57px;
    top: 85px;
    left: 12px;
}

#quy-trinh-giang-day .vector-24 {
    position: absolute;
    width: 37px;
    height: 57px;
    top: 85px;
    left: 42px;
}

#quy-trinh-giang-day .vector-25 {
    position: absolute;
    width: 54px;
    height: 27px;
    top: 85px;
    left: 19px;
}

#quy-trinh-giang-day .vector-26 {
    position: absolute;
    width: 33px;
    height: 27px;
    top: 85px;
    left: 114px;
}

#quy-trinh-giang-day .group-13 {
    position: absolute;
    width: 40px;
    height: 34px;
    top: 85px;
    left: 32px;
}

#quy-trinh-giang-day .vector-27 {
    position: absolute;
    width: 21px;
    height: 11px;
    top: 124px;
    left: 35px;
}

#quy-trinh-giang-day .one {
    top: 136px;
    left: 0;
    position: absolute;
    width: 126px;
    height: 126px;
}

#quy-trinh-giang-day .one-2 {
    top: 100px;
    left: 1063px;
    position: absolute;
    width: 126px;
    height: 126px;
}

#quy-trinh-giang-day .one-3 {
    top: 597px;
    left: 973px;
    position: absolute;
    width: 126px;
    height: 126px;
}

#quy-trinh-giang-day .one-4 {
    top: 602px;
    left: 179px;
    position: absolute;
    width: 126px;
    height: 126px;
}

#quy-trinh-giang-day .one-5 {
    top: 0;
    left: 477px;
    position: absolute;
    width: 126px;
    height: 126px;
}

#quy-trinh-giang-day .overlap-8 {
    position: absolute;
    width: 686px;
    height: 407px;
    top: 123px;
    left: 90px;
}

#quy-trinh-giang-day .overlap-9 {
    position: absolute;
    width: 572px;
    height: 308px;
    top: 99px;
    left: 114px;
}

#quy-trinh-giang-day .frame-32 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 130px;
    left: 208px;
}

#quy-trinh-giang-day .overlap-group-wrapper-2 {
    position: relative;
    width: 140px;
    height: 140px;
}

#quy-trinh-giang-day .overlap-group-9 {
    position: relative;
    width: 163px;
    height: 154px;
    top: -14px;
    left: -12px;
}

#quy-trinh-giang-day .ellipse-10 {
    position: absolute;
    width: 129px;
    height: 129px;
    top: 0;
    left: 0;
    background-color: #f5f2ff;
    border-radius: 64.31px;
}

#quy-trinh-giang-day .geometry {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 14px;
    left: 23px;
}

#quy-trinh-giang-day .frame-34 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    position: absolute;
    top: 339px;
    left: 0;
}

#quy-trinh-giang-day .overlap-group-wrapper-2 {
    position: relative;
    width: 140px;
    height: 140px;
}

#quy-trinh-giang-day .text-wrapper-19 {
    position: relative;
    width: fit-content;
    font-family: var(--20-bold-font-family);
    font-weight: var(--20-bold-font-weight);
    color: #05121b;
    font-size: var(--20-bold-font-size);
    letter-spacing: var(--20-bold-letter-spacing);
    line-height: var(--20-bold-line-height);
    white-space: nowrap;
    font-style: var(--20-bold-font-style);
}

#quy-trinh-giang-day .frame-33 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

#quy-trinh-giang-day .group-15 {
    position: relative;
    width: 461px;
    height: 62px;
}

#quy-trinh-giang-day .text-wrapper-21 {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Nunito", Helvetica;
    font-weight: 800;
    color: #05121b;
    font-size: 48px;
    letter-spacing: 0.48px;
    line-height: 62.4px;
    white-space: nowrap;
}

#quy-trinh-giang-day .text-wrapper-22 {
    position: relative;
    width: fit-content;
    font-family: var(--24-medium-font-family);
    font-weight: var(--24-medium-font-weight);
    color: var(--text-sub);
    font-size: var(--24-medium-font-size);
    text-align: center;
    letter-spacing: var(--24-medium-letter-spacing);
    line-height: var(--24-medium-line-height);
    white-space: nowrap;
    font-style: var(--24-medium-font-style);
}

#quy-trinh-giang-day .vector-28 {
    position: absolute;
    width: 83px;
    height: 160px;
    top: 0;
    left: 489px;
}

#quy-trinh-giang-day .vector-29 {
    position: absolute;
    width: 240px;
    height: 25px;
    top: 224px;
    left: 0;
}

#quy-trinh-giang-day .text-wrapper-20 {
    position: relative;
    width: 295px;
    font-family: var(--20-bold-font-family);
    font-weight: var(--20-bold-font-weight);
    color: #05121b;
    font-size: var(--20-bold-font-size);
    letter-spacing: var(--20-bold-letter-spacing);
    line-height: var(--20-bold-line-height);
    font-style: var(--20-bold-font-style);
}

#news-detail h1 {
    font-size: 32px;
    padding-bottom: 20px;
}

#news-detail .news-description,
.teacher-profile .news-description {
    font-size: 17px;
}

.sn-phm-them-vao-gio .frame {}

.sn-phm-them-vao-gio .overlap-group {
    position: relative;
    height: 589px;
    text-align: center;
}

.sn-phm-them-vao-gio .group {
    position: absolute;
    height: 552px;
    top: 0;
    left: 0;
}

.sn-phm-them-vao-gio .STARS {
    position: absolute;
    width: 1291px;
    height: 204px;
    top: 186px;
    left: 116px;
}

.sn-phm-them-vao-gio .g {
    position: absolute;
    width: 69px;
    height: 56px;
    top: 209px;
    left: 1117px;
}

.sn-phm-them-vao-gio .img {
    position: absolute;
    width: 1440px;
    height: 87px;
    top: 502px;
    left: 0;
}

.sn-phm-them-vao-gio .frame-wrapper {}

.sn-phm-them-vao-gio .div {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-them-vao-gio .text-wrapper {
    position: relative;
    width: 830px;
    margin-top: -1px;
    font-family: var(--36-bold-font-family);
    font-weight: var(--36-bold-font-weight);
    color: var(--text-main);
    font-size: var(--36-bold-font-size);
    text-align: center;
    letter-spacing: var(--36-bold-letter-spacing);
    line-height: var(--36-bold-line-height);
    font-style: var(--36-bold-font-style);
}

.sn-phm-them-vao-gio .p {
    position: relative;
    width: fit-content;
    font-family: var(--16-medium-font-family);
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    text-align: center;
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    white-space: nowrap;
    font-style: var(--16-medium-font-style);
}

.sn-phm-them-vao-gio #products {
    margin-top: -340px;
}

.sn-phm-them-vao-gio #products .frame-4 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
}

.sn-phm-them-vao-gio #products .list-book {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
}

.sn-phm-them-vao-gio #products .book {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px;
    position: relative;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: var(--3);
    width: 22%;
}

.sn-phm-them-vao-gio #products .screenshot {
    position: relative;
    width: 150px;
    height: 200px;
    object-fit: cover;
}

.sn-phm-them-vao-gio #products .frame-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.sn-phm-them-vao-gio #products .text-wrapper-6 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-main);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    min-height: 70px;
}

.sn-phm-them-vao-gio #products .text-wrapper-7 {
    position: relative;
    align-self: stretch;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.1px;
    line-height: 30px;
}

.sn-phm-them-vao-gio #products .button-icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-them-vao-gio #products .vuesax-outline-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    background-color: var(--foundationprimaryprimary-1);
    border-radius: 8px;
    overflow: hidden;
}

.sn-phm-them-vao-gio #products .vuesax-outline-wrapper button,
#product-detail .vuesax-outline-wrapper button {
    background: none;
    border: 0 none;
    display: block;
    width: 100%;
    height: 100%;
}

.sn-phm-them-vao-gio #products .vuesax-outline {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 12px;
    left: 13px;
}

.sn-phm-them-vao-gio #products .frame-6 {
    display: flex;
    width: 162px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 86px;
    position: relative;
    background-color: var(--foundation-primaryprimary-5);
    border-radius: 100px;
    overflow: hidden;
}

.sn-phm-them-vao-gio #products .text-wrapper-8 {
    position: relative;
    width: fit-content;
    margin-left: -41px;
    margin-right: -41px;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    white-space: nowrap;
}

#cart {
    margin-top: 100px;
    text-align: center;
}

#cart .text-wrapper-3 {
    font-family: var(--36-bold-font-family);
    font-weight: var(--36-bold-font-weight);
    color: var(--text-main);
    font-size: var(--36-bold-font-size);
    text-align: center;
    letter-spacing: var(--36-bold-letter-spacing);
    line-height: var(--36-bold-line-height);
    white-space: nowrap;
    font-style: var(--36-bold-font-style);
    padding-bottom: 60px;
}

#cart .text-wrapper-empty {
    font-family: var(--20-medium-font-family);
    font-weight: var(--20-medium-font-weight);
    color: var(--text-main);
    font-size: var(--20-medium-font-size);
    letter-spacing: var(--20-medium-letter-spacing);
    line-height: var(--20-medium-line-height);
    white-space: nowrap;
    font-style: var(--20-medium-font-style);
    margin-top: 30px;
}

.nav-item .cart {
    background-image: url(/web/hvo/img-cart/vuesax-outline-shopping-cart-1@2x.png);
    width: 32px;
    height: 32px;
    background-size: 100% 100%;
    display: block;
    margin-left: 10px;
    margin-top: 5px;
}

.nav-item .cart .element-wrapper {
    position: relative;
    width: 25px;
    height: 25px;
    top: -11px;
    left: 2px;
    background-color: var(--foundation-primaryprimary-6);
    border-radius: 10px;
    text-align: center;
    line-height: 23px;
    color: white;
    font-size: 12px;
}

.san-pham-chi-tiet {
    margin-top: 100px;
}

.sn-phm-chi-tit-sch .frame-3 {
    display: inline-flex;
    align-items: flex-start;
    gap: 40px;
}

.sn-phm-chi-tit-sch .image-panel {
    /* flex-direction: column; */
    /* width: 580px; */
    width: 650px;
    gap: 24px;
    display: flex;
    align-items: center;
    position: relative;
}

.sn-phm-chi-tit-sch .frame-4 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .frame-5 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .button-icon {
    display: flex;
    width: 308px;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .vuesax-outline-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    background-color: var(--foundationprimaryprimary-1);
    border-radius: 8px;
    overflow: hidden;
}

.sn-phm-chi-tit-sch .frame-7 {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 86px;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: var(--foundation-primaryprimary-5);
    border-radius: 100px;
    overflow: hidden;
}

.sn-phm-chi-tit-sch .vuesax-outline {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 12px;
    left: 13px;
}

.sn-phm-chi-tit-sch .text-wrapper-11 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .row-productdetail {
    display: flex;
    flex-direction: column;
    width: 500px;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch h1 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 28px;
    letter-spacing: 0.14px;
    line-height: 42px;
    /* white-space: nowrap; */
}

.sn-phm-chi-tit-sch .frame-6 {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    align-self: stretch;
    /* width: 100%; */
    width: 380px;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .price {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.sn-phm-chi-tit-sch .text-wrapper-3 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: var(--neutral-200);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
    text-decoration: line-through;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .text-wrapper-4 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--red);
    font-size: 24px;
    letter-spacing: 0;
    line-height: 36px;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .label {
    display: inline-flex;
    gap: 16px;
    flex: 0 0 auto;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sn-phm-chi-tit-sch .row-2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .text-wrapper-5 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
    letter-spacing: 0.07px;
    line-height: 21px;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .text-wrapper-6 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--14-regular-font-family);
    font-weight: var(--14-regular-font-weight);
    color: #9d9ea2;
    font-size: var(--14-regular-font-size);
    letter-spacing: var(--14-regular-letter-spacing);
    line-height: var(--14-regular-line-height);
    white-space: nowrap;
    font-style: var(--14-regular-font-style);
}

.sn-phm-chi-tit-sch .div-2 {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .text-wrapper-7 {
    font-weight: var(--16-medium-font-weight);
    color: var(--text-main);
    font-size: var(--16-medium-font-size);
    text-align: center;
    letter-spacing: var(--16-medium-letter-spacing);
    line-height: var(--16-medium-line-height);
    position: relative;
    width: fit-content;
    font-family: var(--16-medium-font-family);
    white-space: nowrap;
    font-style: var(--16-medium-font-style);
}

.sn-phm-chi-tit-sch .row-3 {
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .img-wrapper {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    border-radius: 4px;
}

.sn-phm-chi-tit-sch .div-wrapper {
    display: flex;
    width: 36px;
    height: 36px;
    gap: 12px;
    background-color: #e3e3e3;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sn-phm-chi-tit-sch .text-wrapper-8 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: var(--neutral-900);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 21px;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .text-wrapper-8 .input-text,
.cart-item .input-text {
    width: 100%;
    border: 0 none;
    background: none;
    text-align: center;
}

.sn-phm-chi-tit-sch .img-4 {
    position: relative;
    width: 20px;
    height: 20px;
}

.sn-phm-chi-tit-sch .list {
    display: flex;
    flex-direction: column;
    width: 580px;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    position: relative;
    flex: 0 0 auto;
    background-color: var(--neutral-0);
    border-radius: 12px;
    border: 1px solid;
    border-color: #d9d9d9;
}

.sn-phm-chi-tit-sch .row-4 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.sn-phm-chi-tit-sch .img-3 {
    position: relative;
    width: 32px;
    height: 32px;
}

.sn-phm-chi-tit-sch .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.sn-phm-chi-tit-sch .text-wrapper-9 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: #9d9ea2;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 18px;
    white-space: nowrap;
}

.sn-phm-chi-tit-sch .text-wrapper-10 {
    position: relative;
    width: 473px;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 21px;
}

.sn-phm-chi-tit-sch .img-parent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 165px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #f7f7f7;
    border-radius: 4px;
}

.sn-phm-chi-tit-sch .text-wrapper-14 {
    font-family: var(--24-bold-font-family);
    font-weight: var(--24-bold-font-weight);
    color: var(--text-main);
    font-size: var(--24-bold-font-size);
    letter-spacing: var(--24-bold-letter-spacing);
    line-height: var(--24-bold-line-height);
    font-style: var(--24-bold-font-style);
    margin-top: 50px;
}

.cart-content {
    margin-top: 60px;
    padding-bottom: 200px;
}

.gi-hng .text-wrapper-9 {
    font-family: var(--36-bold-font-family);
    font-weight: var(--36-bold-font-weight);
    color: var(--text-main);
    font-size: var(--36-bold-font-size);
    text-align: center;
    letter-spacing: var(--36-bold-letter-spacing);
    line-height: var(--36-bold-line-height);
    white-space: nowrap;
    font-style: var(--36-bold-font-style);
}

.gi-hng .group-5 {}

.gi-hng .group-6 {
    display: flex;
    height: 24px;
}

.gi-hng .text-wrapper-10 {
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
    text-align: left;
    flex: 3;
}

.gi-hng .text-wrapper-11 {
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
    flex: 1;
    text-align: left;
}

.gi-hng .text-wrapper-12 {
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
    flex: 1;
    text-align: left;
}

.gi-hng .frame-10 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
}

.gi-hng .line {
    width: 100%;
    height: 1px;
    margin-top: -1px;
    object-fit: cover;
}

.gi-hng .group-7 {}

.gi-hng .frame-11 {
    width: 500px;
    gap: 24px;
}

.gi-hng .frame-12 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    flex-grow: 1;
}

.gi-hng .screenshot {
    width: 60px;
    object-fit: cover;
}

.gi-hng .title {
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 20.8px;
    border: 0 none;
    display: unset;
    margin: 0;
    padding: 0;
    text-align: left;
}

.gi-hng a:hover .title {
    color: var(--foundation-primary-primary-6);
}

.gi-hng .row {
    text-align: left;
}

.gi-hng .label {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    border-radius: 4px;
    padding: 0;
}

.gi-hng .label-2 {
    display: flex;
    width: 55px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    background-color: #e3e3e3;
    border-radius: 4px;
}

.gi-hng .img-3 {
    position: relative;
    width: 16px;
    height: 16px;
}

.gi-hng .text-wrapper-13 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: var(--text-main);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
}

.gi-hng .price {
    width: 250px;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--text-main);
    font-size: 19px;
    letter-spacing: 0.1px;
    line-height: 30px;
}

#cart .button-remove {
    border: 0 none;
    background: none;
    width: 35px;
    height: 35px;
    background: url(/web/hvo/img-cart/pajamas-remove-8.svg) 0 0 no-repeat;
}

#cart .button-remove:hover {
    background: url(/web/hvo/img-cart/pajamas-remove-3.svg) 0 0 no-repeat;
}

.gi-hng .order {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 368px;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 24px 24px;
    background-color: #f1f1f1;
    border-radius: 8px;
    overflow: hidden;
}

.gi-hng .text-wrapper-14 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 20px;
    letter-spacing: 0.1px;
    line-height: 30px;
}

.gi-hng .tong-thanh-toan {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
    margin-right: -5px;
}

.gi-hng .rectangle {
    position: absolute;
    width: 373px;
    height: 8px;
    top: 0;
    left: 0;
    background-color: #fcb244;
}

.gi-hng .button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 325px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 86px;
    position: relative;
    margin-right: -5px;
    background-color: var(--foundation-primaryprimary-5);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 4px 20px #ffa31c33;
    cursor: pointer;
}

.gi-hng .field {
    display: flex;
    width: 325px;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.gi-hng .text-wrapper-15 {
    position: relative;
    flex: 1;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: var(--text-main);
    font-size: 16px;
    letter-spacing: 0.08px;
    line-height: 24px;
}

.gi-hng .text-wrapper-16 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 16px;
    text-align: right;
    letter-spacing: 0.08px;
    line-height: 24px;
    width: 168px;
}

.gi-hng .price-ship {
    font-size: 14px;
}

.gi-hng .text-wrapper-17 {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    white-space: nowrap;
}

.thongbaoship {
    font-size: 15px;
    color: var(--foundation-primary-primary-6);
}

.gi-hng-popup-mua .receipt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: 15px 48px;
    border-radius: 12px;
    overflow: hidden;
}

.gi-hng-popup-mua .group-8 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 19px;
}

.gi-hng-popup-mua .header-2 {
    gap: 26.65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gi-hng-popup-mua .success-icon {
    position: relative;
    width: 94px;
    height: 94px;
    background-color: #e1fff2;
    border-radius: 47px;
}

.gi-hng-popup-mua .vuesax-bold-tick {
    position: absolute;
    width: 54px;
    height: 54px;
    top: 20px;
    left: 20px;
}

.gi-hng-popup-mua .header-text {
    gap: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gi-hng-popup-mua .text-wrapper-18 {
    position: relative;
    align-self: stretch;
    margin-top: -1.67px;
    font-family: "Nunito", Helvetica;
    font-weight: 700;
    color: var(--text-main);
    font-size: 28px;
    text-align: center;
    letter-spacing: 0.14px;
    line-height: 33.6px;
}

.gi-hng-popup-mua .ch-ng-t-i-c-m-n-b-n {
    position: relative;
    align-self: stretch;
    font-family: "Nunito", Helvetica;
    font-weight: 400;
    color: var(--text-sub);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.07px;
    line-height: 21px;
}

.gi-hng-popup-mua .payment-details {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    display: flex;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gi-hng-popup-mua .button-2 {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 325px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 86px;
    position: relative;
    background-color: var(--foundation-primaryprimary-5);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 4px 20px #ffa31c33;
    cursor: pointer;
}

.gi-hng-popup-mua .details-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    justify-content: space-between;
}

.gi-hng-popup-mua .line-4 {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 5px;
}

.gi-hng-popup-mua .amount-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 23.32px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.gi-hng-popup-mua .payment-detail {
    display: flex;
    width: 100%;
}

.gi-hng-popup-mua .text-wrapper-21 {
    position: relative;
    flex: 1;
    margin-top: -1.67px;
    font-family: var(--20-regular-font-family);
    font-weight: var(--20-regular-font-weight);
    color: var(--text-sub);
    font-size: var(--20-regular-font-size);
    letter-spacing: var(--20-regular-letter-spacing);
    line-height: var(--20-regular-line-height);
    font-style: var(--20-regular-font-style);
}

.gi-hng-popup-mua .text-wrapper-23 {
    position: relative;
    align-self: stretch;
    font-family: var(--16-regular-font-family);
    font-weight: var(--16-regular-font-weight);
    color: var(--foundation-primaryprimary-6);
    font-size: var(--16-regular-font-size);
    letter-spacing: var(--16-regular-letter-spacing);
    line-height: var(--16-regular-line-height);
    font-style: var(--16-regular-font-style);
}

.kim-tra-n-hng-nhp-m {}

.kim-tra-n-hng-nhp-m form {
    display: flex;
}

.kim-tra-n-hng-nhp-m #txtOrderId {
    flex: 1;
    color: black;
    background: none;
    border: 0 none;
    padding-left: 20px;
}

.kim-tra-n-hng-nhp-m .input {
    width: 800px;
    height: 64px;
    padding: 8px;
    border-radius: 80px;
    border: 1px solid;
    border-color: #dddddd;
    margin: 100px auto 0 auto;
}

.kim-tra-n-hng-nhp-m .button {
    all: unset;
    box-sizing: border-box;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--foundation-primaryprimary-5);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0px 4px 20px #ffa31c33;
    color: white;
    width: 190px;
    text-align: center;
    cursor: pointer;
}

.kim-tra-n-hng-nhp-m .group {
    width: 312px;
    height: 258px;
    margin: 100px auto 0 auto;
}

.kim-tra-n-hng-nhp-m .hinh-minh-hoa {
    margin: 100px auto 0 auto;
    text-align: center;
}

.kim-tra-n-hng-nhp-m .text-wrapper-13 {
    font-family: var(--20-medium-font-family);
    font-weight: var(--20-medium-font-weight);
    color: var(--text-main);
    font-size: var(--20-medium-font-size);
    letter-spacing: var(--20-medium-letter-spacing);
    line-height: var(--20-medium-line-height);
    white-space: nowrap;
    font-style: var(--20-medium-font-style);
    margin-top: 30px;
}

.kim-tra-n-hng-kt-qu .stepper-vertical {
    width: 880px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    margin-top: 70px;
}

.kim-tra-n-hng-kt-qu .step-text-vertical {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
}

.kim-tra-n-hng-kt-qu .step-trail {
    width: 50px;
    position: relative;
    height: 32px;
}

.kim-tra-n-hng-kt-qu .rect {
    position: relative;
    height: 2px;
    top: 15px;
    background-color: var(--text-caption);
}

.kim-tra-n-hng-kt-qu .step-symbol {
    position: relative;
    width: 32px;
    height: 32px;
}

.kim-tra-n-hng-kt-qu .img-wrapper {
    position: relative;
    height: 32px;
    background-color: var(--light);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid;
    border-color: var(--text-caption);
    text-align: center;
    vertical-align: middle;
}

.kim-tra-n-hng-kt-qu .img-wrapper-active {
    border-color: var(--foundation-primaryprimary-6);
}

.kim-tra-n-hng-kt-qu .img-3 {
    width: 24px;
    height: 24px;
}

.kim-tra-n-hng-kt-qu .img-3-step2 {
    width: 32px;
    height: 32px;
}

.kim-tra-n-hng-kt-qu .icon {
    position: relative;
    height: 32px;
    background-color: var(--light);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid;
    border-color: var(--foundation-primaryprimary-6);
}

.kim-tra-n-hng-kt-qu .text {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 600;
    color: var(--foundation-primaryprimary-6);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.kim-tra-n-hng-kt-qu .p {
    position: relative;
    width: fit-content;
    font-family: "Nunito", Helvetica;
    font-weight: 500;
    color: var(--text-caption);
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.08px;
    line-height: 24px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.kim-tra-n-hng-kt-qu .text-step2 {
    color: var(--foundation-primaryprimary-6);
}

.teacher-profile h1.card-title {
    font-size: 32px;
}

.teacher-profile .teacher-infos {
    line-height: 28px;
}

#thu-vien-anh {
    background: white;
}

.album_item {
    max-width: 375px;
}