/* fonts */
@font-face {
    font-family: "FAS";
    src: url("../font-awesome/fonts/fontawesome-webfont.ttf");
}

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro/MYRIADPRO-REGULAR.OTF");
}

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro/MYRIADPRO-BOLD.OTF");
    font-weight: bold;
}

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro/MYRIADPRO-IT.OTF");
    font-style: italic;
}

@font-face {
    font-family: "SVNBango";
    src: url("../fonts/SVN/SVN-Bango.otf");
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "UTMEdwardian";
    src: url("../fonts/UTM/UTM.html\ EdwardianKT_1.ttf");
}

@font-face {
    font-family: "UTMEdwardian";
    src: url("../fonts/UTM/UTM.html\ EdwardianB_1.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "RobotoBlack";
    src: url("../fonts/Roboto/black/Roboto-Black.ttf");
}

@font-face {
    font-family: "RobotoBlack";
    src: url("../fonts/Roboto/black/Roboto-BlackItalic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "RobotoLight";
    src: url("../fonts/Roboto/light/Roboto-Light.ttf");
}

@font-face {
    font-family: "RobotoLight";
    src: url("../fonts/Roboto/light/Roboto-LightItalic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "RobotoMedium";
    src: url("../fonts/Roboto/medium/Roboto-Medium.ttf");
}

@font-face {
    font-family: "RobotoMedium";
    src: url("../fonts/Roboto/medium/Roboto-MediumItalic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "RobotoThin";
    src: url("../fonts/Roboto/thin/Roboto-Thin.ttf");
}

@font-face {
    font-family: "RobotoThin";
    src: url("../fonts/Roboto/thin/Roboto-ThinItalic.ttf");
    font-style: italic;
}

:root {
    --primaryFont: "RobotoLight";
    --secondaryFont: "Roboto";
    --thirdFont: "RobotoMedium";
    --titleFont: "Roboto";
    --titleFont2: "Roboto";
    --titleFont3: "RobotoBlack";
    --titleFont4: "RobotoMedium";
    --buttonFont: "RobotoMedium";
    --navFontPrimary: "Roboto";
    --formFont: "RobotoThin";
}



/* CSS Document */


/* @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap&subset=vietnamese"); */


/* set up */

:root {
    --primarycolor: #c7111b;
    --primarycolor25: rgba(199, 17, 26, 0.25);
    --secondarycolor: #000;
    --darkColor: #000;
    --lightColor: #fff;
    --linkColor: #000;
    --linkHoverColor: #c7111b;
    --navBackground: #c7111b;
    --navColor: #fff;
    --navActiveColor: #fff;
}

body {
    font-family: var(--primaryFont), sans-serif;
    font-size: 14px;
    color: var(--secondarycolor);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-position: center;
    background-size: contain;
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--linkHoverColor);
}

.md-none {
    display: none;
}

.md-block {
    display: block;
}

.logo img {
    height: 60px;
}

.title {
    color: var(--primarycolor);
    font-family: var(--titleFont);
    margin-bottom: 15px;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
}

.title.has-border {
    border-bottom: 1px solid var(--primarycolor);
}

.title.has-decoration {
    position: relative;
    /* padding-top: 6rem; */
    background-image: url("../images/title-decoration.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 85px;
    background-position: center left;
    color: var(--secondarycolor);
    text-transform: uppercase;
}

.title.has-decoration .icon-decoration {
    position: absolute;
    top: 25px;
    left: 23px;
    width: 35px;
    height: 35px;
}

.title.has-decoration span {
    position: absolute;
    top: 30px;
    left: 80px;
}

.noi-dung {
    font-family: var(--primaryFont);
}

.btn-readmore {
    color: var(--lightColor);
    padding: 0.6rem 1rem;
    border-radius: 50px;
    text-transform: uppercase;
    font-family: var(--buttonFont);
    font-weight: bold;
    display: inline-block;
    background: linear-gradient(175deg, rgba(225, 0, 25, 1) 0%, rgba(229, 53, 53, 1) 36%, rgba(249, 127, 127, 1) 65%, rgba(255, 197, 197, 1) 100%);
}

.btn-readmore:hover {
    color: var(--lightColor);
    background: linear-gradient(355deg, rgba(225, 0, 25, 1) 0%, rgba(229, 53, 53, 1) 36%, rgba(249, 127, 127, 1) 65%, rgba(255, 197, 197, 1) 100%);
}

.btn-dk {
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
    text-transform: uppercase;
}

.well a {
    color: #000;
}

header {
    background-color: var(--secondarycolor);
    color: var(--primarycolor);
    position: relative;
    padding: 0.5rem 0;
    z-index: 2;
    display: none;
}

header .mxh-header a {
    color: var(--primarycolor);
    padding-left: 0.5rem;
}

section {
    position: relative;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.thong-tin {
    font-family: var(--primaryFont);
}

.thong-tin>*:last-child {
    margin: 0;
}

.bg-primary {
    background-color: var(--primarycolor) !important;
}

.bg-secondary {
    background-color: var(--secondarycolor) !important;
}

.text--primary {
    color: var(--primarycolor) !important;
}

.text--secondary {
    color: var(--secondarycolor) !important;
}

.btn-cart {
    color: var(--secondarycolor);
    font-size: 2.8rem;
}

.hotline-label {
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.slogan {
    font-size: 16px;
    margin: 0;
}

.img-bo-cong-thuong {
    height: 40px;
}

.box-visited>span {
    padding: 0 0.5rem;
    border-right: 1px solid var(--lightColor);
}

.box-visited>span:last-child {
    border: 0;
}

.map iframe {
    height: 100%;
}


/* End set up */


/* pagination-page */

.pagination-page {
    text-align: center;
}

.pagination-page>span,
.pagination-page a {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    color: var(--primarycolor);
    font-size: 16px;
}

.pagination-page a:first-child,
.pagination-page a:last-child {
    background-color: var(--lightColor);
    border-radius: 50%;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    color: var(--primarycolor);
}

.pagination-page a:hover,
.pagination-page>span {
    color: #ccc;
}

.pagination-page a:hover {
    text-decoration: underline;
}


/* End pagination-page */


/* breadcrumb */

.breadcrumb {
    float: right;
    border-bottom: none;
    margin-top: -40px;
    background-color: transparent;
    padding: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.breadcrumb>li a {
    color: #868282;
}

.breadcrumb .breadcrumb-item.active span {
    color: var(--primarycolor);
    font-weight: bold;
}


/* End breadcrumb */


/* general */

.ten-cong-ty {
    color: var(--lightColor);
    text-transform: uppercase;
    text-align: center;
    font-family: var(--primaryFont);
    margin: 0;
    padding: 0;
    font-weight: bold;
    letter-spacing: -0.1rem;
    font-size: 1.6rem;
    margin-top: 0.6rem;
}

.hotline {
    color: var(--secondarycolor);
    margin: 0;
}

.hotline span {
    font-weight: bold;
    font-size: 26.4px;
}

.email {
    color: var(--secondarycolor);
    margin: 0;
}

.bg-red {
    background-color: #e70200 !important;
}

.widget-container a {
    color: var(--secondarycolor);
    font-size: 1.1rem;
    margin-left: 0.5rem;
}


/* End general */


/* search-form */

.search-form {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    /* border: 1px solid; */
    border-radius: 5px;
    padding: 5px;
    background-color: var(--lightColor);
    box-shadow: 0 0 3px;
}

.search-form input:focus,
.search-form input {
    outline: 0;
    box-shadow: none;
    border-radius: 5px;
    background-color: #fff;
    color: var(--primarycolor);
    height: 30px;
    border-color: var(--primarycolor);
}

.search-form input::placeholder {
    color: var(--primarycolor);
    font-size: 16px;
    font-weight: normal;
}

.search-form .btn-search {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    padding: 0;
    color: var(--primarycolor);
    font-size: 1rem;
}


/* End search-form */


/* nav-custom */

.nav-custom {
    color: var(--navColor);
    background-color: var(--navBackground);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    box-shadow: 1px 1px 6px var(--primarycolor);
}

.nav-custom .nav-item {
    display: flex;
    align-items: center;
}

.nav-custom .nav-item .nav-link,
.nav-custom .navbar-brand {
    font-family: var(--navFontPrimary);
    color: var(--navColor);
    text-transform: uppercase;
    font-size: 16px;
    padding: 0px 15px;
    position: relative;
}

.nav-custom .navbar-brand {
    padding-left: 0 !important;
}

.nav-custom .nav-item .nav-link:hover,
.nav-custom .navbar-brand:hover {
    color: var(--navActiveColor);
}

.nav-custom .nav-item .nav-link {}

.nav-custom .navbar-nav>.nav-item>.nav-link.active {
    color: var(--navActiveColor);
}

.nav-custom .nav-item:last-child .nav-link {
    padding-right: 0;
}

.nav-custom .dropdown-menu {
    /* position: relative; */
    top: 100%;
    right: 0;
    min-width: 18rem;
    background-color: var(--navBackground);
}

.nav-custom .dropdown-menu .nav-item .nav-link {
    width: 100%;
    background: unset;
    color: var(--navColor);
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all 0.3s;
}

.nav-custom .dropdown-menu .nav-item .nav-link:hover {
    color: var(--navBackground);
    padding-left: 2rem;
    background-color: var(--navActiveColor);
}

.nav-custom .sub-nav ul {
    display: none;
    position: absolute;
    min-width: 15rem;
    background-color: #fff;
    border: 1px solid #ccc;
}

.nav-custom .sub-nav:hover ul {
    display: block;
    top: 0;
    right: -110%;
    padding: 10px 0;
    border-radius: 5px;
}


/* End nav-custom */


/* gio-hang-container */

.gio-hang-container {
    position: relative;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: normal;
    padding: 5px 30px;
    background-image: url("../images/background-menu.gif");
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #e70200;
    flex-wrap: nowrap;
}

.gio-hang-container .bg-white {
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.gio-hang-container .gio-hang {
    display: inline-block;
    margin-right: 5px;
}

.gio-hang-container .line {
    border: 1px solid #e70200;
    width: 1px;
    height: 39px;
    display: inline-block;
    transform: rotateZ(7deg);
    position: absolute;
    top: 0;
}

.gio-hang-container .thanh-tien {
    display: inline-block;
    margin-left: 10px;
}

.gio-hang-container a {
    color: #e70200;
}


/* End gio-hang-container */


/* gioi_thieu */

#gioi_thieu {
    position: relative;
}

#gioi_thieu .img-decoration-container {
    position: absolute;
    width: 30%;
    height: 160%;
    top: calc((160% - 100%) / -2);
    /* top = (height - 100%) / -2 */
    right: 0;
    background-image: url("../images/background-gioi-thieu.png");
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
}


/* End gioi_thieu */


/* footer */

footer {
    background-color: var(--lightColor);
    color: var(--secondarycolor);
    padding-top: 1rem;
    box-shadow: 0 0 5px #ccc;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
}

footer .logo img {
    height: 80px;
}

footer .ten-cong-ty {
    font-size: 3.2rem;
}

footer a {
    color: var(--secondarycolor);
}

footer .title-f {
    color: var(--primarycolor);
    text-transform: uppercase;
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1.3rem;
    font-family: var(--thirdFont);
    margin-bottom: 2rem;
}

footer .chantrang {
    color: var(--secondarycolor);
    padding: 0.5rem 0;
    font-weight: bold;
}

footer .chantrang a {
    color: var(--secondarycolor);
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

footer ul.nav-hor {
    display: inline-block;
}

footer ul li {
    margin-bottom: 26px;
    font-size: 16px;
}

footer iframe {
    width: 100%;
}

footer .mxh-icon {}

footer .mxh-icon li {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 0;
}

footer .mxh-icon li a {
    border: 1px solid;
    border-radius: 50%;
    padding: 3px;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
}

footer .mxh-icon i {
    font-size: 16px;
}

footer .xemthem {
    font-style: italic;
    display: block;
}

footer .nav-f>li {
    display: inline;
}

footer .nav-f>li>a {
    padding: 0 0.5rem;
    border-right: 1px solid var(--lightColor);
}

footer .nav-f>li:last-child>a {
    border: 0;
    padding-right: 0;
}

ul.lien-ket-nhanh .nav-item {
    margin-bottom: 0;
}

ul.lien-ket-nhanh .nav-link {
    display: inline-block;
    padding-left: 0;
    color: var(--primarycolor);
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    font-family: var(--thirdFont);
    font-size: 20px;
}

ul.lien-ket-nhanh .nav-link:hover {
    text-decoration: underline;
}

ul.lien-ket-nhanh .nav-link:hover {
    color: var(--linkHoverColor);
}

footer .map {
    height: 52%;
}


/* End footer */


/* danh-muc-san-pham */

#danh-muc-san-pham {
    background-color: #ff5c4d;
}

#danh-muc-san-pham .title {
    color: #fff;
}

.danh-muc {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.danh-muc .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 5px;
}

.danh-muc .ten-danh-muc {
    width: 100%;
}

.danh-muc .ten-danh-muc a {
    text-transform: uppercase;
    color: #fff;
    font-family: var(--primaryFont);
    font-weight: bold;
    font-size: 16px;
}

.danh-muc .border-on-hover {
    margin-bottom: 10px;
    padding: 10px;
    border: 3px solid rgba(255, 255, 255, 0);
    width: 100%;
}

.danh-muc .border-on-hover:hover {
    border: 3px solid #fff;
    border-radius: 5px;
    width: 100%;
}


/* End danh-muc-san-pham */


/* sp-moi-card */

.sp-moi-card {
    padding-right: 10px;
}

.img-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-moi-card .img-container {
    margin-bottom: 20px;
}

.sp-moi-card .img-container img {
    max-height: 250px;
    object-fit: cover;
    width: 100%;
    border-radius: 5px;
}

.info {
    margin-top: 10px;
}

.info .date {
    text-align: center;
}

.info .date span {
    font-size: 14px;
    padding: 0 5px;
}

.ten-sp {
    color: var(--primarycolor);
    font-weight: bold;
    font-family: var(--titleFont3);
}

.chitiettin {
    margin-top: 1rem;
    color: var(--darkColor);
}

.info .ten-sp,
.info .ten-sp a,
.info .xuat-xu,
.info .date {
    color: #939597;
    margin: 0;
    font-size: 16px;
}

.info .ten-sp a:hover {
    color: #ef0003;
    text-decoration: underline;
}

.gia {
    color: #ef0003;
    font-size: 16px;
}

.gia .old {
    text-decoration: line-through;
}

.btn-mua {
    background-color: var(--primarycolor);
    color: var(--lightColor);
}

.btn-mua:hover {
    color: var(--secondarycolor);
}

.info .btn-xem-them {
    padding: 0;
    color: rgba(0, 0, 0, 0.5);
}

.info .btn-xem-them:hover {
    color: #000;
}


/* End sp-moi-card */


/* dang-ky-khuyen-mai */

#dang-ky-khuyen-mai {
    background-color: #ff5c4d;
}

#dang-ky-khuyen-mai .col-left {
    color: #fff;
}

#dang-ky-khuyen-mai .title {
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}


/* End dang-ky-khuyen-mai */


/* sp-km-card */

.sp-km-double-card {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
}

.sp-km-card {
    width: 90%;
    text-align: center;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 3em;
}

.sp-km-card .img-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-km-card .img-container img {
    max-height: 120px;
}


/* End sp-km-card */


/* san-pham */

.san-pham {}

.san-pham ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    justify-content: start;
    padding-top: 10px;
    padding-bottom: 10px;
}

.san-pham ul li {
    display: inline-block;
}

.san-pham ul li a {
    padding: 10px 20px;
    text-transform: uppercase;
    color: #939597;
    font-size: 16px;
    border-left: 1px solid #939597;
}

.san-pham ul li a:hover {
    color: #000;
}

.san-pham ul li:first-child a {
    border: 0;
    padding-left: 0;
}


/* End san-pham */


/* san-pham-card */

.san-pham-card {
    width: 95% !important;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    transition: all 0.3s;
}

.san-pham-card:hover {
    background-color: #b92010;
}

.san-pham-card:hover * {
    color: #fff !important;
}

.san-pham-card .img-container img {
    max-height: 150px;
}


/* End san-pham-card */


/* cong-thuc-card */

.cong-thuc-slick .slick-track {
    margin-left: 0;
}

.cong-thuc-card {
    width: 95%;
}

.cong-thuc-card .img-container {
    margin-bottom: 10px;
}

.cong-thuc-card .img-container img {
    max-height: 150px;
    width: 100%;
    object-fit: cover;
}

.cong-thuc-card .tieu-de {
    text-align: start;
    margin: 0;
    color: #ef0003;
    font-size: 16px;
}

.cong-thuc-card .mo-ta {
    text-align: start;
    margin: 0;
}


/* End cong-thuc-card */


/* thong-tin-footer */

#thong-tin-footer {
    background-position: center bottom;
    background-size: cover;
}

