/* cyrillic-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/Content/fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/Content/fonts/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.font-serif {
    font-family: "Yeseva One", cursive;
}

/* Grid */
@media (min-width: 576px) {
    .container,
    .container-sm {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container,
    .container-sm,
    .container-md {
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 100%;
    }

    .col-lg-60 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .col-lg-80 {
        flex: 0 0 80%;
        max-width: 80%;
    }
}

@media (min-width: 1200px) {
    .col-xl-55 {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .col-xl-60 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .col-xl-80 {
        flex: 0 0 80%;
        max-width: 80%;
    }

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

    .col-xl-30 {
        flex: 0 0 40%;
        max-width: 40%;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 100%;
    }
}

@media (min-width: 1440px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1440px;
    }
}

/*.container,*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto,
.col-lg-15,
.col-lg-20,
.col-lg-80,
.col-lg-60 {
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.card {
    border-radius: 5px;
}

.pos-relative.embed-responsive[class*="embed-responsive-"] iframe,
.pos-relative.embed-responsive[class*="embed-responsive-"] img {
    --image-scale: 1;
    position: absolute;
    top: var(--img-top, 50%);
    left: var(--img-left, 50%);
    transform: translate(-50%, -50%) scale(var(--image-scale));
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    min-width: 1px;
    min-height: 1px;
}

.pos-relative.embed-responsive[class*="embed-responsive-"] img {
    width: auto;
    height: auto;
}

    .pos-relative.embed-responsive[class*="embed-responsive-"] img.img-secondary {
        transform: translate(50%, -50%);
        visibility: hidden;
    }

.item_product_main:hover
.pos-relative.embed-responsive[class*="embed-responsive-"]
img.img-primary {
    /*transform: translate(-150%, -50%);*/
}

.item_product_main:hover
.pos-relative.embed-responsive[class*="embed-responsive-"]
img.img-secondary {
    transform: translate(-50%, -50%);
    visibility: visible;
}

.pos-relative.embed-responsive[class*="embed-responsive-"] iframe {
    z-index: 99;
}

.btn {
    border-radius: 4px;
}

body {
    color: var(--text-color);
    background: #f0f0f0;
    overflow-x: hidden;
    max-width: 100%;
    font-family: "Roboto", sans-serif;
    /*--font-serif:  'Yeseva One', cursive;*/
}

.bi {
    fill: currentColor;
}

.form-control:focus,
a,
button,
.page-link:focus,
.btn,
.btn:focus {
    outline: none !important;
    box-shadow: none;
}

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

a {
    color: var(--text-color);
}

    a:focus {
        outline: none;
    }

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

img,
iframe {
    max-width: 100%;
}

.hidden {
    display: none !important;
}

.show:not(.hidden) {
    display: block;
}

.object-contain {
    object-fit: contain;
}

.align-vertical {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.align-center {
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    left: 50% !important;
}

.close {
    color: #252525;
}

.btn-action {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

    .btn-action:hover {
        filter: brightness(1.1);
    }

a.link {
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
}

    a.link:hover {
        color: var(--primary-color);
        filter: brightness(1.2);
        text-decoration: none;
    }

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

.title_page {
    font-size: 2rem;
    padding: 10px 0;
}

.title_page,
.title-head {
    font-weight: 400;
}

.title-head {
    font-size: 1rem;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.row-grid {
    --col: 12;
    display: grid;
    grid-template-columns: repeat(var(--col), minmax(0, 1fr));
    grid-gap: 15px;
}

.scroll::-webkit-scrollbar {
    width: 3px;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    outline: 1px solid var(--primary-color);
}

/** lazyload **/
.lazyload:not(.loaded) {
    background: #ebebeb;
}

.lazyload.loaded {
    background: transparent;
}

/**Topbar
.topbar{
background: var(--topbar-bg);
min-height: 40px;
padding: 5px;
font-size: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
color: var(--topbar-color);
.link{
color: var(--topbar-color);
}
}**/
.modal {
    top: 0 !important;
}

/**slick **/
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0 !important;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: "";
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-arrow {
    --size: 30px;
    top: 50%;
    font-size: 0;
    line-height: 0;
    position: absolute;
    display: block;
    width: var(--size);
    height: var(--size);
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    /*border: 1px solid #ebebeb;
	background: #ebebeb;*/
    background: linear-gradient(90.07deg, #e32229 0%, #ec4248 100%);
    border: none;
    line-height: var(--size);
    text-align: center;
    z-index: 1;
    overflow: hidden;
    opacity: 0.7;
    border-radius: 100%;
}

    .slick-arrow:hover,
    .slick-arrow:focus {
        outline: none;
    }

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

    .slick-arrow:not(.slick-disabled):hover {
        opacity: 1;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
        /*background: #fff;
		color: #333;*/
    }

    .slick-arrow.slick-prev:before,
    .slick-arrow.slick-next:before {
        font-family: "Font Awesome\ 5 Free";
        background: transparent;
        font-weight: 900;
        height: var(--size);
        width: var(--size);
        font-size: 18px;
        /*color: #333;*/
        color: #fff;
        display: block;
        -webkit-transition: all ease 0.3s;
        -moz-transition: all ease 0.3s;
        -ms-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        transition: all ease 0.3s;
    }

@media (min-width: 992px) {
    .slick-arrow.slick-prev:before,
    .slick-arrow.slick-next:before {
        /*display:none;*/
    }
}

.slick-arrow.slick-prev:hover:before,
.slick-arrow.slick-next:hover:before {
    color: #fff;
}

.slick-arrow.slick-prev {
    left: 0;
}

    .slick-arrow.slick-prev:before {
        content: "\f104";
    }

.slick-arrow.slick-next {
    right: 0;
}

    .slick-arrow.slick-next:before {
        content: "\f105";
    }

.slick-dots {
    text-align: center;
}

    .slick-dots li {
        display: inline-block;
    }

        .slick-dots li button {
            border-radius: 0;
            height: 10px;
            width: 10px;
            border: 1px solid #e5e5e5;
            background-color: #fff;
            padding: 0;
            font-size: 0;
        }

        .slick-dots li.slick-active button {
            border-color: var(--primary-color);
            background-color: var(--primary-color);
        }

.slick-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    padding: 0;
    border-radius: 15px;
    height: 24px;
    align-items: center;
    display: flex !important;
    justify-content: center;
}

    .slick-dots li button {
        height: 2px;
        width: 16px;
        border: 1px solid #fff;
        background: #fff;
        border-radius: 0;
        margin: 0 3px;
        opacity: 0.5;
    }

        .slick-dots li button:hover {
            opacity: 1;
        }

    .slick-dots li.slick-active button {
        opacity: 1;
    }

/**Header**/
.toggle-nav,
.icon-bar {
    width: 24px;
    flex-direction: column;
    height: 20px;
    justify-content: space-between;
    border-radius: 3px;
}

    .toggle-nav .bar,
    .icon-bar .bar {
        height: 3px;
        background: #fff;
        width: 24px;
        border-radius: 1px;
    }

        .toggle-nav .bar:nth-child(2, 2),
        .icon-bar .bar:nth-child(2, 2) {
            width: 86% !important;
        }

.icon-bar {
    cursor: auto !important;
}

    .icon-bar .bar {
        background: var(--text-color);
        height: 2px;
    }

        .icon-bar .bar:nth-child(2) {
            width: 20px;
        }

.mid-header {
    background: var(--header-background);
    color: var(--header-color);
    padding: 10px 0px;
}

    .mid-header .toggle-nav {
        width: 24px;
        flex-direction: column;
        height: 20px;
        justify-content: space-between;
        border-radius: 3px;
    }

        .mid-header .toggle-nav .bar {
            height: 3px;
            background: var(--primary-color);
            width: 24px;
            border-radius: 3px;
        }

            .mid-header .toggle-nav .bar:nth-child(2) {
                width: 75%;
            }

    .mid-header .logo-wrapper {
        max-width: 248px;
        display: block;
    }

@media (max-width: 992px) {
    .mid-header .logo-wrapper {
        margin: auto;
    }
}

.header-right {
    font-size: 14px;
}

    .header-right .fas {
        font-size: 24px;
    }

    .header-right a {
        color: var(--header-color);
    }

        .header-right a:hover {
            text-decoration: none;
            color: var(--primary-color);
        }

.mini-cart .no-item {
    text-align: center;
}

    .mini-cart .no-item p {
        margin: 0 auto;
    }

@media (min-width: 768px) {
    .mini-cart > a {
        display: flex;
        align-items: center;
        padding: 8px;
        border: 2px solid var(--subheader-background);
        border-radius: 6px;
        text-decoration: none;
    }

        .mini-cart > a:hover {
            color: var(--subheader-background);
            background: var(--subheader-color);
            border-color: var(--subheader-background);
        }
}

.mini-cart > a .count_item {
    display: block;
    background: var(--secondary-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
}

@media (max-width: 575px) {
    .mini-cart > a .count_item {
        font-size: 9px;
    }
}

/**search bar header **/
#search-header .custom-input-group {
    z-index: 1000;
}

    #search-header .custom-input-group .input-group-field {
        background: #fff;
    }

@media (max-width: 991px) {
    #search-header .custom-input-group .input-group-field {
        height: 35px;
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    #search-header {
        order: 1;
        margin-top: 10px;
    }

    .catnews-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 375px) {
    #search-header .custom-input-group .input-group-field {
        padding-right: 45px;
    }

    #search-header .btn {
        padding: 4px 10px;
    }
}

#search-header .search-dropdow .search__list {
    display: block !important;
    white-space: nowrap;
    overflow: auto;
}

    #search-header .search-dropdow .search__list > li {
        display: inline-block;
    }

.search-overlay {
    position: fixed;
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    top: 0 !important;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

    .search-overlay.active {
        opacity: 1;
        z-index: 999;
        visibility: visible;
    }

.search__list a {
    font-size: 12px;
    color: #6c757d;
}

    .search__list a:hover {
        color: var(--header-color);
    }

/** Subheader **/
.subheader {
    --subheader-padding: 0px;
    background: #e32229;
    color: var(--subheader-color);
    display: flex;
    align-items: center;
    padding-top: 5px;
}

    .subheader .toogle-nav-wrapper {
        padding: 16px 0 20px;
        border-radius: 5px 5px 0px 0px;
        border: 1px;
        color: var(--subheader-background);
        background: var(--subheader-color);
        font-weight: 500;
    }

    .subheader .navigation-wrapper {
        font-weight: 400;
    }

    .subheader .toogle-nav-wrapper .icon-bar {
        width: 20px;
        height: 18px;
        margin-left: 15px;
    }

        .subheader .toogle-nav-wrapper .icon-bar .bar {
            background: var(--subheader-background);
            width: 20px;
        }

@media (max-width: 1023px) {
    .subheader {
        display: none;
    }
}

.subheader .container {
    display: grid;
    grid-template-columns: calc(20% - 24px) 1fr;
    justify-content: space-between;
    /*align-items: center;*/
    grid-gap: 15px;
}

@media (max-width: 1024px) {
    .subheader .container {
        grid-template-columns: calc(25% - 24px) 1fr;
    }
}

.subheader .container > * {
    padding-bottom: 8px;
}

.shop-policises {
    justify-content: flex-start;
    padding: 0 !important;
    gap: 15px;
    /*div{
		width: 40px;
		height: 40px;
		padding: 4px;
		margin-right: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		@media(max-width: 992px){
			width: 32px;
			height: 32px;
		}
	}*/
}

    .shop-policises > li {
        display: flex;
        align-items: center;
        height: 100%;
    }

        .shop-policises > li:not(:first-child) {
            margin-left: 15px;
        }

        .shop-policises > li.has-sub {
            position: relative;
        }

            .shop-policises > li.has-sub a svg {
                width: 15px;
                height: 15px;
            }

.shop-policises--child {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    min-width: 240px;
    display: none;
    z-index: 10;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

    .shop-policises--child ul {
        padding: 0;
    }

        .shop-policises--child ul li {
            padding: 8px 15px;
        }

            .shop-policises--child ul li a {
                display: block;
            }

                .shop-policises--child ul li a:hover {
                    color: var(--primary-color) !important;
                }

.shop-policises > li.has-sub:hover
.shop-policises--child:not(.shop-policises--child-three) {
    display: block;
    justify-content: flex-start;
}

.shop-policises .link {
    font-size: 16px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

@media (min-width: 1024px) {
    .shop-policises .link {
        color: var(--subheader-color);
    }

        .shop-policises .link:hover {
            color: #ffffff;
        }
}

.right-banner {
    display: grid;
    grid-row-gap: 10px;
    margin-left: 5px;
}

.product-badge {
    max-height: 16px;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    display: block;
}

/** Custom input group **/
.custom-input-group {
    overflow: hidden;
    border-radius: 9999px;
    position: relative;
}

    .custom-input-group .input-group-field {
        width: 100%;
        height: 36px;
        font-size: 13px;
        padding: 0 10px;
        background: transparent;
        color: #363636;
        outline: none;
        padding: 0 50px 0 15px;
        float: right;
        border: 1px solid #ebebeb;
        overflow: hidden;
        background: #fff;
        border-radius: 9999px;
    }

    .custom-input-group .input-group-btn {
        position: absolute;
        right: 0px;
        z-index: 4;
        height: 100%;
        border-radius: 0 9999px 9999px 0 !important;
    }

        .custom-input-group .input-group-btn,
        .custom-input-group .input-group-btn button {
            border: none;
            line-height: 1;
            color: #fff !important;
        }

            .custom-input-group .input-group-btn .icon {
                font-size: 24px;
            }

@media (max-width: 767px) {
    .custom-input-group .input-group-btn .btn {
        padding: 4px 10px;
    }
}

/**Product item **/
.price {
    font-weight: bold;
    color: var(--price-color);
}

.product-vendor {
    color: #7a8189 !important;
    letter-spacing: 1.4px;
    font-weight: normal;
}

a.product-vendor:hover {
    color: var(--primary-color) !important;
}

.item_product_main {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

    .item_product_main .product-thumbnail {
        position: relative;
        overflow: hidden;
    }

        .item_product_main .product-thumbnail .image_thumb {
            transition: transform 0.3s ease-out;
        }

    .item_product_main .video-icon {
        transform: none !important;
        position: absolute !important;
        z-index: 99;
        right: 15px;
        left: auto !important;
        bottom: 5px;
        top: auto !important;
        width: 28px !important;
    }

@media (min-width: 1025px) {
    .item_product_main {
        font-size: 16px;
    }

        .item_product_main:hover {
            box-shadow: 0px 0px 6px 0px rgba(50, 50, 93, 0.1), 1px 1px 5px rgba(0, 0, 0, 0.02);
        }

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

            .item_product_main:hover .product-thumbnail .image_thumb {
                transform: scale(0.8);
            }

            .item_product_main:hover .product-action .group_action {
                position: absolute;
                opacity: 1;
                transform: translateX(0);
                background: #fff;
                z-index: 99;
                visibility: visible;
                align-items: center;
                box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.25);
            }
}

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

.item_product_main .btn-views {
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    transition: all 0.22s ease-out;
}

    .item_product_main .btn-views:hover {
        opacity: 1;
        color: var(--primary-color);
    }

.item_product_main .product-vendor {
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    line-height: initial;
}

.item_product_main .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: initial;
    overflow: hidden;
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    min-height: 35px;
}

@media (max-width: 767px) {
    .item_product_main .product-name {
        min-height: 38px;
    }
}

.item_product_main .product-promo-tag {
    font-size: 13px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: initial;
    overflow: hidden;
}

.item_product_main .product-info {
    padding: 3px 0px;
}

@media (min-width: 992px) {
    .item_product_main .product-info {
        padding: 10px 10px 15px;
    }
}

.item_product_main .price-contact,
.item_product_main .price {
    font-weight: 500;
    color: var(--price-color);
}

@media (max-width: 767px) {
    .item_product_main .price-contact,
    .item_product_main .price {
        font-size: 16px;
        display: block;
    }
}

.item_product_main .compare-price {
    color: var(--text-secondary-color);
    text-decoration: line-through;
    font-size: 14px;
    display: inline-block;
    margin-right: 5px;
}

@media (max-width: 767px) {
    .item_product_main .compare-price {
        font-size: 13px;
    }
}

.item_product_main .group_action {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 10px;
    transform: translateX(100px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-out;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 100%;
    right: 10px;
}

.item_product_main .image_thumb {
    display: block;
}

.item_product_main .label_product {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--label-background);
    padding: 7px 2px;
    font-weight: 500;
    font-size: 12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 100%;
    font-size: 14px;
}

.item_product_main .label_product2 {
    position: absolute;
    top: -6px;
    right: 0px;
    padding: 7px 2px;
    font-weight: 500;
    font-size: 12px;
    z-index: 3;
    width: 70px;
    height: 44px;
    border-radius: 100%;
    font-size: 14px;
}

.item_product_main .label_product .label_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--label-color);
    font-weight: 400;
}

