.fs-12 {
    font-size: 1.2rem !important;
}

.fs-13 {
    font-size: 1.3rem !important;
}

.fs-14 {
    font-size: 1.4rem !important;
}

.fs-15 {
    font-size: 1.5rem !important;
}

.fs-16 {
    font-size: 1.6rem !important;
}

.fs-18 {
    font-size: 1.8rem !important;
}

.fs-20 {
    font-size: 2rem !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.p-2r {
    padding: 2rem !important;
}

.py-2r {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.pr-2r {
    padding-right: 2rem !important;
}

.px-2r {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.pt-5r {
    padding-top: 5rem !important;
}

.pb-5r {
    padding-bottom: 5rem !important;
}

.py-5r {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.px-5r {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.pt-6r {
    padding-top: 6rem !important;
}

.pb-6r {
    padding-bottom: 6rem !important;
}

.py-6r {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.p-7r {
    padding: 7rem !important;
}

.pt-8r {
    padding-top: 8rem !important;
}

.pb-8r {
    padding-bottom: 8rem !important;
}

.py-8r {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

.pt-10r {
    padding-top: 10rem !important;
}

.pb-10r {
    padding-bottom: 10rem !important;
}

.py-10r {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}

.mb-2r {
    margin-bottom: 2rem !important;
}

.mt-4r {
    margin-top: 4rem !important;
}

.mb-4r {
    margin-bottom: 4rem !important;
}

.mt-5r {
    margin-top: 5rem !important;
}

.mb-5r {
    margin-bottom: 5rem;
}

.mt-6r {
    margin-top: 6rem !important;
}

.mb-6r {
    margin-bottom: 6rem !important;
}

.my-6r {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.mb-8r {
    margin-bottom: 8rem !important;
}

.rounded-5 {
    border-radius: .5rem !important;
}

.rounded-8 {
    border-radius: .8rem !important;
}

.color-darkgray {
    color: darkgray !important;
}

.color-gray {
    color: var(--gray-bold) !important;
}

.cursor-pointer {
    cursor: pointer;
}

.rounded-5 {
    border-radius: 5px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-12 {
    border-radius: 12px;
}

/*header*/
body {
    padding-top: 100px;
    position: relative;
}

header {
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 7rem;
    z-index: 999;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--white);
    transition: all 0.3s ease-in-out;
    top: 0;
}

header.fixed {
    margin: auto;
    position: fixed;
     box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
}

.setting-menu > .row > div {
    display: flex;
    align-items: center;
}

.setting-menu.fixed .menu-section > ul > li > a {
    color: var(--color-main) !important;
}

.setting-menu.fixed .btn-action-header {
    color: var(--color-main);
}

.navigation__item:hover > .navigation__link:after,
.navigation__link.active:after {
    width: 100%;
}

.navigation__link {
    position: relative;
    padding: 4px 0;
}

.navigation__link:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    margin: auto;
    height: 2px;
    transition: width 0.28s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-color: currentColor;
}

.menu-section > ul > li:first-child {
    /* margin-left: 0; */
}

ul.entry-menu.full-width.scrollbar::before {
    height: 2rem;
}

.header_search {
    position: relative;
}

.search_content {
    display: flex;
    background-color: white;
    border-radius: 10px;
    padding: 0 2.5rem;
}

.search_input {
    width: 100%;
}

.header_search input {
    outline: none;
    height: 5rem;
    border: none;
    width: 100%;
    padding-left: 1.5rem;
    font-size: 15px;
    color: var(--color-main);
    border-radius: 4px 0 0 4px;
}

.header_search input::placeholder {
    color: var(--color-main) !important;
}

.header_search button:hover {
    color: white;
}

.header_search button {
    padding: 0;
}

.search_button {
    height: 5rem;
    line-height: 5rem;
}

.search_button i {
    color: var(--color-main);
}

.header_search button i {
    font-size: 20px;
    font-weight: 500;
}
/*end header*/

/*main*/
.link_small {
    position: relative;
    color: white;
    padding-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

.link_small:hover:after {
    width: 100%;
}

.link_small:hover {
    color: white;
}

.link_small:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 60%;
    height: 2px;
    transition: width 0.28s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-color: currentColor;
}

.link_title {
    position: relative;
    color: var(--color-main);
    padding-bottom: 2px;
    font-weight: 600;
}

.link_title:hover {
    color: var(--color-main);
}

.link_title:hover:after {
    width: 60%;
}

.link_title:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.28s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-color: currentColor;
}

.link_black {
    color: var(--color-main) !important;
}

.link_black:hover {
    color: var(--color-main);
}

.title-section-short {
    font-size: 1.6rem;
    text-transform: uppercase;
    font-weight: 500;
}

.description-section {
    font-size: 1.6rem;
    color: var(--color-text);
}

.product-item .product-action{
    transform: translateY(20px);
    opacity: 0;
    transition: all .2s linear;
}

.product-item:hover .product-action{
    transform: translateY(0);
    opacity: 1;
}

.title-menu {
    font-size: 4.6rem;
    margin-bottom: 25px;
    padding-bottom: 40px;
    position: relative;
    color: var(--black);
}

.title-menu::after {
    content: "\f322";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Font Awesome 6 Pro';
    font-size: 2rem;
}

.btn_readmore {
    color: var(--color-main) !important;
    font-size: 1.6rem;
    font-weight: 500;
}

.btn_readmore i {
    font-size: 1.6rem;
    padding-left: .5rem;
    transition: all .2s ease-in-out;
}

.btn_readmore:hover i {
    padding-left: 1rem;
    transition: all .2s ease-in-out;
}

.bg-news {
    position: relative;
    background-color: #F9F5EF;
    overflow: hidden;
}

.pagination_name {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.pagination_name::before {
    content: "\f111";
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 7px;
    vertical-align: middle;
    margin-right: 1rem;
    color: var(--gray);
}

.nav-link.navigation__link {
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 13px;
    padding-bottom: 3px;
}

.nav-link.navigation__link::after,
.menu-link.navigation__link::after {
    left: 0;
}

.product-item img {
    object-fit: cover !important;
}

.article-category a {
    font-size: 16px;
    color: var(--gray-bold);
}

.home_article .inner-content {
    background-color: #F9F5EF;
}

.post-date,
.article-title,
.article-item .link_title {
    text-transform: uppercase;
}

.hover_img {
    cursor: pointer;
}

.hover_img img {
    transition: opacity .2s ease;
}

.hover_img .img_2,
.hover_img:hover .img_1 {
    opacity: 0;
}

.hover_img:hover .img_2 {
	opacity: 1;
}

.bg_contact {
    background-size: cover;
    background-position: bottom;
}

.home_contact .form-group > label:first-child {
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
}
/*end main*/

/*footer*/
.footer_menu a {
    white-space: nowrap;
    color: lightgray;
    font-size: 1.6rem;
}

.footer_social {
    display: flex;
    justify-content: flex-end;
}

.footer_social .social_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 1rem;
}

.footer_social .social_item:hover {
    background-color: var(--color-highlight);
}

.footer_social .social_item:last-child {
    margin-right: 0;
}

.footer_social .social_item i {
    color: white;
    font-size: 14px;
}

.back-to-top {
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    z-index: 999;
}

.back-to-top a {
    color: white !important;
    background-color: var(--color-highlight);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
}

body:not(.home) .back-to-top {
    background-color: #f3f3f378;
}

.hv_30:hover:after {
    width: 30% !important;
}

.hv_40:hover:after {
    width: 40% !important;
}

.show_70:after {
    width: 70%;
}
/*end footer*/

/*other page*/
body:not(.home) footer .lg_white {
    display: block;
}

.page_header {
    position: relative;
}

.page_header .container > .row {
    justify-content: space-between;
}

.page_header .container > .row > div {
    display: flex;
    align-items: center;
    flex: none;
    max-width: none;
    width: max-content;
}

.page_header .menu-section > ul > li > a {
    color: var(--color-black);
}

body:not(.home) .full_name_cs {
    color: var(--color-main);
}

.page_header .btn-action-header {
    color: var(--color-main);
}

.btn_close {
    color: var(--color-main) !important;
}

.quick_search_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

.quick_search_content .card-body {
    padding: 5rem 0;
}

.quick_search_content .categories-section a {
    padding: 4px 0;
}

.search-popup__input {
    position: relative;
}

.search-popup__input input {
    padding-bottom: 0.625rem;
    border: 0;
    border-bottom: 2px solid #767676;
    outline: none;
    width: 100%;
    height: 4rem;
}

.button-popup__input {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0;
    transition: opacity 0.15s linear;
    color: #767676;
    outline: none;
    font-size: 2rem;
    height: 100%;
}

.search-popup__input input:focus + .button-popup__input {
    color: var(--color-main);
}

.search_form {
    position: relative;
}

.search_form .wrap-suggestion {
    position: relative;
    border: none;
    margin-top: 2.5rem;
}

.suggestion_image img {
    object-fit: contain;
}

.breadcrum_article {
    max-width: calc(100% - 3.3rem);
    margin: 0 auto;
    border: 2px solid #e4e4e4;
    padding: 1rem;
}

.breadcrum_article h1 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: clamp(3rem, max(5vw, 3rem), 6rem);
    margin-bottom: 1rem;
}

.breadcrum_content {
    height: 24rem;
    width: 100%;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
}

.breadcrum_categories a {
    color: var(--color-black);
    text-transform: uppercase;
    font-size: clamp(13px, max(1.2vw, 13px), 16px);
}

.page_list_article .article-title {
    font-size: clamp(16px, max(2vw, 16px), 26px);
}

.article-title-detail {
    font-size: clamp(3rem, max(5vw, 3rem), 4rem);
    font-weight: 700;
}

.contact_form .form-group {
    margin-bottom: 2rem;
}

.contact_form .form-control {
    border-color: var(--gray);
}

.product-detail-footer {
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    margin: 3rem 0;
    padding: 2rem 0 1rem;
}

.zoomLens {
    width: 85px !important;
    height: 85px !important;
}

.content-title {
    font-size: 28px;
    margin-bottom: 3rem;
}

.contact_info {
    text-align: center;
}

.contact_info h5 {
    font-size: 20px;
    margin-bottom: 10px;
}

.contact_info span {
    font-size: 16px;
}

.contact_social li i {
    font-size: 25px;
}

.contact_social .fa-facebook:before {
    color: #1877f2
}

.contact_social .fa-instagram:before {
    color: #e4405f
}

.contact_social .fa-linkedin:before {
    color: #0077b5
}

.contact_social .fa-twitter:before {
    color: #1da1f2
}

/*css catalog*/
.magazine-viewport .page {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
.magazine-viewport {
    width: auto !important;
    height: calc(100vh - 70px) !important;
}
.magazine-viewport .next-button, .magazine-viewport .previous-button {
    top: 50% !important;
    transform: translateY(-50%);
    height: auto !important;
    font-size: 29px;
    width: 35px !important;
    background: #ffffffc4;
    border-radius: 4px !important;
    text-align: center;
    font-family: 'Font Awesome 6 Pro';
}
.magazine-viewport .previous-button:before {
    content: "\f104";
}
.magazine-viewport .next-button:before {
    content: "\f105";
}
.magazine-viewport .previous-button {
    left: -40px !important;
}
.magazine-viewport .next-button {
    right: -40px !important;
}
.magazine-viewport .magazine {
    /*top: 0 !important;*/
    /*left: 0 !important;*/
}
.bg-catalogue {
    background-image: url(/templates/thucpham11/assets/media/background/z4108572342959_a692590bbce99f477a4693e74c3b194b.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*end css catalog*/

.img_flag {
    height: 25px;
    object-fit: contain;
}

.name-about-product {
    font-size: 2.6rem;
    color: #2a792a;
    font-weight: 700;
}

.description-about-product{
    font-size: 1.6rem;
}

.title-footer {
    position: relative;
    font-size: 25px;
    color: var(--white);
    border-bottom: 1px solid var(--white);
    padding-bottom: 5px;
}

footer {
    background-color: var(--color-black);
}

@media (min-width: 576px) {
    .breadcrum_content {
        height: 38rem;
    }
    
    .swiper-slide--wrap {
        left: 5rem;
        right: 5rem;
    }
}

@media (min-width: 768px) {
    .col-px-30 {
        margin-left: -3rem;
        margin-right: -3rem;
    }
    
    .col-px-30 > div[class*="col-"] {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    .col-px-60 {
        margin-left: -6rem;
        margin-right: -6rem;
    }
    
    .col-px-60 > div[class*="col-"] {
        padding-left: 6rem;
        padding-right: 6rem;
    }
    
    .navi_cus {
        position: absolute;
        bottom: 0;
        left: calc(50% + 1rem);
        display: flex;
        align-items: center;
    }
    
    .navi_cus div[class*="swiper-button-"] {
        position: static;
        border-radius: 50%;
        border: 1px solid var(--color-black);
        height: 36px;
        width: 36px;
        font-size: 2.6rem;
        margin: 0 0.5rem;
    }
}

@media (min-width: 992px) {
    .header_menu {
        flex: 1 1;
    }
    
    .header_menu .menu-section > ul {
        display: flex;
        justify-content: space-evenly;
        margin-left: 1rem;
    }
        
    .language-switch i.fa-flag {
        display: none;
    }
    
    .col-lg-custom {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .entire-quickview .product-title-detail {
        padding-right: 2.5rem;
    }
    
    .wrap-suggestion {
        position: static;
    }
}

@media (min-width: 1200px) {
    .py-xl-10 {
        padding: 10rem 0 !important;
    }
    
    .menu-section > ul > li > .entry-menu li {
        padding: .8rem 1rem;
    } 
}

@media (min-width: 1400px) {
    .d-xxl-block {
        display: block !important;
    }
    
    .w-xxl-78 {
        width: 78%;
    }
}

@media (max-width: 1200px) {
    .btn_mobile {
        margin-top: auto;
        border-top: 0.1rem solid #e3e3e3;
        justify-content: space-evenly;
        padding: 1rem;
    }

    .btn_mobile  .btn-action-header,
    .setting-menu.fixed .btn-menu-mobile,
    .menu-section.open .user_full_name {
        color: var(--color-main) !important;
    }
}

@media (max-width: 992px) {
    .entire-action-header {
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 80px;
    }
    
    header {
        padding: 0;
        height: 80px;
    }

    header > div {
        width: 100%;
    }
    
    .setting-menu-mobile > .container > .row > div:last-child {
        text-align: right;
    }
    
    .footer_social {
        justify-content: center;
    }
    
    .swiper-button-prev, .swiper-button-next {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .title-section {
        font-size: 2.5rem;
    }

    header .logo-section img {
        height: 6.8rem;
    }
    
    .number_tk {
        font-size: 10rem;
    }
    
    .title_tk {
        font-size: 1.8rem;
    }
}

@media (max-width: 400px) {
    .nav-link.navigation__link {
        font-size: 11.5px;
    }
}