#thong-tin-footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#thong-tin-footer .title {
    font-family: var(--primaryFont);
}

#thong-tin-footer ul li {
    margin-bottom: 10px;
}

#thong-tin-footer ul li a {
    color: #939597;
}


/* thong-tin-footer */


/* btn-primary */

.btn--primary {
    color: var(--lightColor);
    background-color: var(--primarycolor);
    border-color: var(--primarycolor);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
}

.btn--primary:hover {
    background-color: var(--lightColor);
    color: var(--primarycolor);
    border-color: var(--primarycolor);
}

.btn--primary:focus {
    color: var(--primarycolor);
    background-color: var(--secondarycolor);
    border-color: var(--primarycolor);
    box-shadow: 0 0 0 0.05rem var(--primarycolor);
}

.nav-custom .dropdown-menu.menu-dm-sp {
    background-color: #ffffffe3;
    left: 50%;
    top: 115%;
    padding: 0;
    padding: 1rem 0;
    transform: translateX(-50%);
}

.nav-custom .dropdown-menu.menu-dm-sp .dropdown-item {
    color: var(--primarycolor);
    padding: 0.2rem 2.3rem;
}

.nav-custom .dropdown-menu.menu-dm-sp .dropdown-item:hover {
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
}


/* End btn-primary */