@media (max-width: 991px) {
    .item_product_main .label_product {
        top: 0;
        right: 0;
        display: none;
        position: inherit;
        width: auto;
        height: auto;
        padding: 1px 5px !important;
        font-size: 12px;
        border-radius: 9999px;
        zoom: 1 !important;
    }
}

@media (max-width: 767px) {
    .item_product_main .sapo-product-reviews-badge .sapo-product-reviews-star i {
        font-size: 14px !important;
    }
}

.item_product_main .product-item-cta {
    padding-right: 36px;
}

.item_product_main button.product-item-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    font-size: 18px;
    background: var(--addtocart-color);
    border-radius: 100%;
    color: #fff;
    justify-content: center;
    margin-right: 5px;
    margin-left: auto;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.25);
    position: absolute;
    right: 0;
    top: 0px;
}

    .item_product_main button.product-item-btn.add_to_cart {
        font-size: 16px;
    }

    .item_product_main button.product-item-btn .fas {
        font-size: 12px;
    }

    .item_product_main button.product-item-btn .icon {
        width: 1em;
        height: 1em;
    }

    .item_product_main button.product-item-btn:hover {
        filter: brightness(1.2);
    }

@media (max-width: 767px) {
    .item_product_main button.product-item-btn {
        width: 28px;
        height: 28px;
        top: 0px;
    }
}

.item_product_main.product--media {
    margin-bottom: 0.75rem;
}

    .item_product_main.product--media form {
        display: grid;
        grid-template-columns: 33% 1fr;
        grid-gap: 5px;
        align-items: center;
    }

    .item_product_main.product--media .group_action {
        display: none !important;
    }

    .item_product_main.product--media .product-name {
        -webkit-line-clamp: 2;
        font-weight: normal;
        font-size: 14px;
        min-height: auto;
    }

    .item_product_main.product--media .label_product {
        zoom: 0.7;
    }

    .item_product_main.product--media .product-info {
        padding: 0px 10px 5px;
    }

.product-frame {
    z-index: 9;
}

/** Heading bar **/
.heading-bar {
    font-size: 16px;
    background: #fff;
    padding-bottom: 10px;
    /**border-bottom: 1px solid #eee; **/
    padding-top: 15px;
    border-radius: 5px;
    padding-left: 10px;
    background: linear-gradient(180deg, #fbcece 0%, #ffffff 100%);
}

.heading-bar__title {
    color: var(--text-color);
    font-size: 1.4em;
    margin: 0px;
    line-height: 1.2;
}

    .heading-bar__title a:hover {
        color: var(--primary-color);
    }

.heading-bar__action .link.more {
    color: var(--primary-color);
}

/** top footer **/
.top-footer {
    padding-top: 32px;
    padding-bottom: 32px;
    background: #f7f7f7;
}

.newsletter-form .input-group-field {
    padding: 0px 90px 0px 15px;
}

/** mid footer **/
/** mid footer **/
.title-menu {
    margin: 0px 0px 17px;
    font-weight: 500;
    font-stretch: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .title-menu {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
}

.footer {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.mailchimp-error {
    color: #f51b1b;
}

.mailchimp-success {
    color: #2eb346;
}

.mid-footer {
    padding-top: 20px;
    background: var(--footer-bg);
    color: var(--footer-color);
    font-size: 15px;
    padding-bottom: 33px;
}

    .mid-footer .footer-click {
        position: relative;
        /*
		padding-left: 15px;
		padding-right: 15px;
		*/
    }

@media (min-width: 992px) {
    .mid-footer .footer-click.footer-1 {
        max-width: 30%;
        flex: 0 0 30%;
    }

    .mid-footer .footer-click.footer-2,
    .mid-footer .footer-click.footer-3 {
        max-width: 15%;
        flex: 0 0 15%;
    }

    .mid-footer .footer-click.footer-4 {
        max-width: 25%;
        flex: 0 0 25%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mid-footer .footer-click {
        max-width: 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 767px) {
    .mid-footer .footer-click {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

.mid-footer .title-menu .fa {
    transition: transform 0.3s ease-out;
}

.mid-footer .title-menu.open_ .fa {
    transform: rotate(180deg);
}

.mid-footer .link {
    color: var(--footer-color);
}

    .mid-footer .link .fa {
        font-size: 10px;
    }

    .mid-footer .link:hover {
        filter: brightness(1.2);
    }

.mid-footer .list-menu {
    list-style: none;
    padding: 0px;
}

    .mid-footer .list-menu li + li {
        margin-top: 10px;
    }

.mid-footer .follow_option li + * {
    margin-left: 1rem;
}

.mid-footer .follow_option .link {
    font-size: 25px;
}

    .mid-footer .follow_option .link svg {
        width: 30px;
        height: 30px;
        fill: var(--primary-color);
    }

.mid-footer .single-contact .fa,
.mid-footer .single-contact .fas {
    color: var(--footer-color);
}

@media (max-width: 767px) {
    .mid-footer .list-menu.toggle-mn {
        display: none;
    }
}

.footer-1 > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    .footer-1:before {
        content: "";
        position: absolute;
        right: 5px;
        top: -9999px;
        bottom: -9999px;
        left: -9999px;
        background: var(--footer-overlay);
        z-index: 0;
    }
}

.copyright {
    background: #000;
    color: #fff;
    text-align: center;
}

    .copyright a {
        color: #ffffff;
    }

.fot_copyright {
    font-size: 14px;
}

/** navigation **/
.list-group-item.active {
    z-index: 2;
    color: initial;
    background-color: initial;
    border-color: initial;
}

.list-group-item + .list-group-item.active {
    margin-top: 0;
    border-top-width: 0;
}

.toogle-nav-wrapper {
    position: relative;
    margin-bottom: var(--subheader-padding);
    margin-top: var(--subheader-padding);
}

    .toogle-nav-wrapper .navigation-wrapper {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        width: 100%;
        margin-top: 7px;
    }

    .toogle-nav-wrapper.visible .navigation-wrapper,
    .toogle-nav-wrapper:not(.nav-index):hover .navigation-wrapper {
        opacity: 1;
        visibility: visible;
        z-index: 90;
    }

@media (max-width: 1024px) {
    .toogle-nav-wrapper:hover .navigation-wrapper {
        opacity: 1;
        visibility: visible;
        z-index: 90;
    }
}

.toogle-nav-wrapper .navigation .submenu {
    left: calc(100% - 6px) !important;
    top: 0px !important;
    height: 100%;
}

.top-banner .close {
    z-index: 9;
    position: absolute;
    right: 8px;
    top: 5px;
    background: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px 9px;
}

@media (max-width: 767px) {
    .top-banner .close {
        zoom: 0.7;
    }
}

.navigation {
    --nav-height: 313px;
    border: 1px solid #e1e1e1;
    background: #fff;
    min-height: 100%;
    overflow-y: auto;
}

@media (min-width: 1025px) {
    .navigation {
        max-height: var(--nav-height);
        border-radius: 0 0 5px 5px;
    }
}

.navigation .list-group-item {
    padding: 8px 15px;
    cursor: pointer;
    border-bottom: 0px;
}

    .navigation .list-group-item:hover {
        background: var(--light);
    }

        .navigation .list-group-item:hover > a {
            color: var(--primary-color);
        }

    .navigation .list-group-item > a {
        text-decoration: none;
    }

        .navigation .list-group-item > a > img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            margin-right: 4px;
        }

    .navigation .list-group-item .menu-item__link {
        font-size: 15px;
    }

@media (min-width: 1200px) {
    .navigation .list-group-item .menu-item__link {
        display: grid;
        align-items: center;
        grid-template-columns: 0px 1fr 15px;
        grid-column-gap: 5px;
    }

        .navigation .list-group-item .menu-item__link span {
            grid-column: 2;
        }

        .navigation .list-group-item .menu-item__link.use_icon {
            grid-template-columns: 24px 1fr 15px;
        }
}

.navigation .menu-item {
    position: initial;
}

@media (min-width: 1024px) {
    .navigation .menu-item:hover .submenu {
        display: block;
        z-index: 900;
    }
}

.navigation .submenu {
    display: none;
    width: 250px;
    height: 100%;
    padding: 14px 20px;
    border-radius: 0px;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #dddddd #dddddd #dddddd #e1e1e1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: calc(100% - 15px);
    background: white;
    margin-left: 0px;
    box-shadow: rgba(0, 0, 0, 0.06) -2px 0px 8px 0px;
    z-index: 1;
    overflow: auto;
    font-size: 14px;
}

.navigation .submenu__list {
    /* display: grid; */
    grid-template-columns: repeat( auto-fill, minmax(calc(100% / var(--col-menu) - 10px), 1fr) );
    grid-gap: 10px 5px;
    padding: 0px;
    list-style: none;
    justify-content: end;
}

.navigation .submenu__col {
    display: flex;
    flex-direction: column;
    align-items: start;
    font-size: 14px;
}

.navigation .submenu__item--main {
    /* font-weight: 500; */
}

.header_menu {
    top: 0;
}

    .header_menu .toogle-nav-wrapper {
        display: none;
    }

    .header_menu.active {
        position: sticky;
        position: -webkit-sticky;
        background: #fff;
        box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.4);
        z-index: 1000;
    }

        .header_menu.active a.logo-wrapper {
            display: none;
        }

        .header_menu.active .toogle-nav-wrapper {
            display: block;
        }

        .header_menu.active .search-dropdow {
            display: none;
        }

@media (max-width: 991px) {
    .header_menu.active .toogle-nav-wrapper {
        display: none;
    }

    .header_menu.active #search-header {
        flex: 0 0 50%;
        margin-top: 0;
        padding: 0;
        order: 0;
    }

    .header_menu.active .header-left {
        display: none;
    }
}

.header_menu.active .mid-header {
    font-size: 14px;
    padding: 4px 0px;
}

    .header_menu.active .mid-header:after {
        content: none !important;
    }

.header_menu.active .toogle-nav-wrapper {
    margin: -5px 0px;
    z-index: 8;
}

    .header_menu.active .toogle-nav-wrapper:hover ~ .sticky-overlay {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 7;
        background: rgba(0, 0, 0, 0.3);
        left: 0;
        top: 0;
    }

    .header_menu.active .toogle-nav-wrapper .navigation-wrapper {
        margin-top: -5px;
        max-width: 100%;
    }

.header_menu.active .navigation {
    --nav-height: 75vh;
}

.header_menu.active #search-header {
    order: 0 !important;
    margin: 0 !important;
}

@media (max-width: 320px) {
    .header_menu.active .search-bar {
        visibility: hidden;
        opacity: 0;
    }
}

/** blog item **/
.blogwp .link {
    font-size: 1rem;
    filter: brightness(0.9);
}

    .blogwp .link:hover {
        filter: brightness(1.2);
    }

.blogwp h3,
.blogwp h3 a.link {
    font-weight: normal;
    line-height: 1.2;
    font-size: 1.25rem;
}

.blogwp .media {
    line-height: 1.4;
}

    .blogwp .media .media-body {
        font-size: 12px;
    }

.blogwp .button_custome_35.link {
    font-size: 14px;
    color: var(--primary-color);
}

.blogwp .lead {
    font-size: 14px;
    margin-top: 0.3rem;
    margin-bottom: 0px;
    word-break: break-word;
}

.blogwp.media .image-blog {
    width: 100px;
    flex: 0 0 100px;
}

.blogwp.media + * {
    margin-top: 15px;
    border-top: 2px solid #f7f7f7;
    padding-top: 15px;
}

@media (max-width: 991px) {
    .blogwp.media h3,
    .blogwp.media h3 a.link {
        font-size: 1rem;
    }
}

/** Tab **/
@media (min-width: 768px) {
    .col-cus-6 {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }
}

.tabs-group {
    overflow-x: auto;
    overflow-y: hidden;
}

    .tabs-group::-webkit-scrollbar {
        display: none;
    }

.tabs-group {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.tabs li {
    position: relative;
    border-radius: 4px;
    white-space: nowrap;
    color: var(--text-color);
    background: #dfdfdf;
    border: 1px solid transparent;
    /* font-size: 14px; */
    user-select: none;
}

    .tabs li:not(:last-of-type) {
        margin-right: 0.5rem;
    }

    .tabs li:not(.current) {
        cursor: pointer;
    }

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

    .tabs li.current {
        color: #fff;
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

        .tabs li.current:after {
            background: var(--primary-color);
        }

.tab-content {
    display: none;
}

    .tab-content.current {
        display: block;
        padding: 0 10px;
    }

@media (min-width: 1024px) {
    .toggle-submenu {
        display: none;
    }
}

/** mobile-menu **/
#mobile-menu {
    position: fixed;
    left: -100%;
    top: 0 !important;
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: -1;
    opacity: 0;
    overflow-y: auto;
    padding-bottom: 45px;
}

    #mobile-menu .mobile-menu-body {
        max-height: calc(100% - 68px);
        overflow-y: auto;
    }

    #mobile-menu .menu-close-btn {
        position: fixed;
        left: 300px;
        top: 0;
        line-height: 1;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: #fff;
        color: #9a9a9a;
        opacity: 1;
        border: 1px solid #e1e1e1;
    }

    #mobile-menu .mobile-menu-footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: #f4f4f4;
    }

