@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --main-bg-color: rgba(167, 22, 16, 1);
    --main-bg-color-opacity: rgba(167, 22, 16, 0.6);
    --main-bg-secondary-color: rgba(237, 238, 243, 1);
    --main-bg-third-color: rgba(247, 247, 247, 1);
    --btn-secondary-color: rgba(231, 231, 231, 1);
    --h1-font-size: 3rem;
    --h2-font-size: 2.5rem;
    --normal-font-size: 1rem;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--normal-font-size);
}

.bg-main {
    background-color: var(--main-bg-color);
}

.text-main {
    color: var(--main-bg-color);
}

.font-site-main {
    font-size: var(--h1-font-size);
}

.font-site-secondary {
    font-size: var(--h2-font-size);
}

.bold {
    font-weight: 700;
}

.bg-secondary {
    background-color: var(--main-bg-secondary-color);
}

.bg-third {
    background-color: var(--main-bg-secondary-color);
}

.text-secondary {
    color: var(--main-bg-secondary-color);
}

.text-blk {
    color: black;
}

::marker {
    font-size: 1.5rem;
    color: var(--main-bg-color);
}

a {
    text-decoration: none;
    color: black;
    font-size: 1rem;
}

h1, h2.title {
    font-size: var(--h1-font-size);
    text-transform: uppercase;
    color: var(--main-bg-color);
    font-weight: 700;
}

h2 {
    font-size: var(--h2-font-size);
}

.dropdown.language-switch {
    border-radius: 10px;
    background-color: transparent;
}

.p-6 {
    padding: 5rem;
}

.px-6 {
    padding: 0 5rem;
}

.py-6 {
    padding: 5rem 0;
}

.pe-6 {
    padding-bottom: 5rem;
}

.dropdown.language-switch .btn.dropdown-toggle {
    border-radius: 24px;
    border: 1px solid #D7D7D7;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    column-gap: 4px;
}

header {
    box-shadow: -4px -4px 4px 0px rgba(0, 0, 0, 0.25);
    height: 80px;
}

header .navbar {
    height: 80px;
}

header .navbar .nav-item {
}

header .navbar .nav-link {
    text-transform: uppercase;
    font-size: 1rem;
    color: black;
    height: 80px;
    text-align: center;
    line-height: 80px;
    padding: 0;
}

header .navbar .nav-link.active {
    background: var(--main-bg-color);
    color: #fff;
    padding: 0 1rem;
}

header .navbar .navbar-collapse {
    z-index: 2;
}

.home-features {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5rem;
    background-color: var(--main-bg-color);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 2rem 4rem;
    z-index: 1;
}

.home-features .features {
    background-color: var(--main-bg-color);
}

.home-features .features .feature-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
    color: #fff;
    text-align: center;
}

.home-features .features .feature-box h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.home-about-us {
    padding: 10rem 0 5rem 0;
    background-size: cover;
    background-image: url("/assets/images/partern-gioi-thieu.png");
}

.home-about-us .h-left {
    display: flex;
}

.home-about-us .h-left .h-img {
    position: relative;
    padding: 0.5rem;
}

.home-about-us .h-left .h-img .frame-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
}

.home-about-us .h-left .h-img .frame-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70%;
}

.home-about-us .h-left .h-img img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

.home-about-us .h-left .h-img:nth-child(2) {
    margin-top: 6rem;
}

img.framed {
    box-shadow: -50px -50px 0 -40px var(--main-bg-color),
    50px 50px 0 -40px var(--main-bg-color);
}

.btn {
    padding: 14px 20px 14px 20px;
    border-radius: 4px;
    font-size: 1rem;
}

.btn.btn-secondary {
    background-color: var(--btn-secondary-color);
    color: black;
    border-color: transparent;
}

.home-product {
    background-color: var(--main-bg-secondary-color);
}

.home-product .nav {
}