/* tinlienquan */

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

.tinlienquan li a {
    color: #000;
    font-size: 16px;
}

.tinlienquan li a:hover {
    color: var(--linkHoverColor);
}

.btn.dropdown-toggle {
    padding: 0.5rem 2rem;
    text-transform: uppercase;
    font-family: var(--primarycolor);
    border: 6px double;
    border-radius: 7px;
}

.btn.dropdown-toggle::after {
    content: unset;
}


/* End tinlienquan */


/* dichvu-card */

.dichvu-card {
    margin-bottom: 1rem;
    overflow: hidden;
}

.dichvu-card .img-container {
    height: 200px;
}

.dichvu-card .img-container img {
    object-fit: contain;
}

.dichvu-card .info {
    text-align: center;
    color: var(--primarycolor);
}

.dichvu-card .tieu-de {
    font-family: var(--titleFont2);
    color: var(--primarycolor);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
}


/* End dichvu-card */


/* item-product-card */

.item-product-card {
    margin-bottom: 1rem;
    background-color: #f8f9fb;
    padding: 0.5rem;
}

.item-product-card .img-container {
    position: relative;
    overflow: hidden;
}

.item-product-card .img-container .bg-km {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 70px solid red;
    border-left: 70px solid transparent;
}

.item-product-card .img-container .phan-tram-km {
    position: absolute;
    color: var(--secondarycolor);
    top: 10px;
    right: 2px;
    font-weight: bold;
}