@media (max-width: 1024px) {
    .awe-section-2 {
        display: none !important;
    }

    #mobile-menu.active {
        left: 0;
        z-index: 99999;
        opacity: 1;
    }

        #mobile-menu.active + .menu-overlay {
            position: fixed;
            left: 0;
            top: 0 !important;
            z-index: 9998;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

    #mobile-menu .subheader {
        display: block;
    }
}

#mobile-menu .user-menu {
    background: var(--header-background);
    color: var(--header-color);
    padding: 10px 15px;
    --text-color: var(--header-color);
}

    #mobile-menu .user-menu .fas {
        font-size: 24px;
    }

#mobile-menu .shop-policises {
    flex-direction: column;
    align-items: start;
    align-items: flex-start !important;
}

    #mobile-menu .shop-policises li {
        padding: 10px 15px;
    }

        #mobile-menu .shop-policises li + * {
            margin: 0px;
        }

#mobile-menu [data-toggle-submenu] {
    float: right;
    width: 30px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#mobile-menu .navigation {
    min-height: auto;
}

    #mobile-menu .navigation .menu-item.active .submenu {
        display: block;
        position: fixed;
        left: 0;
        top: 0 !important;
        width: 300px;
    }

#mobile-menu .toggle-submenu {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -15px;
    background: #eee;
    padding: 10px 15px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 16px;
    text-transform: uppercase;
}

#mobile-menu .navigation .submenu__list {
    --col-menu: 1;
}

/** bread-crumb **/
.bread-crumb,
.bread-crumb .breadcrumb {
    /* background: #dcdcdc; */
}

    .bread-crumb .breadcrumb,
    .bread-crumb .breadcrumb .breadcrumb {
        padding: 0.25rem 1rem;
    }

    .bread-crumb,
    .bread-crumb .link {
        color: #000000;
        box-shadow: 3px 5px 10px #cfcfcf;
    }

        .bread-crumb strong,
        .bread-crumb .link,
        .bread-crumb span {
            font-weight: normal;
            font-size: 14px;
        }

        .bread-crumb strong {
            color: var(--text-color);
        }

/** section **/
section {
    /* margin-bottom: 60px; */
}

    section .container.card {
        border: none;
        border-radius: 8px;
    }

@media (max-width: 767px) {
    section {
        /*margin-bottom: 40px;*/
    }
}

/** pagination **/
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.page-item.disabled:not(.active) {
    display: none;
}

.page-item .page-link,
.page-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 3px;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
    color: #8898aa;
}

    .page-item .page-link:hover,
    .page-item span:hover {
        z-index: 2;
        color: #8898aa;
        text-decoration: none;
        background-color: #dee2e6;
        border-color: #dee2e6;
    }

@media (max-width: 767px) {
    .page-item .page-link,
    .page-item span {
        width: 30px;
        height: 30px;
    }
}

.page-item:first-child .page-link {
    margin-left: 0px;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

/** custom  checkbox**/
.custom-checkbox {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.7rem;
    font-weight: 500;
}

    .custom-checkbox input {
        display: none;
    }

    .custom-checkbox:not(.color) input:checked ~ .fa:after {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .custom-checkbox input:checked ~ .fa:before {
        z-index: 2;
        background: no-repeat 50%/50% 50%;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3E%3C/svg%3E");
    }

    .custom-checkbox .fa {
        display: inline;
    }

        .custom-checkbox .fa:after,
        .custom-checkbox .fa:before {
            content: "";
            pointer-events: none;
            background-color: var(--filter-color, #fff);
            box-shadow: none;
            position: absolute;
            top: 0.125rem;
            left: 0rem;
            display: block;
            width: 1.25rem;
            height: 1.25rem;
        }

        .custom-checkbox .fa:after {
            border: 1px solid #cad1d7;
            transition: all 0.3s ease;
            border-radius: 0.2rem;
            background-color: var(--filter-color, #fff);
            border-color: var(--filter-color);
        }

.open_opacity {
    position: fixed;
    z-index: 9997;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

.mini-cart {
    position: relative;
}

@media (min-width: 1024px) {
    .mini-cart:hover .top-cart-content {
        z-index: 199;
        visibility: visible;
        opacity: 1;
        box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    }
}

.top-cart-content {
    position: absolute;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    width: 400px;
    right: 0%;
    top: calc(100% + 8px);
    color: var(--text-color);
    padding: 10px 15px;
    font-size: 14px;
}

    .top-cart-content:before {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 7.5px 10px 7.5px;
        border-color: transparent transparent #ffffff transparent;
        position: absolute;
        top: -9px;
        right: 60px;
    }

    .top-cart-content:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: -9px;
        z-index: 0;
    }

    .top-cart-content .list-item-cart,
    .top-cart-content .mini-products-list {
        list-style: none;
        padding: 0px;
        z-index: 1;
        position: relative;
    }

    .top-cart-content .list-item-cart {
        max-height: 31ch;
        overflow: auto;
    }

        .top-cart-content .list-item-cart::-webkit-scrollbar {
            width: 3px;
        }

        .top-cart-content .list-item-cart::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            outline: 1px solid var(--primary-color);
        }

    .top-cart-content .detail-item,
    .top-cart-content .product-details {
        width: 100%;
    }

    .top-cart-content a {
        color: var(--text-color);
    }

    .top-cart-content .border_list {
        display: flex;
        align-items: start;
        width: 100%;
    }

    .top-cart-content .image_drop {
        width: 90px;
        height: 90px;
        margin-right: 10px;
    }

    .top-cart-content .product-details {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .top-cart-content .item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }

    .top-cart-content .product-name {
        margin-right: 10px;
        margin-bottom: 0px;
    }

    .top-cart-content .remove-item-cart {
        margin-right: 10px;
        cursor: pointer;
    }

    .top-cart-content .top-subtotal {
        margin: 10px 0;
    }

        .top-cart-content .top-subtotal .price_big {
            font-size: 16px;
            font-weight: 500;
        }

    .top-cart-content .pd.right_ct .btn {
        display: block;
        background: var(--cta-color);
        color: #fff;
        margin-bottom: 10px;
        border-radius: 5px !important;
    }

        .top-cart-content .pd.right_ct .btn:hover {
            filter: brightness(1.2);
        }

.btn-main {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

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

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

    .btn-main--primary:hover {
        color: #fff;
        filter: brightness(1.2);
    }

.addThis_listSharing {
    position: fixed;
    bottom: 85px;
    z-index: 999;
    top: auto !important;
    right: 12px;
    opacity: 0;
    display: none;
}

.backtop {
    right: 12px;
    bottom: 196px;
    top: auto !important;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    top: auto !important;
    height: 44px;
    width: 44px;
    background-color: var(--primary-color);
    line-height: 36px;
    border-radius: 100%;
    font-size: 30px;
    transition: all 0.3s ease-out 0s;
    transform: translateY(-120px);
    opacity: 0;
    visibility: hidden;
    text-align: center;
    color: #fff !important;
    margin-bottom: 5px;
}

    .backtop:hover {
        filter: brightness(1.3);
    }

    .backtop.show {
        z-index: 999;
        transition: transform 0.3s ease-out 0s;
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 576px) {
    .backtop {
        bottom: 60px;
    }
}

.mailchimp-error a {
    color: var(--primary);
}

/* The moving element */
.item_skeleton {
    position: relative;
}

    .item_skeleton::after {
        display: block;
        content: "";
        width: 100%;
        padding-top: calc(100% + 115px);
        background-color: #e2e2e2;
    }

@media (max-width: 767px) {
    .item_skeleton::after {
        padding-top: calc(100% + 115px);
    }
}

.ega-cr-addon {
    z-index: 999 !important;
}

    .ega-cr-addon ul {
        min-height: 54px;
    }

.variant-title {
    font-size: 0.8rem;
    font-weight: 400;
    color: #898989;
}

.single-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 15px;
    margin-bottom: 10px;
}

    .single-contact strong {
        width: 100%;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 10px;
    }

        .single-contact strong + div svg {
            flex: 0 0 auto;
            min-width: 24px;
            margin-right: 5px;
        }

.single-contact-detail {
    font-weight: 400;
    color: #222222;
}

.single-contact .fa,
.single-contact .fas {
    color: var(--primary-color);
    margin-right: 5px;
    width: 20px;
    flex: 0 0 20px;
}

#ega-modal-banner.show {
    z-index: 9997;
}

#ega-modal-banner .btn-form-close {
    position: absolute;
    top: -15px;
    right: -5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 0;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#ega-modal-banner .modal-content {
    background: transparent;
    text-align: center;
    box-shadow: none;
    border: none;
}

#ega-modal-banner .modal-header {
    padding: 0;
    border-bottom: none;
}

#ega-modal-banner .modal-dialog {
    margin: auto;
    position: relative;
}

@media (max-width: 991px) {
    #ega-modal-banner .modal-dialog {
        width: 85%;
    }
}

body.menu-is-hover:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    z-index: 20;
}

body.menu-is-hover .subheader {
    position: relative;
    z-index: 99;
}

.sapo-product-reviews-module {
    padding-top: 15px;
    padding-bottom: 15px;
}

    .sapo-product-reviews-module .fa {
        font-family: FontAwesome !important;
    }

.sapo-product-reviews-badge {
    min-height: 18px;
}

.sapo-product-reviews-module
.bpr-products-module-heading
.bpr-products-module-title {
    color: var(--text-color) !important;
    font-size: 1.4em !important;
    margin: 0px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

.sapo-product-reviews-module .swiper-button-disabled {
    display: none;
}

.btn {
    padding: 7px 20px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn.action-buy,
.btn-new-review,
.tabs li,
.btn-action,
.button_actions .btn_base,
.btn-main {
    border-radius: 99999px !important;
}

.icon {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

#ega-smartsearch-search-suggestion {
    border-radius: 8px !important;
}

    #ega-smartsearch-search-suggestion:after {
        border-color: transparent transparent #ffffff transparent !important;
    }

#ega-smartsearch-search-bottom a span,
.ega-smartsearch-search-title span {
    color: var(--primary-color) !important;
}

.ega-smartsearch-item__title,
.ega-smartsearch-item__description {
    font-size: 14px !important;
    font-weight: normal;
    line-height: 1.4;
}

.ega-smartsearch-item__price ins {
    font-size: 16px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    margin-right: 5px;
}

@media (max-width: 1024px) {
    .ega-smartsearch-item__price ins {
        font-size: 14px !important;
    }
}

.ega-smartsearch-item__price del {
    font-size: 14px !important;
    display: inline-block !important;
    margin-right: 5px;
}

@media (max-width: 1024px) {
    .ega-smartsearch-item__price del {
        font-size: 13px !important;
    }
}

#ega-smartsearch-search-suggestion .ega-smartsearch-search-view-item.active {
    border-radius: 4px;
}

#ega-smartsearch-search-bottom {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 14px !important;
    border-radius: 0 0 8px 8px;
}

#ega-smartsearch-search-top::-webkit-scrollbar {
    width: 3px;
}

#ega-smartsearch-search-top::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    outline: 1px solid var(--primary-color);
}

.ega-smartsearch-search-title {
    flex: 0 0 calc(100% - 70px);
    overflow: hidden;
    display: block;
    padding-right: 10px;
}

    .ega-smartsearch-search-title span {
        word-break: break-all;
    }

@media screen and (max-width: 375px) {
    #ega-smartsearch-search-top {
        max-height: 45vh;
    }
}

@media (max-width: 767px) {
    .product-col.col-6:nth-child(2n + 1) {
        padding-right: 10px;
    }

    .product-col.col-6:nth-child(2n) {
        padding-left: 10px;
    }
}

.banner {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .banner img {
        width: auto;
        transition: all 0.3s ease-in-out;
        width: 100%;
        height: 100%;
    }

    .banner:hover img {
        transform: scale(0.95);
    }

.aspect-ratio {
    aspect-ratio: var(--width) / var(--height);
}

@supports not (aspect-ratio: auto) {
    .aspect-ratio {
        padding-top: calc(var(--height) / var(--width) * 100%);
        height: 0;
        position: relative;
        overflow: hidden;
    }
}

@supports not (aspect-ratio: auto) {
    .aspect-ratio img {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        width: auto;
        max-width: 100%;
        height: auto;
    }
}

#os-search-box-test {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    border: thin solid #e4e4e4;
    box-shadow: 3px 3px 3px #ccc;
    background: white;
    color: red !important;
}

    #os-search-box-test h5 {
        color: #da2a52;
    }

    #os-search-box-test .check-type {
        color: initial;
    }

    #os-search-box-test #addSubmit {
        background: #da2a52;
    }

#os-show #accordion li {
    border: thin solid #f0f0f0;
    border-radius: 3px;
    list-style: none;
    min-height: 206px;
    margin-bottom: 15px;
    box-shadow: 3px 3px 4px 0 #9a9a9a;
}

.fundiin {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .fundiin {
        font-size: 11px;
    }
}

.item_product_main .fundiin.fundiin-alert .fundiin-mess {
    display: none;
}

.fundiin a {
    cursor: pointer;
}

#ega-modal-fundiin .btn-form-close {
    position: absolute;
    top: -15px;
    right: -5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 0;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#ega-modal-fundiin .modal-header {
    height: calc(100vh - 100px);
    overflow: auto;
}

    #ega-modal-fundiin .modal-header > a {
        height: 100%;
        text-align: center;
        width: 100%;
    }