.home-product .nav.header-tab .nav-item {
    border-top: 1px solid rgba(143, 143, 143, 1);
    padding: 1rem;
}

.home-product .nav.header-tab .nav-item .nav-link {
    color: rgba(138, 138, 138, 1);
}

.home-product .nav.header-tab .nav-item .nav-link.active {
    color: black;
}

.home-product .nav.header-tab .nav-item:has(.nav-link.active) {
    border-top: 5px solid var(--main-bg-color);
    margin-top: -2px;
}

.home-product .content {
    min-height: 510px;
}

.home-product .c-left {
    position: relative;
    background-color: var(--main-bg-color);
    padding: 5rem 2rem 2rem 2rem;
}

.home-product .c-left .category {
    color: white;
    text-transform: uppercase;
}

.home-product .c-left h2 {
    color: white;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.home-product .c-left .nav.product-list .nav-item .nav-link {
    color: white;
    padding-left: 0;
}

.home-product .c-left .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.home-product .c-left .bottom .btn.btn-link {
    display: flex;
    justify-content: space-between;
    color: white;
    text-decoration: none;
    width: 100%;
    border-top: 1px solid rgba(217, 217, 217, 1);
    border-radius: 0;
    padding: 1rem 0 0;
}

.home-product .c-right {
    background-color: white;
    min-height: 510px;
    padding: 0;
}

.home-product .c-right .carousel .carousel-item .content {
    min-height: 510px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-product .c-right .carousel .carousel-item .content img {
    max-height: 350px;
    max-width: 90%;
    width: auto;
    margin: auto;
}

.home-product .c-right .carousel .carousel-nav {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
}

.home-product .c-right .carousel .carousel-control-prev, .home-product .c-right .carousel .carousel-control-next {
    background-color: var(--btn-secondary-color);
    color: rgba(113, 113, 113, 1);
    width: 3rem;
    height: 3rem;
    position: relative;
    font-size: 1.5rem;
}

.home-product .c-right .carousel .carousel-control-prev:hover, .home-product .c-right .carousel .carousel-control-next:hover {
    background-color: var(--main-bg-color);
    color: white;
}

.why-choose-us {
    background-size: cover;
    background-image: url("/assets/images/partern-wcu.png");
    overflow: hidden;
}

.why-choose-us ul {
    list-style-type: none;
    padding-left: 0;
}

.why-choose-us ul li {
    display: flex;
    column-gap: 2rem;
    margin-bottom: 3rem;
}

.why-choose-us ul li img {
    width: 4rem;
    height: 4rem;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 4rem;
}

.why-choose-us ul li h3 {
    font-weight: 700;
    font-size: 1.25rem;
}

.achievements {
    background-image: url("/assets/images/achievement-bg.png");
    background-size: cover;
    background-color: var(--main-bg-color);
    color: white;
    column-gap: 1rem;
}

.achievements h2 {
    color: white;
    font-size: 3rem;
    text-transform: uppercase;
}

.achievements .a-item {
    text-align: center;
    padding: 1rem;
    border: 1px solid white;
    border-radius: 0.5rem;
}

.achievements h4 {
    color: white;
    font-size: 3rem;
}

.achievements .a-item small {
    font-size: 1rem;
}

.new-card {
    padding: 1rem;
}

.new-card .new-card-body {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.new-card .new-card-body img {
    height: 260px;
    width: 100%;
}

.relateProducts-slick .new-card .new-card-body {
    align-items: center;
}

.relateProducts-slick .new-card .new-card-body img {
    width: auto;
    max-width: 170px;
}

.relateProducts-slick .new-card .new-card-body img {
    height: 170px;
}

.new-card .new-card-body .new-card-date {
    color: rgba(123, 123, 123, 1);
}

.new-card .new-card-body .new-card-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.new-card .new-card-body .new-card-title a {
    text-decoration: none;
    color: black;
}

.new-card .new-card-body .new-card-text {
    color: rgba(123, 123, 123, 1);
}

.home-gallery {
    background-color: rgba(244, 245, 250, 1);
}

.gallery-slick {
    margin-bottom: -6rem;
}

.gallery-slick .gallery-item {
    position: relative;
    height: 460px;
}

.gallery-slick .gallery-item img {
    height: 100%;
    width: auto;
}

.gallery-slick .gallery-info {
    position: absolute;
    bottom: 0;
    text-transform: uppercase;
    padding: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.gallery-slick .gallery-info a {
    color: white;
}

footer {
    background-color: var(--main-bg-color);
}

footer h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.social-item {
    display: flex;
    align-items: start;
    column-gap: 1rem;
    color: white;
}

footer a {
    color: white;
    text-decoration: none;
}

.page-header {
    height: 492px;
    width: 100%;
    background-color: var(--main-bg-color);
    background-size: cover;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 99999px var(--main-bg-color-opacity);
    background-position: center center;
}

.page-header h1 {
    color: white;
    text-align: center;
    max-width: 1024px;
    text-shadow: 2px 2px black;
}

.page-header nav ol li a {
    color: rgba(178, 178, 178, 1);
    text-decoration: none;
    text-shadow: 1px 1px black;
}

.page-header .breadcrumb-item + .breadcrumb-item::before {
    color: white;
}

.page-header nav ol li.active {
    color: white;
    text-shadow: 1px 1px black;
}

.breadcrumb-item {
    font-size: 0.8rem;
}

.breadcrumb-item a {
    font-size: 0.8rem;
}

.news .new-filters {
    padding: 2rem;
    box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.news .new-filters h2 {
    color: black;
    font-size: 2rem;
    border-bottom: 1px solid rgba(207, 207, 207, 1);
    width: 100%;
}

.news .new-filters ul {
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.news .new-card {
    padding: 0 0.5rem;
}

.about-us-img-header {
    margin-top: -3rem;
    padding-bottom: 3rem;
}

.about-us-img-header .row {
    row-gap: 1rem;
}

.about-us-img-header .row .img-item:nth-child(odd) {
    margin-top: -5rem;
    padding: 1rem;
}

.about-us-img-header .row .img-item img {
    width: 100%;
}

.stepper {
    .nav-tabs {
        position: relative;
        border-bottom: none;
    }

    .nav-tabs > li {
        width: 25%;
        position: relative;

        &:after {
            content: '';
            position: absolute;
            background: rgba(138, 138, 138, 1);
            display: block;
            width: 100%;
            height: 1px;
            top: 10px;
            /*left: 50%;*/
            z-index: 1;
        }

        &.completed {
            &::after {
                background: var(--main-bg-color);
            }
        }

        &:last-child {
            &::after {
                background: transparent;
            }
        }

        &.active:last-child {
            .round-tab {
                background: var(--main-bg-color);

                &::after {
                    content: '✔';
                    color: #fff;
                    position: absolute;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    top: 0;
                    display: block;
                }
            }
        }
    }

    .nav-tabs [data-toggle='tab'] {
        width: 25px;
        height: 25px;
        margin: 20px auto;
        border-radius: 100%;
        border: none;
        padding: 0;
        color: rgba(138, 138, 138, 1);
    }

    .nav-tabs [data-toggle='tab']:hover {
        background: transparent;
        border: none;
    }

    .nav-tabs > .active > [data-toggle='tab'], .nav-tabs > .active > [data-toggle='tab']:hover, .nav-tabs > .active > [data-toggle='tab']:focus {
        color: var(--main-bg-color);
        cursor: default;
        border: none;
    }

    .tab-pane {
        position: relative;
        padding-top: 50px;
    }

    .round-tab {
        width: 25px;
        height: 25px;
        line-height: 22px;
        display: inline-block;
        border-radius: 25px;
        background: #fff;
        border: 2px solid var(--main-bg-color);
        color: var(--main-bg-color);
        z-index: 2;
        position: absolute;
        left: 0;
        text-align: center;
        font-size: 14px;

    }

    .completed .round-tab {
        background: var(--main-bg-color);

        &::after {
            content: '✔';
            color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 0;
            display: block;
        }
    }

    .active .round-tab {
        background: #fff;
        border: 2px solid var(--main-bg-color);

        &:hover {
            background: #fff;
            border: 2px solid var(--main-bg-color);
        }

        &::after {
            display: none;
        }
    }

    .disabled .round-tab {
        background: #fff;
        color: rgba(138, 138, 138, 1);
        border-color: rgba(138, 138, 138, 1);

        &:hover {
            color: var(--main-bg-color);
            border: 2px solid var(--main-bg-color);
        }

        &::after {
            display: none;
        }
    }

    .tab-title {
        text-decoration: none;
        position: absolute;
        top: -2rem;
        text-align: center;
        font-size: 1rem;
        left: -15%;
    }
}

.about-us-content .moTa {
    text-align: center;
    max-width: 900px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.25rem;
    margin: auto;
}

.img-absolute-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
    max-height: 100%;
}

.about-us-content2 {
    z-index: 1;
    position: relative;
}

.about-us-content2 .left {
    display: flex;
    flex-direction: column;
}

.about-us-content2 .left img:first-child {
    max-width: 80%;
}

.about-us-content2 .left img:last-child {
    align-self: end;
    margin-top: -3rem;
    max-width: 80%;
}

.bg-achievements {
    background-image: url("/assets/images/achievement-bg.png");
    background-size: cover;
    color: white;
    column-gap: 1rem;
}

.bg-square {
    background-image: url("/assets/images/bg-3.png");
    background-size: cover;
    color: white;
    column-gap: 1rem;
}

section.awards img {
    height: 140px;
}

.page-contact {
    margin-top: -10rem;
}

.page-contact .contact-content {
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
}

.page-contact .contact-left {
    background-color: rgba(255, 241, 240, 1);
    color: black;
    display: flex;
    row-gap: 2rem;
    flex-direction: column;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.page-contact .contact-right {
    background-color: white;
    color: black;
    display: flex;
    row-gap: 2rem;
    flex-direction: column;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.page-contact hr {
    color: rgba(167, 22, 16, 1);
}

.page-contact .social a {
    text-decoration: none;
    color: var(--main-bg-color);
    font-size: 1.5rem;
}

input.form-control {
    height: 3.5rem;
    padding: 1rem;
    color: black;
    background-color: rgba(244, 244, 244, 1);
    border: none;
}

textarea.form-control {
    padding: 1rem;
    background-color: rgba(244, 244, 244, 1);
    border: none;
}

.btn.btn-main {
    background-color: var(--main-bg-color);
    color: white;
    border-radius: 8px;
    height: 3.5rem;
}

.contact-item .contact-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--main-bg-color);
    color: white;
    border-radius: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 1.5rem;
}

.page-link {
    border: none;
    color: rgba(221, 40, 43, 1);
    font-weight: bold;
    font-size: 1rem;
}

.disabled > .page-link, .page-link.disabled {
    border: none;
    background-color: transparent;
}

.product-site-bar ul {
    list-style-type: none;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(190, 190, 190, 1);
}

.product-site-bar ul li {
    border-bottom: 1px solid var(--main-bg-color);
    padding: 1rem 0;
}

.product-site-bar ul li:last-child {
    border-bottom: none;
}

.product-site-bar ul li a {
    color: rgba(40, 40, 40, 1);
}

.product-site-bar ul li.active a {
    color: var(--main-bg-color);
    font-weight: 700;
}

.product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
}

.product-item .product-image {
    width: 300px;
    height: 300px;
    background-color: rgba(242, 242, 242, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-item .product-image img {
    width: 90%;
    margin: auto;
}

.product-item .product-title a {
    color: var(--main-bg-color);
    font-size: 1.5rem;
}

.product-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fabFeatures {
    column-gap: 1rem;
    row-gap: 2rem;
}

.fabFeatures .fabFeature {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
}

.fabFeatures .fabFeature .fabImage {
    width: 150px;
    height: 150px;
    background-color: var(--main-bg-color);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fabFeatures .fabFeature .fabImage img {
    max-width: 60%;
    max-height: 60%;
}

.fabFeatures .fabFeature .fabFeatureContent {
    max-width: 150px;
    text-wrap: wrap;
    text-align: center;
}

.puaImages {
    justify-content: center;
    align-items: center;
}

.puaImages .puaImage {
    width: 25%;
    height: auto;
}

.puaImages .puaImage img {
    max-width: 100%;
    max-height: 100%;
}

.product-package {
    padding: 2rem;
    border: 1px solid rgba(207, 207, 207, 1);
    border-radius: 0.5rem;
}

.product-package .title {
    color: var(--main-bg-color);
    font-weight: 700;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(219, 219, 219, 1);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.product-package .title-1 {
    font-size: 3rem;
    font-weight: 700;
}

.fab2 .fabFeatures .fabFeature {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    border: 1px solid var(--main-bg-color);
    background-color: white;
}

.fab2 .fabFeatures .fabFeature .fabFeatureContent {
    text-align: center;
    max-width: 100%;
    font-size: 1.2rem;
    color: var(--main-bg-color);
    font-weight: 700;
}

.fab2 .fabFeatures .fabFeature .fabImage {
    background-color: white;
    border-radius: 0;
    width: 200px;
    height: 200px;
}

.digital-printing .header {
    background-color: var(--main-bg-color);
    color: white;
}

.digital-printing .dp-left {
    width: 200px;
    padding: 1.2rem;
}

.digital-printing > div:not(:first-child) {
    border: 2px solid var(--main-bg-color);
}

.digital-printing .dp-right {
    width: 100%;
    padding: 1.2rem;
}

.digital-printing .dp-right .dp-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
}

.digital-printing .dp-right .dp-item img {
    width: 100%;
}

.btn.btn-download {
    border: 2px solid var(--main-bg-color);
    border-radius: 1rem;
    color: var(--main-bg-color);
    width: 315px;
    max-width: 100%;
}

.btn.btn-download:hover, .btn.btn-secondary:hover {
    background-color: var(--main-bg-color);
    color: white;
    border: none;
    -webkit-transition: background-color 250ms ease-out;
    -ms-transition: background-color 250ms ease-out;
    transition: background-color 250ms ease-out;
}

.line-2, .line-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.line-3 {
    -webkit-line-clamp: 3;
}

.how-paper-is-made .hpim-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    column-gap: 1rem;
}

.how-paper-is-made .hpim-item img {
    max-width: 100px;
}

.how-paper-is-made .hpim-item span {
    text-transform: capitalize;
    color: var(--main-bg-color);
    font-weight: bold;
    font-size: 1.5rem;
}

.how-paper-is-made .steps {
}


.how-paper-is-made .steps .step img {
    max-width: 100%;
}

.how-paper-is-made .steps:nth-child(odd) {
    background-color: var(--main-bg-secondary-color);
}

.how-paper-is-made .steps h2 {
    color: var(--main-bg-color);
    text-transform: capitalize;
}

.how-paper-is-made .steps .step h3 {
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: capitalize;
}

.product-album {
}

.product-album .product-album-item {
    position: relative;
    height: 460px;
}

.product-album .product-album-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

.thumbnail-slider .splide__slide img, .splide__slide img {
    width: 100%;
    height: auto;
}

.thumbnail-slider .splide__slide {
    opacity: 0.3;
}

.thumbnail-slider .splide__slide.is-active {
    opacity: 1;
    border: none;
}