.item-product-card:hover img {
    transform: scale(1.2);
}

.item-product-card img {
    border-radius: 3px;
    box-shadow: 1px 1px 6px #000;
    height: 200px;
    width: 100%;
    transition: all 0.3s;
    object-fit: contain;
}

.item-product-card .info .mo-ta {
    margin-bottom: 0.5rem;
    color: var(--darkColor);
}

.item-product-card .info {}

.item-product-card .info .ten-sp {
    color: var(--primarycolor);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.item-product-card .info .ten-sp:hover {
    text-decoration: underline;
}

.gia {
    margin-bottom: 0.5rem;
}

.gia.old {
    text-decoration: line-through;
    margin-left: 1rem;
    color: var(--linkColor);
}

.item-product-card .info .btn-addcart {
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
    padding: 0rem 1.1rem;
    border: 6px double var(--primarycolor);
    border-radius: 10px;
}


/* End item-product-card */


/* dich-vu-chung-toi */

.dich-vu-chung-toi {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 3rem 0;
}

.tintuc-card {
    margin-bottom: 1.5rem;
    box-shadow: 0 0 3px #9f9f9f;
    border-radius: 5px;
    padding-bottom: 1rem;
    overflow: hidden;
    height: calc(100% - 1rem);
}

.dichvu-card .img-container,
.tintuc-card .img-container {
    position: relative;
    width: 100%;
    padding-top: calc(270/392*100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dichvu-card .img-container img,
.tintuc-card .img-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}

.dichvu-card .img-container img:hover,
.tintuc-card .img-container img:hover {
    transform: translate(-50%, -50%) scale(1.02);
    filter: brightness(.9);
}

.tintuc-card .img-container .date {
    position: absolute;
    bottom: -15px;
    right: 0;
    color: var(--lightColor);
    background-color: var(--primarycolor);
    font-weight: bold;
    padding: 0.3rem 1.4rem;
    font-size: 16px;
    font-family: var(--titleFont4);
    left: 0;
    width: 35%;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
    background: linear-gradient(355deg, rgba(228, 15, 15, 1) 0%, rgba(150, 33, 33, 1) 100%);
}

.tintuc-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tintuc-card .info {
    text-align: start;
    padding: 0 1rem;
}

.tintuc-card .info .tieu-de {
    color: var(--secondarycolor);
}

.tintuc-card .info .tieu-de:hover {
    text-decoration: underline;
}

.tintuc-card .info .mo-ta {
    color: var(--darkColor);
    font-weight: bold;
}

.tintuc-card.horiz .info {}

.tintuc-card.horiz .info .tieu-de {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-family: var(--titleFont4);
    text-align: center;
    display: block;
    margin-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

.tintuc-card.horiz .info .mo-ta {
    margin-bottom: 0.5rem;
}

.tintuc-card.verti .info {
    margin-top: 5px;
    padding-left: 0;
    display: flex;
    align-items: center;
}

.tintuc-card.verti .info .tieu-de {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.tintuc-card.verti .info .mo-ta {
    line-height: 1.2;
}

.tintuc-card.horiz .img-container {
    height: 270px;
}

.tintuc-card.verti .img-container {
    height: 130px;
}

.tintuc-card.horiz,
.tintuc-card.horiz .img-container img {}

.tintuc-card.verti,
.tintuc-card.verti .img-container img {}

.tintuc-slick {
    margin-left: -1rem;
    margin-right: -1rem;
}

.tintuc-slick .tintuc-card {
    margin-right: 1rem;
    margin-left: 1rem;
}


/* End dich-vu-chung-toi */


/* sec-tintuc */

.sec-tintuc {
    padding: 3rem 0;
}


/* End sec-tintuc */


/* sec-nha-cung-cap */

.sec-nha-cung-cap img {
    height: 200px;
    width: 200px;
    object-fit: cover;
    object-position: center center;
}


/* End sec-nha-cung-cap */


/* danh-muc-card */

.danh-muc-trang-chu {
    padding: 3rem 0;
    background-color: #f4f5f9;
}

.danh-muc-card {
    margin-right: 1rem;
}

.danh-muc-card .img-container {
    height: 200px;
}

.danh-muc-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.danh-muc-card .tieu-de {
    text-align: center;
    margin-bottom: 0;
    margin-top: -1rem;
}

.danh-muc-card .tieu-de a {
    display: inline-block;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    color: var(--secondarycolor);
    background-color: var(--primarycolor);
    border-radius: 3px;
    box-shadow: 10px -5px 3px #0000008c;
}


/* End danh-muc-card */


/* nav-sec */

.nav.nav-tabs.nav-sec {
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: start;
    margin-bottom: 15px;
    white-space: nowrap;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: block;
    text-align: center;
}

.nav.nav-tabs.nav-sec li {
    display: inline-block;
}

.nav.nav-tabs.nav-sec::-webkit-scrollbar {
    /* display: none; */
    height: 5px;
    border-radius: 5px;
}

.nav.nav-tabs.nav-sec::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 5px;
}


/* Handle */

.nav.nav-tabs.nav-sec::-webkit-scrollbar-thumb {
    background: #0000005c;
    border-radius: 5px;
}


/* Handle on hover */

.nav.nav-tabs.nav-sec::-webkit-scrollbar-thumb:hover {
    background: var(--primarycolor);
}

.nav-tabs.nav-sec .nav-link {
    border: 0;
    border-radius: 0;
    color: var(--linkColor);
    font-size: 1rem;
    text-transform: uppercase;
}

.nav-tabs.nav-sec .nav-link:hover {
    color: var(--primarycolor);
}

.nav-tabs.nav-sec .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--primarycolor);
}

.nav-sec-content.tab-content {}


/* End nav-sec */


/* video-slick-main */

.video-slick-main iframe {
    width: 100%;
    height: 300px;
}

.video-slick iframe {
    width: 95%;
}

.video-slick {
    margin-right: -10px;
}


/* End video-slick-main */


/* dich-vu-card-trang-chu */

.dich-vu-card-trang-chu {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.dich-vu-card-trang-chu .ten-dich-vu {
    color: #ff0000;
    font-family: var(--secondaryFont);
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.dich-vu-card-trang-chu .mo-ta {
    color: var(--darkColor);
}

.dich-vu-card-trang-chu .img-container img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    box-shadow: -20px 20px 0px rgb(68 68 68 / 71%);
}

.dich-vu-card-trang-chu .img-container {
    position: relative;
}

.dich-vu-card-trang-chu .img-container::before {
    position: absolute;
    top: -15%;
    left: -15%;
    content: "";
    width: 50%;
    height: 100%;
    border: 5px solid var(--primarycolor);
    background-color: #fff;
    z-index: -1;
}


/* End dich-vu-card-trang-chu */


/* slick-dots vertical */

.slick-dots.vertical {
    width: auto;
    bottom: unset;
    right: 5%;
    top: 15%;
}

.slick-dots.vertical li {
    display: block;
    margin-bottom: 5px;
}

.slick-dots.vertical li button:before {
    content: "\f111";
    font-family: "FAS";
    color: var(--primarycolor);
    font-size: 14px;
}


/* End slick-dots vertical */


/* gioi-thieu */

.gioi-thieu {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

.gioi-thieu .img-container {
    position: relative;
}

.gioi-thieu .img-container::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 90%;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, rgba(225, 0, 25, 1) 0%, rgba(229, 53, 53, 1) 36%, rgba(249, 127, 127, 1) 65%, rgba(255, 197, 197, 1) 100%);
}

.gioi-thieu .img-container img {
    z-index: 1;
    height: 240px;
    object-fit: contain;
    object-position: bottom;
    margin-top: 10%;
}

img.background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.gioi-thieu .title-2 {
    font-family: var(--titleFont);
    color: var(--primarycolor);
    font-weight: bold;
    text-transform: uppercase;
}

.gioi-thieu .mo-ta {
    color: var(--darkColor);
}


/* End gioi-thieu */


/* slick-hinh-anh-footer */

.slick-hinh-anh-footer img {
    height: 290px;
    object-fit: cover;
}


/* End slick-hinh-anh-footer */


/* bai-viet-tin-tuc */

.bai-viet-tin-tuc img.background {
    bottom: 0;
    top: unset;
}


/* End bai-viet-tin-tuc */


/* tin-tuc-card-trang-chu */

.tin-tuc-card-trang-chu {
    border: 1px solid var(--primarycolor);
    border-radius: 5px;
    padding: 1rem 0;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 0 3px var(--primarycolor);
}

.tin-tuc-card-trang-chu .date {
    border-bottom: 1px solid var(--primarycolor);
    position: relative;
}

.tin-tuc-card-trang-chu.even .date {
    padding-left: 40px;
    padding-right: 5px;
    margin-left: -55px;
}

.tin-tuc-card-trang-chu.odd .date {
    padding-left: 5px;
    padding-right: 40px;
    margin-right: -55px;
}

.tin-tuc-card-trang-chu .info .tieu-de {
    font-family: var(--titleFont3);
    margin-top: 2rem;
}

.tin-tuc-card-trang-chu .info .mo-ta {
    margin-bottom: 1rem;
    color: #000;
}

.tin-tuc-card-trang-chu.even {
    text-align: start;
}

.tin-tuc-card-trang-chu.odd {
    text-align: end;
}


/* End tin-tuc-card-trang-chu */


/* dat-xe */

.dat-xe img.background {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.dat-xe .img-container img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    box-shadow: 0 0 10px #fff;
}

.dat-xe .tieu-de {
    text-transform: uppercase;
    font-weight: 1.5rem;
}

.dat-xe .tieu-de-2 {
    font-size: 1rem;
}

.dat-xe .tieu-de,
.dat-xe .tieu-de-2 {
    font-weight: bold;
    text-align: center;
    color: var(--secondarycolor);
}


/* End dat-xe */


/* form-datxe */

.form-datxe input,
.form-datxe button,
.form-datxe select {
    width: 100%;
    color: var(--primarycolor);
}

.form-datxe input:focus {
    border-color: var(--primarycolor);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--primarycolor25);
}