.share-group__item {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

    .share-group__item:hover {
        color: #fff;
        opacity: 0.6;
    }

* + .share-group__item {
    margin-left: 8px;
}

.share-group__item.facebook {
    background-color: #4267b2;
}

.share-group__item.messenger {
    background-color: #006aff;
}

.share-group__item.pinterest {
    background-color: #e60023;
}

.share-group__item.twitter {
    background-color: #1da1f2;
}

.label_product.product_gift_label {
    position: absolute;
    top: auto;
    bottom: 0;
    text-align: center;
}

@media (max-width: 991px) {
    .label_product.product_gift_label {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
}

.main-cart-page .label_product.product_gift_label {
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
}

@media (max-width: 991px) {
    .main-cart-page .label_product.product_gift_label {
        width: 20px;
        height: 20px;
    }
}

.label_product.product_gift_label img {
    max-width: 20px;
}

@media (max-width: 991px) {
    .label_product.product_gift_label img {
        max-width: 18px;
    }
}

.main-cart-page .combo-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #898989;
}

.section_collections {
    margin: 15px 0 15px;
}

.section_banner_adv {
    margin: 40px 0;
}

.section_product_top {
    margin: 20px 0;
}

    .section_product_top .tab-link svg {
        fill: #111111;
    }

    .section_product_top .tab-link.current svg {
        fill: #ffffff;
    }

@media (min-width: 1025px) {
    .section_product_top .tab-link:hover svg {
        fill: #000;
    }
}

.section_product_top .col-cus-6 {
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .section_product_top .col-cus-6 {
        margin-bottom: 20px;
    }
}

.section_banner_coll {
    padding: 15px 0;
}

    .section_banner_coll h2 {
        width: 100%;
        text-transform: uppercase;
        font-size: 22px;
        line-height: 26px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .section_banner_coll p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

    .section_banner_coll .item {
        /* flex: 0 0 auto; */
        width: calc((100% - 30px) / 4);
    }

        .section_banner_coll .item:not(:last-child) {
            margin-right: 15px;
        }

        .section_banner_coll .item a {
            position: relative;
            padding-top: calc(100% * 300 / 450);
            display: block;
        }

            .section_banner_coll .item a img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

    .section_banner_coll.section-threed-cards .banner {
        overflow: unset;
    }

    .section_banner_coll.section-threed-cards .threed-wrapper {
        transition: all 0.5s;
        width: 100%;
        z-index: -1;
    }

    .section_banner_coll.section-threed-cards .threed-hover-img {
        opacity: 0;
        transition: all 0.5s;
        position: absolute !important;
        z-index: -1;
    }

    .section_banner_coll.section-threed-cards a.banner {
        padding-top: 0;
    }

        .section_banner_coll.section-threed-cards a.banner img {
            position: relative;
        }

    .section_banner_coll.section-threed-cards .threed-card {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        perspective: 2500px;
    }

@media (min-width: 1200px) {
    .section_banner_coll.section-threed-cards .threed-card:hover .threed-wrapper {
        transform: perspective(500px) translateY(-5%) rotateX(25deg) translateZ(0) scale(0.8);
        box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    }

    .section_banner_coll.section-threed-cards
    .threed-card:hover
    .threed-hover-img {
        opacity: 1;
        transform: translate3d(0, -30%, 0);
    }
}

@media (max-width: 767px) {
    .section_banner_coll .justify-content-md-center {
        overflow: hidden;
        overflow-x: auto;
    }

        .section_banner_coll .justify-content-md-center .item {
            width: 66.666667%;
        }
}

.section_brand {
    background: #f9f9f9;
}

.btn-new-cus-more {
    background: linear-gradient(90deg, #e32229 0%, #eb5234 100%);
    color: #ffffff;
    height: 37px;
    width: 151px;
    text-align: center;
    display: inline-block;
}

    .btn-new-cus-more svg {
        display: none;
    }

.section_book_360 {
    background: var(--primary-color);
    padding: 20px 0;
}

    .section_book_360 .container .card {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
    }

@media (max-width: 767px) {
    .section_book_360 .container {
        padding: 0;
    }
}

.section_book_360_head {
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e3e3;
}

    .section_book_360_head h2 {
        font-size: 22px;
        font-weight: 600;
        text-transform: uppercase;
        margin: 0;
    }

    .section_book_360_head a:hover {
        color: #fff;
    }

.section_book_360_main ul.book_360_left {
    list-style: none;
    flex: 0 0 auto;
    width: calc(16.6666667%);
    background: #f9f9f9;
    margin-right: 25px;
    padding: 20px 15px;
}

    .section_book_360_main ul.book_360_left li {
        margin-bottom: 15px;
    }

        .section_book_360_main ul.book_360_left li a {
            display: block;
            font-size: 16px;
        }

            .section_book_360_main ul.book_360_left li a.active {
                font-weight: 700;
            }

.section_book_360_main .book_360_right {
    flex: 0 0 auto;
    width: calc(81.3333333% - 25px);
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

    .section_book_360_main .book_360_right .book_360_big {
        flex: 0 0 auto;
        width: 63.73%;
        margin-right: 20px;
    }

        .section_book_360_main .book_360_right .book_360_big .book_360_img a {
            position: relative;
            display: block;
            overflow: hidden;
            padding-top: calc(100% * 409 / 752);
        }

            .section_book_360_main .book_360_right .book_360_big .book_360_img a img {
                position: absolute;
                left: 0;
                top: 0;
            }

        .section_book_360_main .book_360_right .book_360_big .book_360_detail h3 {
            font-size: 18px;
            line-height: 18px;
            margin: 15px 0;
        }

        .section_book_360_main
        .book_360_right
        .book_360_big
        .book_360_detail
        .book_360_date {
            font-size: 12px;
            line-height: 14px;
            color: #a3a3a3;
        }

        .section_book_360_main
        .book_360_right
        .book_360_big
        .book_360_detail
        .book_360_descript {
            font-size: 14px;
            line-height: 18px;
            color: #a3a3a3;
        }

    .section_book_360_main .book_360_right .book_360_list {
        flex: 0 0 auto;
        width: calc(36.27% - 20px);
    }

@media (max-width: 767px) {
    .section_book_360 {
        padding: 20px 15px;
    }

    .section_book_360_head {
        margin-bottom: 16px;
    }

    .section_book_360_main ul.book_360_left {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        margin-right: 0;
        white-space: nowrap;
        padding: 10px 15px;
        gap: 15px;
    }

        .section_book_360_main ul.book_360_left li {
            margin-bottom: 0;
        }

    .section_book_360_main .book_360_right {
        width: 100%;
        margin-top: 15px;
    }

        .section_book_360_main .book_360_right .book_360_big {
            width: 100%;
            margin-right: 0;
            margin-bottom: 15px;
        }

        .section_book_360_main .book_360_right .book_360_list {
            width: 100%;
        }
}

.book_360_item {
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}

    .book_360_item:not(:last-child) {
        margin-bottom: 20px;
    }

    .book_360_item .book_360_img {
        max-width: 95px;
    }

    .book_360_item .book_360_detail h3 {
        font-size: 15px;
        line-height: 18px;
        font-weight: 400;
    }

    .book_360_item .book_360_detail p.book_360_date {
        font-size: 12px;
        line-height: 14px;
        color: #a3a3a3;
    }

/* NEW ARTICLE */
.blogpage {
    /*
  .right-content {
		flex: 0 0 59.2%;
		max-width: 59.2%;
	}
  */
}

    .blogpage .right-content,
    .blogpage .content-blog {
        flex: 0 0 74.65%;
        max-width: 74.65%;
    }

    .blogpage .sidebar {
        flex: 0 0 25.35%;
        max-width: 25.35%;
        border-left: 0;
    }

    .blogpage .sidebar-block {
        padding: 20px;
        border: 1px solid #efefef;
        margin-bottom: 40px;
    }

        .blogpage .sidebar-block .btn-new-cus-more {
            display: inline-flex;
            align-items: center;
            width: auto;
            gap: 5px;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 20px;
        }

            .blogpage .sidebar-block .btn-new-cus-more svg {
                display: inline-block;
                padding: 0;
            }

        .blogpage .sidebar-block .book_360_item:not(:last-child) {
            margin-bottom: 15px;
        }

        .blogpage .sidebar-block .book_360_item .book_360_img {
            max-width: 77px;
        }

        .blogpage .sidebar-block .book_360_item .book_360_detail h4 {
            font-size: 14px;
            line-height: 18px;
            font-weight: bold;
        }

        .blogpage .sidebar-block .list_tag {
            list-style: none;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

            .blogpage .sidebar-block .list_tag li a {
                display: inline-block;
                padding: 5px 10px;
                border: 1px solid var(--primary-color);
                border-radius: 20px;
                color: var(--primary-color);
                margin-bottom: 10px;
            }

    .blogpage .form-coment button {
        width: auto;
    }

        .blogpage .form-coment button:hover {
            color: #fff;
        }

    .blogpage .products_section {
        margin: 30px 0;
        padding: 30px 0;
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
    }

        .blogpage .products_section .btn-new-cus-more {
            width: auto;
            text-transform: uppercase;
        }

        .blogpage .products_section .slick-new:not(.slick-initialized) {
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
        }

    .blogpage .article-relates {
        margin: 30px 0;
    }

    .blogpage .article-relates--title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 25px;
        text-transform: uppercase;
    }

    .blogpage .article-relates .blogwp .content_blog {
        margin-top: 15px;
    }

        .blogpage .article-relates .blogwp .content_blog > * {
            margin-bottom: 15px;
        }

        .blogpage .article-relates .blogwp .content_blog .media-body {
            margin: 0;
        }

@media (max-width: 767px) {
    .blogpage .right-content,
    .blogpage .content-blog {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .blogpage .sidebar {
        flex: 0 0 100%;
        max-width: 100%;
        padding-top: 20px;
    }

    .blogpage .article-relates--list {
        flex-wrap: nowrap !important;
        overflow: hidden;
        overflow-x: auto;
    }

        .blogpage .article-relates--list .product-col {
            -ms-flex: 0 0 70%;
            flex: 0 0 70%;
            max-width: 70%;
        }
}

.shop-policises--child.shop-policises--child-three {
    left: 100%;
    top: 0;
    display: none;
    opacity: 0;
}

.shop-policises--child
ul
li:hover
.shop-policises--child.shop-policises--child-three {
    display: block;
    opacity: 1;
}

/**/
.list-btn {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px 30px;
    flex-flow: wrap;
}

.btn-read {
    text-align: center;
}

.modalRead .modal-dialog {
    max-width: 880px;
}

.modalRead .modal-header {
    padding: 0;
    border: none;
}

    .modalRead .modal-header .close {
        position: absolute;
        right: 20px;
        top: 14px;
        z-index: 9;
        padding: 0;
    }

.modalRead .modal-body iframe {
    width: 100%;
    min-height: 500px;
}

    .modalRead .modal-body iframe::-webkit-scrollbar {
        width: 10px;
    }

    .modalRead .modal-body iframe::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .modalRead .modal-body iframe::-webkit-scrollbar-thumb {
        background: #888;
    }

.modalRead .modal-body #pdf_container {
    height: auto !important;
    max-height: 500px;
    overflow-y: scroll;
    text-align: center;
    background: #eee;
}

    .modalRead .modal-body #pdf_container::-webkit-scrollbar {
        width: 10px;
        border-radius: 10px;
    }

    .modalRead .modal-body #pdf_container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .modalRead .modal-body #pdf_container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .modalRead .modal-body #pdf_container canvas {
        max-width: 100%;
    }

@media (max-width: 767px) {
    .modalRead .modal-body #pdf_container {
        max-height: 700px;
    }

    .shop-policises {
        justify-content: flex-start;
        padding: 0 !important;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .list-btn {
        flex-flow: column-reverse;
    }

    .shop-policises {
        justify-content: flex-start;
        padding: 0 !important;
        gap: 0;
    }
}


.block-layered-nav dd li {
    color: #7a8189 !important;
    line-height: 22px;
    margin: 5px 0 8px 0px;
    text-align: left;
    width: 100%;
    position: relative;
}

.sidebar {
    background: #ffff;
    padding: 15px;
    margin-right: 10px;
    /* padding-top: 15px; */
    box-shadow: 3px 5px 10px #ccc;
}

    .sidebar a:hover {
        color: var(--primary-color) !important;
    }

#current-category a {
    font-weight: bold;
    color: #414141;
}

.m-child-category-list {
    list-style: outside;
}



.phantrang {
    margin: 22px 0
}

    .phantrang .paging.SplitPages {
        text-align: center
    }

        .phantrang .paging.SplitPages a {
            padding: 8px 16px;
            border: 1px solid #e1e1e1;
            margin-right: 4px;
            color: #666;
            font-size: 14px;
            /* font-family: 'UILG'; */
            display: inline-block;
            margin-bottom: 5px
        }

            .phantrang .paging.SplitPages a:hover {
                color: #fff;
                background: #952327;
                border-color: #952327;
            }

        .phantrang .paging.SplitPages .hientai {
            color: #fff;
            background: var(--secondary-color);
            border-color: var(--secondary-color);
        }

.active span {
    /*  color: #919191; 
     font-weight: bold; */
}

.mr_lr {
    color: #919191;
}

@media (max-width: 992px) {
    .visible-lg-cate {
        display: none !important;
    }
}

#wraper_ajax {
    display: flex;
    align-items: center;
    justify-content: center;
}

.current {
    font-weight: bold;
}

.required {
    color: red;
}

.table-order-container {
    color: #616161;
    display: table;
    margin: 0 0 1em 0;
    width: 100%;
    border-collapse: collapse;
}

    .table-order-container span.price {
        font-family: sans-serif;
    }

    .table-order-container .table-order-row {
        display: table-row;
        border-bottom: 1px solid #E0E0E0;
    }

        .table-order-container .table-order-row.table-order-header {
            font-weight: 700;
            background: white;
            font-size: 16px;
        }

    .table-order-container .table-order-cell {
        display: table-cell;
        padding: 15px 5px;
        /*font-size: 14px;*/
    }

.table-order-link-more {
    color: #666161;
    text-align: center;
    background: #ccc;
    cursor: pointer;
    height: 80%;
    font-weight: bold;
}

.table-order-link-id:hover {
    color: #F7941E;
    cursor: pointer;
}

.order-history-date-mobile, .order-history-person-mobile, .order-history-total-mobile, .order-history-status-mobile {
    display: none;
}

.order-history-status-warning {
    color: #DC3545;
}

@media screen and (max-width: 992px) {
    /* start css for main template*/
    /*    .col-fhs-main-body, .container {
        padding: 0px;
    }*/
    /* end css for main template*/
    .table-order-container {
        display: block;
    }

        .table-order-container .table-order-row {
            display: block;
            padding: 10px 0px;
        }

        .table-order-container .table-order-cell {
            display: block;
            padding: 0px 10px;
        }

        .table-order-container .table-order-row.table-order-header {
            display: none;
        }

    .tab-history-item-text {
        font-size: 1em;
    }

    .order-history-date-mobile, .order-history-person-mobile, .order-history-total-mobile {
        display: unset;
        float: left;
        margin-right: 5px;
        font-size: 14px;
        margin-top: 2px;
    }

    .table-order-cell-content-mobile {
        display: flex;
    }

    table-order-cell-content-mobile div:first-child {
        font-size: 16px;
        font-weight: bol
    }

    .order-history-status-mobile {
        display: unset;
        border-radius: 20px;
        border: 1px solid;
        padding: 2px 10px 1px 10px;
        font-size: 12px;
        margin-left: 5px;
        font-weight: bold;
    }

    .table-order-cell:nth-child(5), .table-order-cell:nth-child(6) {
        display: none;
    }

    .order-history-id {
        /*font-size: 1.2em;*/
        font-weight: bold;
    }

    #tab-test {
        cursor: pointer;
    }

    .no-orders-css {
        padding-left: 10px;
        height: 30px;
        padding-top: 7px;
    }
}

.awe-section-4 {
    margin: 10px 0 5px 0;
}

.current .star-icon {
    color: #fff;
    display: inline-block;
}

.star-icon, .document-icon {
    margin-top: -5px;
}
/*.current .star-icon {
    color: #000;
    display: inline-block;
}*/
.xemtc {
    margin-right: 30px;
    /* font-weight: bold; */
    /* color: #706e6e; */
}


/* =====================================================
   PRODUCT DETAIL - LAYOUT 4 : 6
===================================================== */
.product-detail-section {
    width: 100%;
    margin-top: 15px;
}


/* =====================================================
   GRID 40% - 60%
===================================================== */

.product-detail-grid {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 15px;
    align-items: stretch;
}


/* =====================================================
   BOX
===================================================== */

.product-info-box,
.product-intro-box {
    min-width: 0;
    background: #ffffff;
    border: 0.5px solid #e8e8e8;
    border-radius: 5px;
    padding: 25px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}


    .product-info-box:hover,
    .product-intro-box:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    }