.form-datxe input::placeholder {
    color: var(--primarycolor);
}

.form-datxe .row>* {
    margin-bottom: 1rem;
}

.form-datxe .btn-datxe {
    color: #000;
    background-color: var(--secondarycolor);
    text-transform: uppercase;
    font-weight: bold;
    font-family: var(--thirdFont);
}

.form-datxe .btn-datxe:hover {
    color: #fff;
    background-color: var(--primarycolor);
}


/* End form-datxe */


/* hanhtrinh-card */

.hanhtrinh-card .img-container {
    position: relative;
    overflow: hidden;
}

.hanhtrinh-card .img-container img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    filter: grayscale(20%);
    border-radius: 5px;
    transition: all 0.5s;
}

.hanhtrinh-card .img-container img:hover {
    transform: scale(1.3);
}

.hanhtrinh-card .img-container .info {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    color: var(--lightColor);
    font-size: 1.1rem;
}

.hanhtrinh-card .img-container .info p {
    margin-bottom: 0.2rem;
}

.hanhtrinh-card .img-container .info .tieu-de {
    font-family: var(--titleFont3);
}


/* End hanhtrinh-card */


/* form-lienhe */

.form-lienhe *::placeholder,
.form-lienhe {
    font-family: var(--formFont);
    font-style: italic;
    font-weight: normal;
}

.form-lienhe .form-control {
    font-weight: bold;
    border: 0;
}


/* End form-lienhe */


/* right-nav */

.right-nav {
    border: 3px solid var(--primarycolor);
    border-radius: 5px;
    padding: 0.5rem;
}

.right-nav .title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.right-nav .hotro .nav-link {
    display: inline-block;
    padding-left: 0;
}


/* End right-nav */


/* tintuc-lienquan-card */

.tintuc-lienquan-card {
    background-color: #e7e7e7;
    padding: 0.5rem;
}

.tintuc-lienquan-card .img-container {
    overflow: hidden;
}

.tintuc-lienquan-card .img-container img {
    height: 130px;
    width: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.tintuc-lienquan-card:hover .img-container img {
    transform: scale(1.2);
}

.tintuc-lienquan-card .info {
    margin-top: 0;
}

.tintuc-lienquan-card .info .tieu-de-tin {
    font-family: var(--titleFont3);
    color: var(--primarycolor);
    display: block;
    font-size: 16px;
}

.tintuc-lienquan-card .info .date {
    font-size: 14px;
    font-weight: bold;
}


/* End tintuc-lienquan-card */


/* coppy any thing and paste here */

.carousel-indicators {
    display: none;
}

.box-sl {}

.box-sl label {
    float: left;
    margin-right: 0px;
    position: relative;
    top: 10px;
}

.box-sl .soluong {
    width: 100%;
    height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 0px;
    border: 1px solid #d8dad6;
    float: right;
    font-weight: bold;
}

.tab-sp .nav-link {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar-toggle {
    display: none;
}


.slick-danh-muc-trang-chu {
    margin-left: 10px;
}

.g-recaptcha {
    overflow: hidden;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-width: inherit;
}

.modal-quangcao .modal-dialog .modal-content {
    position: relative;
    border: 0;
}

.modal-quangcao .modal-dialog .modal-content .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.39);
    padding: 10px;
    border-radius: 50%;
    top: -15px;
    right: -15px;
}


/* End coppy any thing and paste here */

body.hc-nav-open {
    overflow: visible;
    position: fixed;
    width: 100%;
    min-height: 100%;
}

.hc-offcanvas-nav {
    visibility: hidden;
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 9999;
    font-family: MyriadProRegular;
}

.hc-offcanvas-nav.is-ios * {
    cursor: pointer !important;
}

.hc-offcanvas-nav .nav-container {
    position: fixed;
    z-index: 9998;
    top: 0;
    width: 280px;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    transition: transform 0.4s ease;
}

.hc-offcanvas-nav .nav-wrapper {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    overscroll-behavior: none;
    box-sizing: border-box;
}

.hc-offcanvas-nav .nav-content {
    height: 100%;
    max-height: 100vh;
}

.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
}

.hc-offcanvas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-offcanvas-nav li {
    position: relative;
    display: block;
}

.hc-offcanvas-nav li.level-open>.nav-wrapper {
    visibility: visible;
}

.hc-offcanvas-nav input[type="checkbox"] {
    display: none;
}

.hc-offcanvas-nav label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
}

.hc-offcanvas-nav a {
    position: relative;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
}

.hc-offcanvas-nav a,
.hc-offcanvas-nav a:hover {
    text-decoration: none;
}

.hc-offcanvas-nav .nav-item {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.hc-offcanvas-nav.disable-body::after,
.hc-offcanvas-nav .nav-wrapper::after {
    content: "";
    position: fixed;
    z-index: 9990;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s ease 0.4s, opacity 0.4s ease;
}

.hc-offcanvas-nav.disable-body.nav-open::after,
.hc-offcanvas-nav .sub-level-open::after {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.05s;
}

.hc-offcanvas-nav:not(.nav-open)::after {
    pointer-events: none;
}

.hc-offcanvas-nav.nav-levels-expand .nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
}

.hc-offcanvas-nav.nav-levels-expand .nav-wrapper::after {
    display: none;
}

.hc-offcanvas-nav.nav-levels-expand ul .nav-wrapper {
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: height 0s ease 0.4s;
}

.hc-offcanvas-nav.nav-levels-expand .level-open>.nav-wrapper {
    max-height: none;
}

.hc-offcanvas-nav.nav-levels-overlap .nav-content {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
}

.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper {
    position: absolute;
    z-index: 9999;
    top: 0;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s ease 0.4s, transform 0.4s ease;
}

.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent {
    position: static;
}

.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform 0.4s ease;
}

.hc-offcanvas-nav.nav-position-left {
    left: 0;
}

.hc-offcanvas-nav.nav-position-left .nav-container {
    left: 0;
    transform: translate3d(-280px, 0, 0);
}

.hc-offcanvas-nav.nav-position-left.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(-100%, 0, 0);
}

.hc-offcanvas-nav.nav-position-right {
    right: 0;
}

.hc-offcanvas-nav.nav-position-right .nav-container {
    right: 0;
    transform: translate3d(280px, 0, 0);
}

.hc-offcanvas-nav.nav-position-right.nav-levels-overlap li .nav-wrapper {
    right: 0;
    transform: translate3d(100%, 0, 0);
}

.hc-offcanvas-nav.nav-position-top {
    top: 0;
}

.hc-offcanvas-nav.nav-position-top .nav-container {
    top: 0;
    width: 100%;
    height: auto;
    transform: translate3d(0, -100%, 0);
}

.hc-offcanvas-nav.nav-position-top.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(0, -100%, 0);
}

.hc-offcanvas-nav.nav-position-bottom {
    top: auto;
    bottom: 0;
}

.hc-offcanvas-nav.nav-position-bottom .nav-container {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    transform: translate3d(0, 100%, 0);
}

.hc-offcanvas-nav.nav-position-bottom.nav-levels-overlap li .nav-wrapper {
    left: 0;
    transform: translate3d(0, 100%, 0);
}

.hc-offcanvas-nav.nav-open[class*="hc-nav-"] div.nav-container {
    transform: translate3d(0, 0, 0);
}

.hc-nav-trigger {
    /* position: absolute; */
    /* cursor: pointer; */
    /* -webkit-user-select: none; */
    -moz-user-select: none;
    -ms-user-select: none;
    /* user-select: none; */
    /* display: none; */
    /* top: 20px; */
    /* z-index: 9980; */
    /* width: 30px; */
    /* min-height: 24px; */
}