/* =====================================================
   SECTION HEADING
===================================================== */

.product-section-heading {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}


.product-heading-line {
    display: block;
    width: 4px;
    min-height: 38px;
    flex-shrink: 0;
    /* margin-right: 12px; */
    background: #e32229;
    border-radius: 4px;
}


.product-heading-small {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.3;
    /* font-weight: 600; */
    letter-spacing: 1.5px;
    color: #e32229;
}


.product-section-heading h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #222222;
}


/* =====================================================
   PRODUCT SPEC
===================================================== */

.product-spec-list {
    width: 100%;
}


.product-spec-row {
    display: grid;
    /*
       Bên trái là label
       Bên phải là value
    */
    grid-template-columns: 44% 56%;
    min-height: 47px;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}


    .product-spec-row:last-child {
        border-bottom: 0;
    }


.product-spec-label {
    padding: 10px 8px 10px 0;
    font-size: 16px;
    line-height: 1.4;
    color: #727272;
}


.product-spec-value {
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.4;
    /* font-weight: 600; */
    color: #333333;
    overflow-wrap: anywhere;
}


/* =====================================================
   INTRODUCTION
===================================================== */

.product-intro-content {
    font-size: 14px;
    line-height: 1.8;
    /* color: #666666; */
}


    .product-intro-content h3 {
        margin: 0 0 16px;
        font-size: 17px;
        line-height: 1.6;
        font-weight: 600;
        color: #333333;
    }


    .product-intro-content p {
        margin: 0 0 14px;
    }


        .product-intro-content p:last-child {
            margin-bottom: 0;
        }


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .product-detail-grid {
        grid-template-columns: 4fr 6fr;
        gap: 15px;
    }

    .product-info-box,
    .product-intro-box {
        padding: 20px;
    }

    .product-section-heading h2 {
        font-size: 19px;
    }

    .product-heading-line {
        height: 34px;
    }

    .product-spec-row {
        grid-template-columns: 43% 57%;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .product-detail-section {
        margin-top: 25px;
    }


    /*
       Mobile chuyển thành 1 cột
    */
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .product-info-box,
    .product-intro-box {
        padding: 18px;
        border-radius: 8px;
    }


    .product-section-heading {
        margin-bottom: 17px;
        padding-bottom: 13px;
    }


    .product-heading-line {
        width: 3px;
        height: 32px;
        margin-right: 10px;
    }


    .product-heading-small {
        font-size: 9px;
        letter-spacing: 1.2px;
    }


    .product-section-heading h2 {
        font-size: 18px;
    }


    .product-spec-row {
        grid-template-columns: 42% 58%;
        min-height: 43px;
    }


    .product-spec-label,
    .product-spec-value {
        padding: 9px 5px 9px 0;
        font-size: 14.5px;
    }


    .product-intro-content {
        font-size: 13.5px;
        line-height: 1.75;
    }


        .product-intro-content h3 {
            font-size: 15px;
            line-height: 1.55;
        }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .product-info-box,
    .product-intro-box {
        padding: 15px;
    }


    .product-spec-row {
        grid-template-columns: 40% 60%;
    }


    .product-spec-label,
    .product-spec-value {
        font-size: 14px;
    }


    .product-section-heading h2 {
        font-size: 17px;
    }
}

/* =====================================================
   PRODUCT INTRO - READ MORE
===================================================== */
.product-intro-box {
    position: relative;
}


/* =====================================================
   CONTENT WRAPPER
===================================================== */

.product-intro-wrapper {
    position: relative;
}


/* =====================================================
   CONTENT
===================================================== */

.product-intro-content {
    position: relative;
    max-height: 330px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.8;
    /* color: #666; */
    transition: max-height 0.5s ease;
}


    /* =====================================================
   TITLE
===================================================== */

    .product-intro-content h3 {
        margin: 0 0 16px;
        font-size: 17px;
        line-height: 1.6;
        font-weight: 600;
        color: #333;
    }


    .product-intro-content p {
        margin: 0 0 14px;
    }


        .product-intro-content p:last-child {
            margin-bottom: 0;
        }


/* =====================================================
   FADE BOTTOM
===================================================== */

.product-intro-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,1) );
    transition: opacity 0.3s ease;
}


/* =====================================================
   EXPANDED
===================================================== */

.product-intro-box.is-expanded
.product-intro-content {
    max-height: 5000px;
}


.product-intro-box.is-expanded
.product-intro-fade {
    opacity: 0;
}


/* =====================================================
   TOGGLE BUTTON
===================================================== */

.product-intro-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 12px;
    padding: 7px 15px;
    border: 0;
    /* border-top: 1px solid #eeeeee; */
    background: #dfdfdf;
    color: #e32229;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    border: 1px solid #ccc;
    border-radius: 5px;
}


    .product-intro-toggle:hover {
        color: #ffffff;
        background: #9f0000;
    }


/* =====================================================
   ARROW
===================================================== */

.product-intro-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.3s ease;
}


.product-intro-box.is-expanded
.product-intro-arrow {
    transform: rotate(180deg);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .product-intro-content {
        max-height: 230px;
        font-size: 13.5px;
        line-height: 1.75;
    }

        .product-intro-content img {
            max-width: 100% !important;
            height: auto !important;
        }

        .product-intro-content h3 {
            font-size: 15px;
            line-height: 1.55;
        }


    .product-intro-fade {
        height: 70px;
    }


    .product-intro-toggle {
        margin-top: 10px;
        padding: 9px 12px;
        font-size: 12.5px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .product-intro-content {
        max-height: 210px;
    }
}

.mt-commitment {
    width: 100%;
    /* margin-top: 40px; */
    /* margin-bottom: 40px; */
}

.mt-commitment-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 6px;
}


/* ================================
   ITEM
================================ */

.mt-commitment-item {
    position: relative;
    min-width: 0;
    padding: 8px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


    /* Đường chia giữa các mục */

    .mt-commitment-item:not(:last-child)::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 58px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: #eeeeee;
    }


/* ================================
   ICON
================================ */

.mt-commitment-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7e3737;
    background: #fff1f1;
    border-radius: 50%;
}

    .mt-commitment-icon svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ================================
   TEXT
================================ */

.mt-commitment-item h3 {
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    color: #292929;
}

.mt-commitment-item p {
    margin: 0;
    max-width: 170px;
    font-size: 13px;
    line-height: 18px;
    color: #777;
}


/* ================================
   HOVER
================================ */

.mt-commitment-item {
    transition: transform .2s ease;
}

    .mt-commitment-item:hover {
        transform: translateY(-3px);
        cursor: pointer;
    }

        .mt-commitment-item:hover .mt-commitment-icon {
            background: #e32229;
            color: #fff;
            transition: .2s ease;
        }


/* ================================
   TABLET
================================ */

@media (max-width: 1100px) {

    .mt-commitment-inner {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
        padding: 22px 10px;
    }

    .mt-commitment-item:nth-child(3)::after,
    .mt-commitment-item:nth-child(6)::after {
        display: none;
    }

    .mt-commitment-item:nth-child(3),
    .mt-commitment-item:nth-child(6) {
        border-right: 0;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .mt-commitment {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .mt-commitment-inner {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 5px;
        border-radius: 5px;
        row-gap: 0;
    }

    .mt-commitment-item {
        min-height: 125px;
        padding: 14px 8px;
        justify-content: flex-start;
    }


        /* đường dọc */

        .mt-commitment-item:nth-child(odd)::after {
            display: block;
            height: 65px;
            right: 0;
        }

        .mt-commitment-item:nth-child(even)::after {
            display: none;
        }


        /* đường ngang */

        .mt-commitment-item:nth-child(-n+4)::before {
            content: "";
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 0;
            height: 1px;
            background: #eeeeee;
        }


    /* icon */

    .mt-commitment-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }

        .mt-commitment-icon svg {
            width: 25px;
            height: 25px;
        }


    /* text */

    .mt-commitment-item h3 {
        /* font-size: 12px; */
        line-height: 17px;
        margin-bottom: 3px;
    }

    .mt-commitment-item p {
        font-size: 11px;
        line-height: 15px;
        max-width: 135px;
    }
}


/* ================================
   MOBILE NHỎ
================================ */

@media (max-width: 400px) {

    .mt-commitment-inner {
        padding-left: 2px;
        padding-right: 2px;
    }

    .mt-commitment-item {
        min-height: 118px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .mt-commitment-icon {
        width: 42px;
        height: 42px;
    }

        .mt-commitment-icon svg {
            width: 23px;
            height: 23px;
        }

    .mt-commitment-item h3 {
        /* font-size: 11px; */
    }

    .mt-commitment-item p {
        /* font-size: 9px; */
        line-height: 14px;
    }
}


/* =====================================================
   CONTACT SECTION
===================================================== */

.mt-contact-section {
    width: 100%;
    /* padding: 70px 0; */
    /* background: #fff; */
}

.mt-contact-container {
    width: 100%;
    /* max-width: 1280px; */
    /* margin: 0 auto; */
    /* padding: 0 24px; */
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: stretch;
}


/* =====================================================
   CONTACT INFO
===================================================== */

.mt-contact-info {
    padding: 15px;
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-right: none;
}


/* HEADING */

.mt-contact-heading {
    margin-bottom: 30px;
}

.mt-contact-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #b4232c;
    /* font-size: 11px; */
    font-weight: 700;
    letter-spacing: 1.8px;
}

.mt-contact-heading h2 {
    margin: 0 0 12px;
    color: #222;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
}

.mt-contact-heading p {
    /* max-width: 440px; */
    margin: 0;
    color: #777;
    /* font-size: 13px; */
    line-height: 1.8;
}


/* =====================================================
   CONTACT ITEM
===================================================== */

.mt-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 19px;
}


/* ICON */

.mt-contact-item-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ead5d7;
    border-radius: 50%;
}

    .mt-contact-item-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #b4232c;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* CONTENT */

.mt-contact-item-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mt-contact-item-title {
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.mt-contact-item-content p {
    margin: 0;
    color: #444;
    /* font-size: 13px; */
    line-height: 1.5;
}

.mt-contact-item-content a {
    color: #444;
    /* font-size: 13px; */
    text-decoration: none;
    transition: color .2s ease;
}

    .mt-contact-item-content a:hover {
        color: #b4232c;
    }


/* =====================================================
   BUTTON
===================================================== */

.mt-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    min-height: 40px;
    padding: 0 20px;
    background: #b4232c;
    border-radius: 4px;
    color: #fff;
    /* font-size: 11px; */
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
    width: 100%;
}

    .mt-contact-button svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mt-contact-button:hover {
        background: #971d25;
        color: #fff;
        transform: translateY(-1px);
    }


/* =====================================================
   GOOGLE MAP
===================================================== */

.mt-contact-map {
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    background: #eee;
}

.mt-contact-map-inner {
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.mt-contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .mt-contact-section {
        padding: 55px 0;
    }

    .mt-contact-container {
        grid-template-columns: 1fr 1fr;
    }

    .mt-contact-info {
        padding: 38px 30px;
    }

    .mt-contact-heading h2 {
        font-size: 26px;
    }

    .mt-contact-map,
    .mt-contact-map-inner,
    .mt-contact-map iframe {
        min-height: 480px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .mt-contact-section {
        padding: 0;
    }

    .mt-contact-container {
        /* padding: 0 18px; */
        grid-template-columns: 1fr;
    }

    .mt-contact-info {
        padding: 10px;
        border-right: 1px solid #eeeeee;
        border-bottom: none;
    }

    .mt-contact-heading {
        margin-bottom: 25px;
    }

        .mt-contact-heading h2 {
            font-size: 24px;
        }

    .mt-contact-item {
        margin-bottom: 16px;
    }

    .mt-contact-map {
        min-height: 350px;
        border: 1px solid #eeeeee;
        border-top: none;
    }

        .mt-contact-map-inner,
        .mt-contact-map iframe {
            min-height: 350px;
        }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .mt-contact-info {
        padding: 20px 20px;
    }

    .mt-contact-heading h2 {
        font-size: 22px;
    }

    .mt-contact-heading p {
        /* font-size: 12px; */
    }

    .mt-contact-item-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

        .mt-contact-item-icon svg {
            width: 16px;
            height: 16px;
        }

    .mt-contact-map,
    .mt-contact-map-inner,
    .mt-contact-map iframe {
        min-height: 300px;
    }
}



/* =====================================================
   FOOTER
===================================================== */

.mt-footer {
    width: 100%;
    background: #fff;
    color: #222;
    border-top: 1px solid #eeeeee;
    margin-top: 10px;
}

.mt-footer-container {
    width: 100%;
    /* max-width: 1320px; */
    margin: 0 auto;
    /* padding: 0 30px; */
}


/* =====================================================
   MAIN
===================================================== */

.mt-footer-main {
    padding: 20px 0 20px 10px;
    background: #fff;
}

    .mt-footer-main .mt-footer-container {
        display: grid;
        grid-template-columns: 1.65fr 1fr 1fr 1.35fr;
        column-gap: 50px;
        align-items: start;
    }


/* =====================================================
   BRAND
===================================================== */

.mt-footer-brand {
    min-width: 0;
}

.mt-footer-logo {
    display: inline-block;
    /* margin-bottom: 18px; */
}

    .mt-footer-logo img {
        display: block;
        width: auto;
        height: 92px;
        max-width: 330px;
        object-fit: contain;
    }

.mt-footer-company {
    max-width: 490px;
    margin: 0;
    color: #444;
    /* font-size: 14px; */
    line-height: 1.7;
}

    .mt-footer-company strong {
        display: block;
        margin-bottom: 4px;
        color: #222;
        font-size: 18px;
        font-weight: 600;
    }


/* =====================================================
   SMALL TITLE
===================================================== */

.mt-footer-small-title {
    margin-bottom: 9px;
    color: #999;
    /* font-size: 10px; */
    font-weight: 700;
    letter-spacing: 1px;
}


/* =====================================================
   APP
===================================================== */

.mt-footer-block {
    margin-top: 24px;
}

.mt-footer-apps {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .mt-footer-apps a {
        display: block;
    }

    .mt-footer-apps img {
        display: block;
        width: auto;
        height: 42px;
        max-width: 135px;
        object-fit: contain;
    }


/* =====================================================
   SOCIAL
===================================================== */

.mt-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

    .mt-footer-social a {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        text-decoration: none;
        transition: transform .2s ease, opacity .2s ease;
    }

        .mt-footer-social a:hover {
            transform: translateY(-2px);
            opacity: .85;
        }


/* FACEBOOK */

.mt-social-facebook {
    background: #e5222e;
    color: #fff;
}

    .mt-social-facebook svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
    }


/* ZALO */

.mt-social-zalo {
    background: #fff;
    color: #1688df;
}

    .mt-social-zalo span {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -1px;
    }


/* INSTAGRAM */

.mt-social-instagram {
    color: #fff;
    background: linear-gradient( 135deg, #5145c5, #e4405f, #f9ce34 );
}

    .mt-social-instagram svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }


/* YOUTUBE */

.mt-social-youtube {
    background: #e5222e;
    color: #fff;
}

    .mt-social-youtube svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }


/* =====================================================
   COLUMNS
===================================================== */

.mt-footer-column {
    min-width: 0;
}

    .mt-footer-column h3,
    .mt-footer-newsletter h3 {
        position: relative;
        margin: 4px 0 25px;
        padding-bottom: 12px;
        color: #171717;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: .2px;
    }

        .mt-footer-column h3::after,
        .mt-footer-newsletter h3::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: #e5222e;
        }


    /* LIST */

    .mt-footer-column ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mt-footer-column li {
        margin-bottom: 13px;
    }

    .mt-footer-column a {
        position: relative;
        color: #555;
        /* font-size: 13.5px; */
        line-height: 1.5;
        text-decoration: none;
        transition: color .2s ease, padding-left .2s ease;
    }

        .mt-footer-column a::before {
            content: "›";
            margin-right: 7px;
            color: #e5222e;
            font-size: 15px;
        }

        .mt-footer-column a:hover {
            color: #e5222e;
            padding-left: 3px;
        }


/* =====================================================
   NEWSLETTER
===================================================== */

.mt-footer-newsletter {
    min-width: 0;
}

    .mt-footer-newsletter > p {
        margin: -7px 0 16px;
        color: #777;
        /* font-size: 12px; */
        line-height: 1.6;
    }


/* =====================================================
   SUBSCRIBE
===================================================== */

.mt-footer-subscribe {
    display: flex;
    width: 100%;
    margin-bottom: 25px;
}

    .mt-footer-subscribe input {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 13px;
        border: 1px solid #e1e1e1;
        border-right: none;
        border-radius: 4px 0 0 4px;
        outline: none;
        background: #fff;
        color: #333;
        font-size: 15px;
    }

        .mt-footer-subscribe input::placeholder {
            color: #999;
        }

        .mt-footer-subscribe input:focus {
            border-color: #e5222e;
        }

    .mt-footer-subscribe button {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 17px;
        border: none;
        border-radius: 0 4px 4px 0;
        background: #e5222e;
        color: #fff;
        /* font-size: 12px; */
        font-weight: 600;
        cursor: pointer;
        transition: background .2s ease;
    }

        .mt-footer-subscribe button:hover {
            background: #c91824;
        }


/* =====================================================
   PAYMENT
===================================================== */

.mt-footer-payment {
    margin-bottom: 23px;
}

.mt-payment-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mt-payment {
    height: 29px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #e7e7e7;
}


    /* VISA */

    .mt-payment.visa {
        color: #174ea6;
        font-size: 13px;
        font-style: italic;
    }


    /* MASTERCARD */

    .mt-payment.mastercard {
        position: relative;
        min-width: 47px;
        overflow: hidden;
    }

        .mt-payment.mastercard b,
        .mt-payment.mastercard i {
            position: absolute;
            width: 17px;
            height: 17px;
            border-radius: 50%;
        }

        .mt-payment.mastercard b {
            left: 8px;
            background: #eb001b;
        }

        .mt-payment.mastercard i {
            right: 8px;
            background: #f79e1b;
            opacity: .9;
        }


    /* MOMO */

    .mt-payment.momo {
        background: #a50082;
        color: #fff;
        font-size: 10px;
    }


    /* ZALOPAY */

    .mt-payment.zalopay {
        color: #36a936;
        font-size: 10px;
    }


/* =====================================================
   BỘ CÔNG THƯƠNG
===================================================== */

.mt-footer-bct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .mt-footer-bct img {
        display: block;
        width: auto;
        height: 66px;
        max-width: 225px;
        object-fit: contain;
    }


/* =====================================================
   BOTTOM
===================================================== */

.mt-footer-bottom {
    border-top: 1px solid #eeeeee;
    background: #fafafa;
    text-align: center;
    padding: 10px;
}

    .mt-footer-bottom .mt-footer-container {
        /* min-height: 52px; */
        /* display: flex; */
        align-items: center;
        justify-content: space-between;
        /* gap: 20px; */
    }

.mt-footer-bottom-left {
    color: #888;
    font-size: 14px;
    /* padding: 30px 0; */
}

.mt-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .mt-footer-bottom-right a {
        color: #777;
        font-size: 14px;
        text-decoration: none;
    }

        .mt-footer-bottom-right a:hover {
            color: #e5222e;
        }

    .mt-footer-bottom-right span {
        width: 1px;
        height: 11px;
        background: #ddd;
    }


/* =====================================================
   LARGE TABLET
===================================================== */

@media (max-width: 1199px) {

    .mt-footer-main .mt-footer-container {
        grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
        column-gap: 35px;
    }

    .mt-footer-logo img {
        height: 82px;
    }

    .mt-footer-company {
        font-size: 13px;
    }

    .mt-footer-column h3,
    .mt-footer-newsletter h3 {
        font-size: 16px;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .mt-footer-main {
        padding: 45px 0;
    }

        .mt-footer-main .mt-footer-container {
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 40px 30px;
        }

    .mt-footer-brand {
        grid-column: span 3;
    }

    .mt-footer-newsletter {
        grid-column: span 3;
        max-width: 500px;
    }

    .mt-footer-logo img {
        height: 78px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .mt-footer-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mt-footer-main {
        padding: 38px 0 35px;
    }

        .mt-footer-main .mt-footer-container {
            display: block;
        }


    /* BRAND */

    .mt-footer-brand {
        margin-bottom: 38px;
    }

    .mt-footer-logo {
        margin-bottom: 15px;
    }

        .mt-footer-logo img {
            height: 70px;
            max-width: 290px;
        }

    .mt-footer-company {
        font-size: 13px;
        line-height: 1.7;
    }

        .mt-footer-company strong {
            font-size: 14px;
        }


    /* COLUMNS */

    .mt-footer-column {
        margin-bottom: 32px;
    }

        .mt-footer-column h3,
        .mt-footer-newsletter h3 {
            margin-bottom: 20px;
            font-size: 16px;
        }

        .mt-footer-column li {
            margin-bottom: 11px;
        }

        .mt-footer-column a {
            font-size: 13px;
        }


    /* NEWSLETTER */

    .mt-footer-newsletter {
        max-width: none;
        margin-top: 5px;
    }

        .mt-footer-newsletter > p {
            font-size: 12px;
        }

    .mt-footer-subscribe input,
    .mt-footer-subscribe button {
        height: 42px;
    }


    /* BOTTOM */

    .mt-footer-bottom .mt-footer-container {
        min-height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 9px;
    }

    .mt-footer-bottom-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .mt-footer-logo img {
        height: 62px;
        max-width: 270px;
    }

    .mt-footer-company {
        font-size: 12.5px;
    }

    .mt-footer-apps img {
        height: 39px;
        max-width: 125px;
    }

    .mt-footer-social {
        gap: 8px;
    }

        .mt-footer-social a {
            width: 34px;
            height: 34px;
        }

    .mt-payment-list {
        gap: 4px;
    }

    .mt-footer-bct img {
        height: 58px;
    }
}


.search-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 30px; */
    margin: 10px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

/* Cụm bên trái */
.search-heading {
    min-width: 0;
}

.search-heading-title {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

/* Line nằm bên trái TOÀN BỘ cụm */
/*.product-heading-line {
    display: block;
    width: 4px;
    min-height: 48px;
    background: #8b5e2e;
    border-radius: 3px;
    flex-shrink: 0;
}*/

/* Toàn bộ nội dung bên phải line */
.search-heading-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-heading h1 {
    margin: 0 0 7px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #222;
}

.search-heading-info {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    /* font-size: 13px; */
}

    .search-heading-info strong {
        color: #333;
        font-weight: 600;
    }

.heading-divider {
    width: 1px;
    height: 14px;
    background: #ddd;
    flex-shrink: 0;
}

/* Sort */
.search-sort {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

    .search-sort label {
        color: #777;
        font-size: 15px;
        white-space: nowrap;
        margin-bottom: 2px;
    }

.sort-select-wrap {
    position: relative;
}

    .sort-select-wrap select {
        appearance: none;
        -webkit-appearance: none;
        /* min-width: 175px; */
        height: 40px;
        padding: 0 38px 0px 11px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background: #fff;
        color: #444;
        font-size: 14px;
        outline: none;
        cursor: pointer;
    }

        .sort-select-wrap select:focus {
            /* border-color: #e32229; */
        }

.sort-arrow {
    position: absolute;
    right: 13px;
    top: 30%;
    transform: translateY(-55%);
    color: #777;
    font-size: 17px;
    pointer-events: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {
    .heading-divider {
        display: none;
    }

    .search-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .search-heading {
        width: 100%;
    }

    .search-heading-title {
        gap: 10px;
    }

    .product-heading-line {
        width: 3px;
        min-height: 40px;
    }

    .search-heading h1 {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .search-heading-info {
        gap: 8px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    .search-sort {
        width: 100%;
        justify-content: space-between;
    }

        .search-sort label {
            font-size: 12px;
        }

    .sort-select-wrap {
        flex: 1;
        max-width: 210px;
    }

        .sort-select-wrap select {
            width: 100%;
            min-width: 0;
            height: 37px;
            font-size: 12px;
        }
}

.search-heading-info span {
    font-size: 15px;
}

.bcline {
    margin-left: 10px;
}


/* =========================================
   404 NOT FOUND
========================================= */
.notfound-page {
    position: relative;
    /* min-height: 620px; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px 20px;
    background: #ffffff;
    border-radius: 5px;
    margin-top: 10px;
    border: 1px solid #e2e2e2;
}

/*.notfound-page::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -180px;
    border-radius: 50%;
    background: rgba(181, 139, 76, 0.06);
}

.notfound-page::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -250px;
    left: -180px;
    border-radius: 50%;
    background: rgba(181, 139, 76, 0.05);
}*/

.notfound-container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* max-width: 1100px; */
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    /* gap: 80px; */
}


/* =========================================
   BOOK ILLUSTRATION
========================================= */

.notfound-visual {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notfound-book {
    position: relative;
    z-index: 3;
    width: 235px;
    height: 300px;
    transform: rotate(-7deg);
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.14));
}

.notfound-book-cover {
    position: absolute;
    z-index: 2;
    inset: 0 15px 0 0;
    padding: 32px 25px;
    border-radius: 5px 10px 10px 5px;
    background: #e32229;
    border-left: 8px solid #848484;
    box-shadow: inset -5px 0 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.12);
}

    .notfound-book-cover::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 13px;
        width: 1px;
        background: rgba(255,255,255,0.2);
    }

.notfound-book-line {
    display: block;
    width: 90px;
    height: 2px;
    margin: 0 auto 9px;
    background: rgba(255,255,255,0.65);
}

    .notfound-book-line.short {
        width: 55px;
        margin-bottom: 35px;
        opacity: .6;
    }

.notfound-book-404 {
    display: block;
    text-align: center;
    font-size: 68px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -4px;
    color: #fff;
}

.notfound-book-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255,255,255,.8);
}

.notfound-book-page {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 0;
    width: 20px;
    height: 290px;
    border-radius: 0 7px 7px 0;
    background: #eee8dc;
    box-shadow: inset -4px 0 0 rgba(0,0,0,.04);
}

.notfound-shadow {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    width: 260px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.10);
    filter: blur(12px);
}

.notfound-circle {
    position: absolute;
    border: 1px solid rgb(159 20 20 / 19%);
    border-radius: 50%;
}

.notfound-circle-1 {
    width: 350px;
    height: 350px;
}

.notfound-circle-2 {
    width: 275px;
    height: 275px;
}


/* =========================================
   CONTENT
========================================= */

.notfound-content {
    max-width: 570px;
}

.notfound-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #e32229;
}

    .notfound-label span {
        display: inline-block;
        width: 28px;
        height: 1px;
        background: #e32229;
    }

.notfound-content h1 {
    margin: 0 0 20px;
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: -1.2px;
    font-weight: 400;
    color: #252525;
}

    .notfound-content h1 strong {
        display: block;
        font-weight: 750;
        color: #909090;
    }

.notfound-content > p {
    max-width: 510px;
    margin: 0 0 30px;
    font-size: 20px;
    line-height: 1.8;
    color: #777;
}


/* =========================================
   BUTTONS
========================================= */

.notfound-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.notfound-btn-primary,
.notfound-btn-secondary {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .2s ease;
}

.notfound-btn-primary {
    color: #fff !important;
    background: #e32229;
    border: 1px solid #df131b;
}

    .notfound-btn-primary:hover {
        background: #87080c;
        border-color: #75070b;
        transform: translateY(-1px);
    }

.notfound-btn-secondary {
    color: #555 !important;
    background: #fff;
    border: 1px solid #d1d1d1;
}

    .notfound-btn-secondary:hover {
        color: #222 !important;
        border-color: #bbb;
        background: #fff;
    }

    .notfound-btn-primary svg,
    .notfound-btn-secondary svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================
   SUGGESTIONS
========================================= */

.notfound-suggestions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 20px;
    border-top: 1px solid #e9e4dc;
}

.notfound-suggestions-title {
    width: 100%;
    margin-bottom: 2px;
    /* font-size: 13px; */
    color: #999;
}

.notfound-suggestions a {
    position: relative;
    /* font-size: 14px; */
    color: #666;
    text-decoration: none;
}

    .notfound-suggestions a:hover {
        color: #e32229;
    }

    .notfound-suggestions a:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -10px;
        top: 50%;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #cfc7bc;
    }


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .notfound-page {
        min-height: 560px;
    }

    .notfound-container {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 45px;
    }

    .notfound-visual {
        height: 330px;
    }

    .notfound-book {
        width: 195px;
        height: 250px;
    }

    .notfound-book-cover {
        padding: 27px 20px;
    }

    .notfound-book-404 {
        font-size: 57px;
    }

    .notfound-book-page {
        height: 240px;
    }

    .notfound-content h1 {
        font-size: 38px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .notfound-page {
        min-height: auto;
        padding: 45px 20px 60px;
    }

    .notfound-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .notfound-visual {
        width: 100%;
        height: 260px;
    }

    .notfound-book {
        width: 165px;
        height: 215px;
    }

    .notfound-book-cover {
        padding: 22px 17px;
        border-left-width: 6px;
    }

    .notfound-book-line {
        width: 65px;
    }

        .notfound-book-line.short {
            width: 42px;
            margin-bottom: 25px;
        }

    .notfound-book-404 {
        font-size: 48px;
        letter-spacing: -3px;
    }

    .notfound-book-bottom {
        bottom: 20px;
        font-size: 7px;
        letter-spacing: 2px;
    }

    .notfound-book-page {
        height: 207px;
        width: 15px;
    }

    .notfound-shadow {
        bottom: 12px;
        width: 190px;
    }

    .notfound-circle-1 {
        width: 250px;
        height: 250px;
    }

    .notfound-circle-2 {
        width: 195px;
        height: 195px;
    }

    .notfound-content {
        max-width: 100%;
    }

    .notfound-label {
        justify-content: center;
        margin-bottom: 14px;
    }

    .notfound-content h1 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: -.5px;
    }

    .notfound-content > p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .notfound-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .notfound-btn-primary,
    .notfound-btn-secondary {
        min-width: 140px;
    }

    .notfound-suggestions {
        justify-content: center;
        text-align: center;
    }

    .notfound-suggestions-title {
        margin-bottom: 4px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .notfound-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .notfound-visual {
        height: 225px;
    }

    .notfound-book {
        width: 145px;
        height: 190px;
    }

    .notfound-book-page {
        height: 183px;
    }

    .notfound-book-404 {
        font-size: 42px;
    }

    .notfound-content h1 {
        font-size: 27px;
    }

    .notfound-actions {
        flex-direction: column;
    }

    .notfound-btn-primary,
    .notfound-btn-secondary {
        width: 100%;
        max-width: 250px;
    }
}

.scrolllbar {
    position: sticky;
    top: 60px;
    height: fit-content;
    height: 100%;
    margin-left: 10px;
    padding: 15px;
}

    .scrolllbar a:hover {
        color: var(--primary-color) !important;
    }

@media (max-width: 767px) {
    .scrolllbar {
        position: static;
        height: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}



/* =========================================================
   NHÀ SÁCH MINH THẮNG - GIỚI THIỆU
   Không thiết lập font-family
   => tự kế thừa font của website
   ========================================================= */

.mst-about {
    --mst-red: #9d1c24;
    --mst-red-dark: #74151b;
    --mst-gold: #c9a45c;
    --mst-dark: #1d1b1a;
    --mst-text: #55504c;
    --mst-light: #f8f6f1;
    --mst-white: #ffffff;
    --mst-border: #e8e2d8;
    color: var(--mst-text);
    line-height: 1.75;
    background: #fff;
    overflow: hidden;
}

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


/* =========================================================
   CONTAINER
   ========================================================= */

.mst-container {
    /* width: min(1180px, calc(100% - 40px)); */
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.mst-about-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #201c18;
}

.mst-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(20, 16, 13, .94) 0%, rgba(20, 16, 13, .78) 45%, rgba(20, 16, 13, .38) 100% ), url("/Content/imgs/photo-1544947950-fa07a98d237f.jpg") center / cover no-repeat;
    transform: scale(1.02);
}

.mst-hero-content {
    position: relative;
    z-index: 2;
    width: min(850px, calc(100% - 40px));
    margin: 0 auto;
    padding: 80px 0;
    color: #fff;
}

.mst-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #e4c98d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.mst-hero-content h1 {
    max-width: 850px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 500;
    line-height: 1.12;
}

    .mst-hero-content h1 span {
        display: block;
        color: #e4c98d;
    }

.mst-hero-content p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.85;
}

.mst-hero-line {
    width: 90px;
    height: 3px;
    margin-top: 35px;
    background: var(--mst-gold);
}


/* =========================================================
   INTRO
   ========================================================= */

.mst-intro {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: center;
    padding: 20px 0;
}

.mst-intro-image {
    position: relative;
}

    .mst-intro-image img {
        display: block;
        width: 100%;
        height: 560px;
        object-fit: cover;
        /* border-radius: 4px; */
    }

    .mst-intro-image::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 20px;
        left: 20px;
        border: 1px solid var(--mst-gold);
        z-index: -1;
    }

.mst-image-label {
    position: absolute;
    left: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 25px;
    background: rgba(157,28,36,.96);
    color: #fff;
}

    .mst-image-label strong {
        font-size: 38px;
        line-height: 1;
    }

    .mst-image-label span {
        max-width: 120px;
        font-size: 12px;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.mst-section-label {
    display: inline-block;
    /* margin-bottom: 15px; */
    color: var(--mst-red);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mst-intro-content h2,
.mst-heading h2 {
    margin: 0 0 10px;
    color: var(--mst-dark);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    font-size: 30px;
}

    .mst-intro-content h2 em,
    .mst-heading h2 em {
        color: var(--mst-red);
        font-style: normal;
    }

.mst-intro-content > p {
    margin: 0 0 17px;
    font-size: 16px;
}

.mst-highlight {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    padding: 25px 28px;
    background: var(--mst-light);
    border-left: 4px solid var(--mst-gold);
}

.mst-quote {
    color: var(--mst-red);
    font-size: 60px;
    line-height: .7;
}

.mst-highlight strong {
    display: block;
    margin-bottom: 5px;
    color: var(--mst-dark);
    font-size: 19px;
}

.mst-highlight p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   SECTION
   ========================================================= */

.mst-section {
    padding: 20px 0;
}

.mst-section-light {
    background: var(--mst-light);
}

.mst-heading {
    max-width: 700px;
    margin: 0 auto 25px;
    text-align: center;
}

    .mst-heading p {
        margin: 0;
        color: #716b65;
        font-size: 16px;
    }


/* =========================================================
   TẦM NHÌN
   ========================================================= */

.mst-grid {
    display: grid;
    gap: 15px;
}

.mst-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.mst-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mst-border);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .mst-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 20px 45px rgba(45,35,25,.12);
    }

.mst-card-image {
    position: relative;
    height: 260px;
    overflow: hidden;
}

    .mst-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

.mst-card:hover .mst-card-image img {
    transform: scale(1.06);
}

.mst-card-image span {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mst-red);
    color: #fff;
    font-size: 15px;
}

.mst-card-body {
    padding: 28px 30px 32px;
}

    .mst-card-body h3 {
        margin: 0 0 12px;
        color: var(--mst-dark);
        font-size: 22px;
        font-weight: 500;
        line-height: 1.35;
    }

    .mst-card-body p {
        margin: 0;
        color: #6a655f;
        font-size: 14px;
    }


/* =========================================================
   SỨ MỆNH
   ========================================================= */

.mst-mission {
    position: relative;
    color: #fff;
    background: linear-gradient( 120deg, #75151b 0%, #941e27 55%, #6d1419 100% );
}

    .mst-mission::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        right: -250px;
        top: -250px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
    }

    .mst-mission::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        left: -250px;
        bottom: -250px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
    }

.mst-heading-white {
    position: relative;
    z-index: 2;
}

    .mst-heading-white .mst-section-label {
        color: #e4c98d;
    }

    .mst-heading-white h2 {
        color: #fff;
    }

        .mst-heading-white h2 em {
            color: #e4c98d;
        }

    .mst-heading-white p {
        color: rgba(255,255,255,.75);
    }

.mst-mission-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.mst-mission-item {
    padding: 35px 25px;
    border: 1px solid rgba(255,255,255,.17);
    background: rgba(255,255,255,.05);
    transition: .3s ease;
}

    .mst-mission-item:hover {
        background: rgba(255,255,255,.10);
        transform: translateY(-5px);
    }

.mst-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5b675;
    color: #e4c98d;
}

    .mst-icon span {
        font-size: 14px;
    }

.mst-mission-item h3 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
}

.mst-mission-item p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
}


/* =========================================================
   GIÁ TRỊ CỐT LÕI
   ========================================================= */

.mst-values {
    background: #fff;
}

.mst-values-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 25px;
    align-items: center;
}

.mst-values-image {
    position: relative;
}

    .mst-values-image img {
        display: block;
        width: 100%;
        height: 443px;
        object-fit: cover;
    }

.mst-values-caption {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    padding: 22px 25px;
    background: rgba(29,27,26,.9);
    color: #fff;
}

    .mst-values-caption span {
        display: block;
        margin-bottom: 4px;
        color: #e4c98d;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .mst-values-caption strong {
        font-size: 21px;
        font-weight: 500;
    }

.mst-values-list {
    border-top: 1px solid var(--mst-border);
}

.mst-value {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 25px;
    padding: 30px 0;
    border-bottom: 1px solid var(--mst-border);
}

.mst-value-number {
    color: var(--mst-red);
    font-size: 20px;
}

.mst-value h3 {
    margin: 0 0 10px;
    color: var(--mst-dark);
    font-size: 23px;
    font-weight: 500;
}

.mst-value p {
    margin: 0;
    color: #6d6862;
    font-size: 14px;
}


/* =========================================================
   CTA
   ========================================================= */

.mst-cta {
    padding: 25px 0;
    background: var(--mst-light);
}