.hc-nav-trigger span {
    /* width: 30px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* transform-origin: 50% 50%; */
}

.hc-nav-trigger span,
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
    /* display: block; */
    /* position: absolute; */
    /* left: 0; */
    /* height: 4px; */
    /* background: #34495E; */
    /* transition: all .2s ease; */
}

.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
    content: "";
    width: 100%;
}

.hc-nav-trigger span::before {
    top: -10px;
}

.hc-nav-trigger span::after {
    bottom: -10px;
}

.hc-nav-trigger.toggle-open span {
    background: rgba(0, 0, 0, 0);
    transform: rotate(45deg);
}

.hc-nav-trigger.toggle-open span::before {
    transform: translate3d(0, 10px, 0);
}

.hc-nav-trigger.toggle-open span::after {
    transform: rotate(-90deg) translate3d(10px, 0, 0);
}

.hc-offcanvas-nav::after,
.hc-offcanvas-nav .nav-wrapper::after {
    background: rgba(0, 0, 0, 0.3);
}

.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav ul {
    background: #f5f5f5;
}

.hc-offcanvas-nav h2 {
    font-size: 18px;
    text-align: left;
    color: #fff;
    background-color: var(--primarycolor);
    padding: 10px 15px;
    text-align: center;
    margin-top: 0px;
}

.hc-offcanvas-nav a,
.hc-offcanvas-nav .nav-item {
    padding: 11px 17px;
    font-size: 15px;
    color: #000000;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    border-bottom: 1px solid var(--primarycolor);
}

.hc-offcanvas-nav:not(.touch-device) a:hover {
    background: #31679e;
}

.hc-offcanvas-nav ul:first-of-type:not(:first-child)>li:first-child:not(.nav-back):not(.nav-close)>a {
    border-top: 1px solid var(--primarycolor);
    margin-top: -1px;
}

.hc-offcanvas-nav li {
    text-align: left;
}

.hc-offcanvas-nav li.nav-close a,
.hc-offcanvas-nav li.nav-back a {
    background: var(--primarycolor);
    border-top: 1px solid #dedada;
    border-bottom: 1px solid #dedada;
    color: #fff;
}

.hc-offcanvas-nav li.nav-close a::before,
.hc-offcanvas-nav li.nav-back a span::before {
    border-color: #fff;
}

.hc-offcanvas-nav li.nav-close a:hover,
.hc-offcanvas-nav li.nav-back a:hover {
    background: #f5f5f5;
}

.hc-offcanvas-nav li.nav-close:not(:first-child) a,
.hc-offcanvas-nav li.nav-back:not(:first-child) a {
    margin-top: -1px;
}

.hc-offcanvas-nav li.nav-parent .nav-item {
    padding-right: 58px;
}

.hc-offcanvas-nav li.nav-close span,
.hc-offcanvas-nav li.nav-parent span.nav-next,
.hc-offcanvas-nav li.nav-back span {
    width: 45px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    /* z-index: 1000; */
}

.hc-offcanvas-nav li.nav-close span::before,
.hc-offcanvas-nav li.nav-close span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.hc-offcanvas-nav li.nav-close span::before {
    margin-left: -9px;
    transform: rotate(135deg);
}

.hc-offcanvas-nav li.nav-close span::after {
    transform: rotate(-45deg);
}

.hc-offcanvas-nav a[href]:not([href="#"])>span.nav-next {
    border-left: 1px solid var(--primarycolor);
}

.hc-offcanvas-nav span.nav-next::before,
.hc-offcanvas-nav li.nav-back span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -2px;
    box-sizing: border-box;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    transform-origin: center;
}

.hc-offcanvas-nav span.nav-next::before {
    transform: translate(-50%, -50%) rotate(135deg);
}

.hc-offcanvas-nav li.nav-back span::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hc-offcanvas-nav.nav-position-left.nav-open .nav-wrapper {
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-right.nav-open .nav-wrapper {
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-right span.nav-next::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hc-offcanvas-nav.nav-position-right li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(135deg);
}

.hc-offcanvas-nav.nav-position-top.nav-open .nav-wrapper {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-top span.nav-next::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hc-offcanvas-nav.nav-position-top li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-position-bottom.nav-open .nav-wrapper {
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.hc-offcanvas-nav.nav-position-bottom span.nav-next::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-position-bottom li.nav-back span::before {
    margin-left: 0;
    margin-right: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul .nav-wrapper,
.hc-offcanvas-nav.nav-levels-none .nav-container ul .nav-wrapper {
    box-shadow: none;
    background: transparent;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul h2,
.hc-offcanvas-nav.nav-levels-none .nav-container ul h2 {
    display: none;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container ul ul .nav-item,
.hc-offcanvas-nav.nav-levels-none .nav-container ul ul .nav-item {
    font-size: 14px;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li,
.hc-offcanvas-nav.nav-levels-none .nav-container li {
    transition: background 0.3s ease;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open {
    background: #2e6296;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a {
    border-bottom: 1px solid #295887;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open a:hover,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open a:hover {
    background: #2f649a;
}

.hc-offcanvas-nav.nav-levels-expand .nav-container li.level-open>.nav-item .nav-next::before,
.hc-offcanvas-nav.nav-levels-none .nav-container li.level-open>.nav-item .nav-next::before {
    margin-top: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hc-offcanvas-nav.nav-levels-expand .nav-container span.nav-next::before,
.hc-offcanvas-nav.nav-levels-none .nav-container span.nav-next::before {
    margin-top: -2px;
    transform: translate(-50%, -50%) rotate(-135deg);
}

#main-nav {
    display: none;
}

header h1 {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 5px;
    padding-bottom: 8px;
}

header h2 {
    max-width: 680px;
    margin: auto;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 1px;
    padding-bottom: 30px;
}

header .git {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px 4px 0;
    font-size: 15px;
    font-weight: 400;
    color: #fffce1;
    background: #54b9cb;
    transition: background 0.15s ease-in-out;
}

header .git:hover {
    background: #4ca8b9;
}

header .git:hover svg {
    border-color: #54b9cb;
}

header .git svg {
    width: 15px;
    height: 15px;
    fill: #fffce1;
    position: relative;
    top: 2px;
    padding: 0 10px;
    margin-right: 10px;
    border-right: 1px solid #4daabb;
    transition: border-color 0.15s ease-in-out;
}

header .ver {
    padding-top: 15px;
    font-weight: 200;
    color: #dab977;
}

header .ver span {
    color: #fffce1;
}

header .toggle {
    position: absolute;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
    top: 20px;
    z-index: 9980;
    width: 35px;
    min-height: 24px;
    position: relative;
    width: auto;
    top: auto;
    left: auto;
    float: left;
    display: block;
    cursor: pointer;
    box-sizing: content-box;
    font-size: 20px;
    padding-left: 55px;
    line-height: 24px;
    margin-top: 55px;
}

header .toggle span {
    width: 35px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: 50% 50%;
}

header .toggle span,
header .toggle span::before,
header .toggle span::after {
    display: block;
    position: absolute;
    left: 0;
    height: 4px;
    background: #182631;
    transition: all 0.25s ease;
}

header .toggle span::before,
header .toggle span::after {
    content: "";
    width: 100%;
}

header .toggle span::before {
    top: -10px;
}

header .toggle span::after {
    bottom: -10px;
}

header .toggle.toggle-open span {
    background: rgba(0, 0, 0, 0);
    transform: rotate(45deg);
}

header .toggle.toggle-open span::before {
    transform: translate3d(0, 10px, 0);
}

header .toggle.toggle-open span::after {
    transform: rotate(-90deg) translate3d(10px, 0, 0);
}

header .toggle:hover span,
header .toggle:hover span::before,
header .toggle:hover span::after {
    background: #dab977;
}

header .toggle div {
    display: inline-block;
    margin-right: 15px;
}

footer {
    /* padding-bottom: 40px; */
}

footer .swm {
    display: inline-block;
    padding: 0 15px;
}

footer .swm svg {
    display: block;
    width: auto;
    height: 17px;
    margin-top: 22px;
}

footer .swm svg path {
    transition: fill 0.1s ease;
}

footer .swm svg .l-1 {
    fill: #4fb5e1;
}

footer .swm svg .l-2 {
    fill: #f2c053;
}

footer .swm svg .l-3 {
    fill: #a7ce38;
}

footer .swm:not(:hover) svg .l-1 {
    fill: #466e8d;
}

footer .swm:not(:hover) svg .l-2 {
    fill: #9db9cf;
}

footer .swm:not(:hover) svg .l-3 {
    fill: #5989ad;
}

main {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding-bottom: 30px;
    text-align: left;
}

main .content {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

main h4 {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 20px 0;
}

main h4:first-child {
    margin-top: 30px;
}

main .actions {
    margin: 0 -15px;
    text-align: center;
}

main .actions.checkboxes {
    text-align: left;
    padding-top: 8px;
}

main .actions.checkboxes label {
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
}

main .actions.checkboxes label input {
    display: none;
}

main .actions.checkboxes label input:checked~span {
    background: #dab977;
}

main .actions.checkboxes label input:checked~span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    border: solid #243949;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}

main .actions.checkboxes label span {
    display: inline-block;
    position: relative;
    top: -1px;
    width: 22px;
    height: 22px;
    background: #fffce1;
    margin-right: 12px;
    vertical-align: top;
    transition: all 0.1s ease;
}

main .actions div {
    padding: 0 15px 20px;
    box-sizing: border-box;
}

@media screen and (min-width: 800px) {
    main .actions {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    main .actions div {
        float: left;
        -ms-flex: 1 1 33.33%;
        flex: 1 1 33.33%;
        max-width: 33.33%;
    }

    main .actions.position div {
        float: left;
        -ms-flex: 1 1 25%;
        flex: 1 1 25%;
        max-width: 25%;
    }
}

main .button {
    position: relative;
    display: block;
    padding: 18px 30px 16px;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    text-decoration: none;
    color: #243949;
    cursor: pointer;
    background: #fffce1;
    border-radius: 30px/80px;
    transition: all 0.1s ease;
}

main .button:not(.active):hover {
    color: #d5af63;
}

main .button.active {
    background: #dab977;
}

.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
    padding-bottom: 41px;
}

.hc-offcanvas-nav h2 {
    font-weight: 400;
}

.hc-offcanvas-nav a {
    font-size: 16px;
}

.hc-offcanvas-nav li.search .nav-item {
    padding-top: 0;
}

.hc-offcanvas-nav li.search input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 10px;
    box-shadow: none;
    outline: none;
}

.hc-offcanvas-nav li.search input[type="text"]::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.hc-offcanvas-nav li.search input[type="text"]:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.hc-offcanvas-nav li.search input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.hc-offcanvas-nav li.add>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "add";
}

.hc-offcanvas-nav li.new>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "fiber_new";
}

.hc-offcanvas-nav li.cryptocurrency>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "local_atm";
}

.hc-offcanvas-nav li.devices>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "devices";
}

.hc-offcanvas-nav li.mobile>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "phone_android";
}

.hc-offcanvas-nav li.television>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "desktop_windows";
}

.hc-offcanvas-nav li.camera>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "camera_alt";
}

.hc-offcanvas-nav li.magazines>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "import_contacts";
}

.hc-offcanvas-nav li.store>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "store";
}

.hc-offcanvas-nav li.collections>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "collections";
}

.hc-offcanvas-nav li.credits>a::before {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    text-indent: 0;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 15px;
    font-size: 19px;
    vertical-align: top;
    content: "credit_card";
}

.hc-offcanvas-nav ul.bottom-nav {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-top: 1px solid #e72a00;
}

.hc-offcanvas-nav ul.bottom-nav li {
    -ms-flex: auto;
    flex: auto;
}

.hc-offcanvas-nav ul.bottom-nav li a {
    padding: 10px;
    text-align: center;
    height: 100%;
    border-bottom: none;
}

.hc-offcanvas-nav ul.bottom-nav li svg {
    fill: #fff;
    display: inline-block;
    vertical-align: middle;
}

.hc-offcanvas-nav ul.bottom-nav li.github svg {
    width: 17px;
    height: 17px;
}

.hc-offcanvas-nav ul.bottom-nav li.ko-fi svg {
    width: 21px;
    height: 21px;
}

.hc-offcanvas-nav ul.bottom-nav li.email svg {
    width: 19px;
    height: 19px;
}

#silder {
    width: 100%;
}

#silder img {
    width: 100%;
}

.nav-custom {
    box-shadow: none;
}

header {
    display: block;
}