.mst-cta-inner {
    position: relative;
    min-height: 260px;
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background: linear-gradient( 110deg, #241f1b 0%, #302923 100% );
}

    .mst-cta-inner .mst-section-label {
        color: #e4c98d;
    }

    .mst-cta-inner h2 {
        max-width: 650px;
        margin: 0 0 12px;
        color: #fff;
        font-size: clamp(30px, 4vw, 46px);
        font-weight: 500;
        line-height: 1.2;
    }

        .mst-cta-inner h2 span {
            color: #e4c98d;
        }

    .mst-cta-inner p {
        margin: 0;
        color: rgba(255,255,255,.65);
    }

.mst-cta-decoration {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: rotate(-8deg);
    opacity: .15;
}

    .mst-cta-decoration span {
        color: #fff;
        font-size: 55px;
        font-weight: 700;
        line-height: .9;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .mst-intro {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mst-intro-image {
        max-width: 650px;
        margin: auto;
    }

    .mst-mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mst-values-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mst-values-image {
        max-width: 700px;
    }
}


@media (max-width: 700px) {

    .mst-container {
        width: 100%;
    }

    .mst-about-hero {
        min-height: 450px;
    }

    .mst-hero-content {
        padding: 60px 0;
    }

        .mst-hero-content h1 {
            font-size: 40px;
        }

        .mst-hero-content p {
            font-size: 15px;
        }

    .mst-section,
    .mst-intro {
        padding: 10px 0;
    }

    .mst-intro {
        gap: 20px;
    }

    .mst-intro-image img {
        height: 400px;
    }

    .mst-intro-image::after {
        top: 10px;
        left: 10px;
    }

    .mst-grid-2 {
        grid-template-columns: 1fr;
    }

    .mst-mission-grid {
        grid-template-columns: 1fr;
    }

    .mst-values-image img {
        height: 400px;
    }

    .mst-cta-inner {
        padding: 40px 25px;
    }

    .mst-cta-decoration {
        display: none;
    }

    .mst-card-image {
        height: 230px;
    }
}


@media (max-width: 480px) {

    .mst-hero-content h1 {
        font-size: 34px;
    }

    .mst-image-label {
        left: 15px;
        bottom: 15px;
    }

    .mst-card-body {
        padding: 23px;
    }

    .mst-value {
        grid-template-columns: 40px 1fr;
        gap: 15px;
    }

        .mst-value h3 {
            font-size: 19px;
        }
}

.lstNewsTop {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.lstNews {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}








/* =========================================================
   NEWS 2.0 - MAIN LAYOUT
========================================================= */

.news2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 11px;
    width: 100%;
}

.news2-main {
    min-width: 0;
}

.news2-sidebar {
    min-width: 0;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.news2-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.news2-page-label {
    display: block;
    margin-bottom: 4px;
    color: #e32229;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.news2-page-header h1 {
    margin: 0;
    color: #222;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
}

.news2-page-header p {
    max-width: 410px;
    margin: 0;
    color: #777;
    font-size: 14px;
    /* line-height: 21px; */
    /* margin-top: -10px; */
}


/* =========================================================
   CATEGORY
========================================================= */

.news2-category {
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.news2-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 20px; */
    padding-bottom: 13px;
    border-bottom: 1px solid #dedede;
    border-bottom: 1px solid #e8e8e8;
    background: #eaeaea;
    border-radius: 5px 5px 0 0;
    /* box-shadow: 0px 4px 0px 0px #dfdfdf; */
    background: linear-gradient(0deg, #cbcbcb 0%, #ffffff 100%);
    padding: 11px 10px;
}

    .news2-category-header a:hover {
        font-weight: bold;
    }

.news2-category-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .news2-category-title > span {
        display: block;
        width: 4px;
        height: 23px;
        background: #e32229;
        border-radius: 4px;
    }

    .news2-category-title h2 {
        margin: 0;
        color: #222;
        font-size: 18px;
        line-height: 1.3;
        font-weight: 700;
    }

.news2-category-more {
    display: flex;
    align-items: center;
    gap: 7px;
    /* color: #8f1919; */
    /* font-size: 12px; */
    /* font-weight: 600; */
    text-decoration: none;
}

    .news2-category-more b {
        font-size: 16px;
        font-weight: 400;
        transition: transform .25s ease;
    }

    .news2-category-more:hover b {
        transform: translateX(4px);
    }


/* =========================================================
   CATEGORY CONTENT
========================================================= */

.news2-category-content {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 15px;
    padding: 15px;
    background: #fff;
}


/* =========================================================
   FEATURE ARTICLE
========================================================= */

.news2-feature {
    min-width: 0;
}

.news2-feature-image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 255px;
    background: #f3f3f3;
}

    .news2-feature-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .55s ease;
    }

.news2-feature:hover .news2-feature-image img {
    transform: scale(1.045);
}


/* =========================================================
   FEATURE DATE
========================================================= */

.news2-date {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
    color: #941919;
}

    .news2-date strong {
        font-size: 21px;
        line-height: 22px;
        font-weight: 700;
    }

    .news2-date small {
        margin-top: 2px;
        color: #777;
        font-size: 9px;
    }


/* =========================================================
   FEATURE CONTENT
========================================================= */

.news2-feature-content {
    padding-top: 14px;
}

.news2-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

    .news2-meta span {
        color: #999;
        font-size: 12px;
        /* font-weight: 700; */
        text-transform: uppercase;
    }

    .news2-meta time {
        position: relative;
        padding-left: 10px;
        color: #999;
        font-size: 12px;
    }

        .news2-meta time:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #bbb;
            transform: translateY(-50%);
        }


.news2-feature h3 {
    /* height: 52px; */
    margin: 0 0 8px;
    overflow: hidden;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

    .news2-feature h3 a {
        display: -webkit-box;
        color: #222;
        text-decoration: none;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: color .25s ease;
    }

        .news2-feature h3 a:hover {
            color: #e32229;
        }


/* =========================================================
   FEATURE DESCRIPTION - 2 DÒNG
========================================================= */

.news2-feature p {
    /* height: 42px; */
    margin: 0 0 0px;
    color: #777;
    font-size: 14px;
    line-height: 21px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   READ MORE
========================================================= */

.news2-readmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8e1717;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

    .news2-readmore span {
        font-size: 16px;
        transition: transform .25s ease;
    }

    .news2-readmore:hover span {
        transform: translateX(4px);
    }


/* =========================================================
   SMALL NEWS LIST
========================================================= */

.news2-small-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.news2-small {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 14px;
    min-height: 105px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

    .news2-small:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }


/* =========================================================
   SMALL IMAGE
========================================================= */

.news2-small-image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 105px;
    height: 105px;
    background: #f5f5f5;
}

    .news2-small-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .45s ease;
    }

.news2-small:hover .news2-small-image img {
    transform: scale(1.06);
}


.news2-small-date {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 4px 6px;
    background: rgba(255,255,255,.95);
    color: #8f1919;
    font-size: 9px;
    line-height: 12px;
}


/* =========================================================
   SMALL CONTENT
========================================================= */

.news2-small-content {
    min-width: 0;
}

.news2-small-category {
    display: block;
    /* margin-bottom: 5px; */
    color: #767676;
    font-size: 11px;
    /* font-weight: 700; */
    /* letter-spacing: .6px; */
    color: #999;
    font-size: 12px;
}

.news2-small h3 {
    height: 42px;
    margin: 0 0 5px;
    overflow: hidden;
    font-size: 14px;
    line-height: 21px;
    font-weight: 650;
}

    .news2-small h3 a {
        display: -webkit-box;
        color: #222;
        text-decoration: none;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

        .news2-small h3 a:hover {
            color: #e32229;
        }


.news2-small p {
    height: 32px;
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   SIDEBAR
========================================================= */

.news2-sidebar-box {
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}


/* =========================================================
   SIDEBAR HEADER
========================================================= */

.news2-sidebar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* margin-bottom: 18px; */
    padding-bottom: 12px;
    border-bottom: 2px solid #e32229;
}

    .news2-sidebar-heading span {
        display: block;
        margin-bottom: 3px;
        color: #e32229;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.4px;
    }

    .news2-sidebar-heading h2 {
        margin: 0;
        color: #222;
        font-size: 18px;
        line-height: 1.25;
        font-weight: 700;
    }

    .news2-sidebar-heading > a {
        color: #999;
        font-size: 10px;
        text-decoration: none;
    }

        .news2-sidebar-heading > a:hover {
            color: #a32020;
        }


/* =========================================================
   LATEST NEWS
========================================================= */

.news2-latest {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eeeeee;
}

    .news2-latest:first-child {
        padding-top: 0;
    }

.news2-latest-number {
    color: #d4d4d4;
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
}

.news2-latest time {
    display: block;
    margin-bottom: 4px;
    color: #a32020;
    font-size: 9px;
}

.news2-latest h3 {
    height: 40px;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 20px;
    font-weight: 650;
}

    .news2-latest h3 a {
        display: -webkit-box;
        color: #333;
        text-decoration: none;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

        .news2-latest h3 a:hover {
            color: #a32020;
        }


/* =========================================================
   SIDEBAR FEATURED
========================================================= */

.news2-sidebar-featured-image {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 185px;
    background: #f5f5f5;
    position: relative;
}

    .news2-sidebar-featured-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

.news2-sidebar-featured:hover img {
    transform: scale(1.045);
}


.news2-sidebar-featured > time {
    display: block;
    margin-top: 11px;
    margin-bottom: 5px;
    color: #999;
    font-size: 12px;
}

.news2-sidebar-featured h3 {
    /* height: 44px; */
    margin: 0 0 7px;
    overflow: hidden;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
}

    .news2-sidebar-featured h3 a {
        display: -webkit-box;
        color: #222;
        text-decoration: none;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

        .news2-sidebar-featured h3 a:hover {
            color: #e32229;
        }


.news2-sidebar-featured p {
    /* height: 36px; */
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   SIDEBAR FEATURED SMALL
========================================================= */

.news2-sidebar-featured-list {
    margin-top: 20px;
}

.news2-sidebar-featured-small {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #eeeeee;
}

    .news2-sidebar-featured-small + .news2-sidebar-featured-small {
        margin-top: 14px;
    }

    .news2-sidebar-featured-small > a {
        display: block;
        overflow: hidden;
        width: 82px;
        height: 65px;
        position: relative;
    }

    .news2-sidebar-featured-small img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .4s ease;
    }

    .news2-sidebar-featured-small:hover img {
        transform: scale(1.05);
    }

    .news2-sidebar-featured-small time {
        display: block;
        margin-bottom: 4px;
        color: #a32020;
        font-size: 9px;
    }

    .news2-sidebar-featured-small h3 {
        height: 40px;
        margin: 0;
        overflow: hidden;
        font-size: 14px;
        line-height: 20px;
        font-weight: 650;
    }

        .news2-sidebar-featured-small h3 a {
            display: -webkit-box;
            color: #333;
            text-decoration: none;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

            .news2-sidebar-featured-small h3 a:hover {
                color: #e32229;
            }


/* =========================================================
   SIDEBAR CATEGORY
========================================================= */

.news2-sidebar-category {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .news2-sidebar-category li {
        border-bottom: 1px solid #eeeeee;
    }

        .news2-sidebar-category li:first-child {
            /* border-top: 1px solid #eeeeee; */
        }

    .news2-sidebar-category a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 2px;
        color: #444;
        font-size: 16px;
        text-decoration: none;
        transition: all .2s ease;
    }

        .news2-sidebar-category a:hover {
            padding-left: 7px;
            color: #e32229;
        }

    .news2-sidebar-category b {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 21px;
        padding: 0 5px;
        border-radius: 2px;
        background: #f6eeee;
        color: #951919;
        font-size: 9px;
        font-weight: 600;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .news2-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 0;
    }

    .news2-category-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 18px;
    }

    .news2-feature-image {
        height: 230px;
    }

    .news2-small {
        grid-template-columns: 90px minmax(0, 1fr);
        min-height: 90px;
    }

    .news2-small-image {
        width: 90px;
        height: 90px;
    }
}


@media (max-width: 850px) {

    .news2-layout {
        grid-template-columns: 1fr;
    }

    .news2-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .news2-sidebar-box {
        margin-bottom: 0;
    }
}


@media (max-width: 650px) {

    .news2-page-header {
        display: block;
    }

        .news2-page-header p {
            max-width: none;
            margin-top: 12px;
        }

    .news2-category-content {
        grid-template-columns: 1fr;
    }

    .news2-feature-image {
        height: 250px;
    }

    .news2-small-list {
        gap: 14px;
        margin-top: 3px;
    }

    .news2-small {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .news2-small-image {
        width: 110px;
        height: 100px;
    }
}


@media (max-width: 500px) {

    .news2-page-header h1 {
        font-size: 26px;
    }

    .news2-category-title h2 {
        font-size: 19px;
    }

    .news2-feature-image {
        height: 210px;
    }

    .news2-feature h3 {
        font-size: 17px;
        line-height: 24px;
    }

    .news2-sidebar {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 380px) {

    .news2-small {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .news2-small-image {
        width: 90px;
        height: 90px;
    }

    .news2-small p {
        display: none;
    }
}

.page-login {
    padding: 0 20px;
}

.deltai-news {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

    .deltai-news img {
        height: auto !important;
    }

.header_detail_news {
    margin-bottom: 0 !important;
    border-radius: 5px 5px 0 0 !important;
    width: 100% !important;
    display: block !important;
}




/* =========================================
   CATEGORY NEWS - 4 ITEMS / ROW
   Prefix: catnews-
   Không ảnh hưởng CSS bên ngoài
========================================= */

.catnews-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.catnews-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #eeeeee;
    /* border-radius: 10px; */
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .catnews-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }


/* IMAGE */

.catnews-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f5f5f5;
}

    .catnews-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.catnews-card:hover .catnews-image img {
    transform: scale(1.05);
}


/* CONTENT */

.catnews-content {
    padding: 10px 10px 10px;
    box-sizing: border-box;
}

.catnews-date {
    margin-bottom: 5px;
    color: #999;
    font-size: 13px;
    line-height: 1.4;
}

.catnews-title {
    margin: 0 0 5px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    /* Giới hạn 2 dòng */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

    .catnews-title a {
        color: #222;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .catnews-title a:hover {
            color: #c62828;
        }


/* DESCRIPTION */

.catnews-desc {
    margin: 0 0 15px;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    /* Giới hạn 3 dòng */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}


/* READ MORE */

.catnews-readmore {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b21f24;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

    .catnews-readmore span {
        font-size: 18px;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .catnews-readmore:hover {
        color: #8f171b;
    }

        .catnews-readmore:hover span {
            transform: translateX(4px);
        }
/* =========================================
   VIDEO PLAYER
========================================= */

.yt-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 5px;
    user-select: none;
}

.yt-video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    cursor: pointer;
}


/* =========================================
   CENTER PLAY BUTTON
========================================= */

.yt-center-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    z-index: 5;
    transition: transform .2s ease, background .2s ease;
}

    .yt-center-play:hover {
        transform: translate(-50%, -50%) scale(1.08);
        background: #111;
    }

    .yt-center-play:focus {
        outline: none;
    }


/* =========================================
   CONTROL BAR
========================================= */

.yt-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    padding: 0 12px;
    background: linear-gradient( to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .72), transparent );
    z-index: 10;
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}


/*
    Chỉ controls-visible mới làm thanh tác vụ hiện.
    KHÔNG dùng .yt-player:hover ở đây.
*/

.yt-player.controls-visible .yt-controls {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* =========================================
   PROGRESS BAR
========================================= */

/* =========================================
   PROGRESS BAR
========================================= */

.yt-progress-wrap {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 8px;
    height: 6px;
}

.yt-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    outline: none;
}


    /* Chrome / Edge */

    .yt-progress::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 2px;
        background: linear-gradient( to right, #ff4d4f 0%, #ff4d4f var(--progress, 0%), rgba(255, 255, 255, .4) var(--progress, 0%), rgba(255, 255, 255, .4) 100% );
    }

    .yt-progress::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 12px;
        height: 12px;
        margin-top: -4px;
        border: 0;
        border-radius: 50%;
        background: #ff4d4f;
        opacity: 0;
        transition: opacity .15s ease;
    }


    /* Firefox */

    .yt-progress::-moz-range-track {
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .4);
    }

    .yt-progress::-moz-range-progress {
        height: 4px;
        background: #ff4d4f;
    }

    .yt-progress::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border: 0;
        border-radius: 50%;
        background: #ff4d4f;
        opacity: 0;
    }


    /* Hover */

    .yt-progress:hover {
        height: 6px;
    }

        .yt-progress:hover::-webkit-slider-runnable-track {
            height: 6px;
        }

        .yt-progress:hover::-webkit-slider-thumb {
            opacity: 1;
        }

        .yt-progress:hover::-moz-range-thumb {
            opacity: 1;
        }

/* =========================================
   CONTROL BUTTONS
========================================= */

.yt-controls-row {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 46px;
    display: flex;
    align-items: center;
}

.yt-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0 1px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: color .15s ease, transform .15s ease;
}

    .yt-btn:hover {
        color: #ddd;
        transform: scale(1.08);
    }

    .yt-btn:focus {
        outline: none;
    }


/* =========================================
   VOLUME
========================================= */

.yt-volume-box {
    display: flex;
    align-items: center;
}

.yt-volume {
    width: 0;
    height: 4px;
    margin-left: 0;
    opacity: 0;
    cursor: pointer;
    accent-color: #fff;
    transition: width .2s ease, opacity .2s ease;
}

.yt-volume-box:hover .yt-volume {
    width: 65px;
    margin-left: 2px;
    opacity: 1;
}


/* =========================================
   TIME
========================================= */

.yt-time {
    margin-left: 8px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
}

.yt-time-separator {
    color: #aaa;
    margin: 0 2px;
}

.yt-controls-spacer {
    flex: 1;
}


/* =========================================
   SETTINGS
========================================= */

.yt-settings {
    position: relative;
}

.yt-settings-menu {
    position: absolute;
    right: 0;
    bottom: 45px;
    width: 170px;
    padding: 7px 0;
    background: rgba(28, 28, 28, .98);
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
    display: none;
    z-index: 50;
}

    .yt-settings-menu.show {
        display: block;
    }

.yt-settings-title {
    padding: 9px 15px;
    color: #aaa;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 3px;
}

.yt-settings-menu button {
    display: block;
    width: 100%;
    padding: 9px 15px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

    .yt-settings-menu button:hover {
        background: rgba(255, 255, 255, .1);
    }

    .yt-settings-menu button.active {
        color: #fff;
        background: rgba(255, 255, 255, .08);
        font-weight: 600;
    }


/* =========================================
   FULLSCREEN
========================================= */

.yt-player:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
}

.yt-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .yt-player {
        /* border-radius: 0; */
    }

    /*
        Mobile không có hover.
        Controls luôn hiển thị.
    */

    .yt-controls {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        height: 58px;
        padding: 0 7px;
    }

    .yt-progress-wrap {
        left: 8px;
        right: 8px;
        top: 7px;
    }

    .yt-controls-row {
        left: 4px;
        right: 4px;
        bottom: 1px;
    }

    .yt-btn {
        width: 32px;
        height: 34px;
        font-size: 14px;
    }

    .yt-time {
        margin-left: 4px;
        font-size: 11px;
    }

    .yt-volume-box:hover .yt-volume {
        width: 45px;
    }

    .yt-center-play {
        width: 56px;
        height: 56px;
        font-size: 21px;
    }
}


@media (max-width: 380px) {

    .yt-time {
        font-size: 10px;
    }

    .yt-volume-box:hover .yt-volume {
        width: 35px;
    }
}

/* =========================================
   YOUTUBE VIDEO INFO
========================================= */

.youtube-video-info {
    width: 100%;
    /* padding: 14px 0 0; */
}


/* =========================================
   TITLE
========================================= */

.youtube-video-title {
    margin: 0;
    color: #0f0f0f;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.2px;
    word-break: break-word;
}


/* =========================================
   META / DATE
========================================= */

.youtube-video-meta {
    display: flex;
    align-items: center;
    margin-top: 7px;
    color: #606060;
    font-size: 13px;
    line-height: 20px;
}


/* =========================================
   YOUTUBE DESCRIPTION
========================================= */

.youtube-video-description {
    position: relative;
    margin-top: 5px;
    padding: 12px 14px;
    background: linear-gradient(231deg, #eeeeee 0%, #e8e8e8 100%);
    border: 0;
    border-radius: 5px;
    color: #000000;
    /* font-size: 14px; */
    line-height: 1.55;
    overflow: hidden;
    transition: background .2s ease;
}


/* Nội dung mô tả */

.youtube-description-content {
    /*max-height: 84px;*/
    overflow: hidden;
    word-break: break-word;
}


/* Khi mở rộng */

.youtube-video-description.expanded
.youtube-description-content {
    max-height: none;
}


/* =========================================
   TEXT TRONG DESCRIPTION
========================================= */

.youtube-description-content p {
    margin: 0 0 8px;
}

    .youtube-description-content p:last-child {
        margin-bottom: 0;
    }

.youtube-description-content a {
    color: #065fd4;
    text-decoration: none;
}

    .youtube-description-content a:hover {
        text-decoration: underline;
    }


/* =========================================
   XEM THÊM / THU GỌN
========================================= */

.youtube-description-more {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f0f0f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .youtube-description-more:hover {
        text-decoration: underline;
    }

    .youtube-description-more:focus {
        outline: none;
    }


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .youtube-video-description {
        margin-top: 10px;
        padding: 11px 12px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    .youtube-description-content {
        max-height: 78px;
    }

    .youtube-description-more {
        margin-top: 7px;
        font-size: 12px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .youtube-video-info {
        /* padding: 12px 12px 0; */
    }

    .youtube-video-title {
        font-size: 18px;
        line-height: 1.4;
    }

    .youtube-video-meta {
        margin-top: 5px;
        font-size: 12px;
    }

    .youtube-video-description {
        margin-top: 5px;
        padding: 11px 12px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.55;
    }

    .youtube-description-content {
        max-height: 78px;
    }

    .youtube-description-more {
        font-size: 12px;
    }
}

.nv-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 12px;
    z-index: 3;
}