@font-face {
    font-family: "LexendDeca";
    src: url("../fonts/LexendDeca-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LexendDeca";
    src: url("../fonts/LexendDeca-Medium.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LexendDeca";
    src: url("../fonts/LexendDeca-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* hurricane-regular - latin_vietnamese */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hurricane';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/hurricane-v9-latin_vietnamese-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.bg-light-blue {
    background: #e6f7fd;
}

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

.space-block-10 > .row {
    margin-right: -10px;
    margin-left: -10px;
}

.space-block-10 > .row > div {
    padding-right: 10px;
    padding-left: 10px;
}

.sub-title {
    font-family: 'Hurricane';
    color: var(--color-highlight);
    font-size: 4rem;
}

.wrap-breadcrumbs {
    padding: clamp(2rem, 4vw, 10rem);
    background-size: cover;
    position: relative;
    text-align: center;
    color: var(--color-highlight2);
}

.wrap-breadcrumbs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.wrap-breadcrumbs h1 {
    font-weight: bold;
    font-size: clamp(15px, 2vw, 3.5rem);
}

.dang-nhap-dangky {
    display: flex;
    align-items: center;
}

.language-switch img {
    width: 22px;
}

.header-01 > .container > .row > div:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.prod_order .quali {
    color: #cb1111;
    font-weight: bold;
}

span.name--pro-order {
    width: 78%;
}

.title-pro-order {
    font-weight: bold;
    margin-bottom: 1.2rem;
    display: inline-block;
}

.language-switch {
    /* position: relative; */
    /* margin-left: 140px; */
    /* z-index: 3; */
}

.header-02 {
    /* color: white; */
    padding: 12px;
}

.btn-mini-cart-header {
    display: flex;
    align-items: center;
    color: black;
}

.btn-mini-cart-header i, .icon-text-phone-header i {
    background-color: var(--color-highlight2);
    padding: 12px 11px;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 10px;
}

.icon-text-phone-header {
    display: flex;
    align-items: center;
    color: black;
}

.header-02 > .container > .row > div:nth-child(2) {
    display: flex;
    justify-content: flex-end;
}

.bg-fomr-search-header {
    width: 500px;
    /* border: 1px solid var(--color-highlight); */
}

.bg-fomr-search-header .input-group {
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #d7d7d7;
}

.header-03 .menu-section > ul {
    text-align: center;
}

.img-cate-home-left {
    height: calc(100% - 3rem);
}

.item-service:before {
    position: absolute;
    content: '';
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .5;
    z-index: 2;
}

.item-service.swiper-slide-active:before {
    opacity: 0;
    content: none;
}

.item-service.swiper-slide-active {
    margin-left: -110px;
    /* margin-right: 100px; */
    width: 1200px !important;
    z-index: 5;
}

/*block gioi thieu trang chu*/
.about-us .slogan , .about-us .text-note {
    font-family: 'Hurricane';
    color: var(--color-highlight);
}

.about-us .slogan {
    font-size: 3rem;
}

.about-us .text-note {
    font-size: 4rem;
}

.about-us .list-info .title {
    font-size: 15px;
    font-weight: 700;
}

.about-us .btn-link {
    background-color: var(--color-highlight2);
    color: var(--white);
    transition: all .3s;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    margin: .5rem 0 2rem;
    display: inline-block;
}

.bg-home-about {
    background: #fbf6e0;
}

.text-desc, .list-info {
    color: var(--color-highlight2);
}

/*block gioi thieu trang chu*/
.row.cus-cate-product-home img {
    box-shadow: rgb(0 0 0 / 13%) 5px 10px 10px 0px;
    border-radius: 3px;
}

.cus-cate-product-home a {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-highlight);
    margin-top: 15px;
    padding: 3px 10px;
    font-size: 17px;
    min-height: 55px;
    color: #005BAC;
    font-weight: 600;
    border-radius: 3px;
    align-content: center;
}

.cus-cate-product-home a:hover {
    background-color: var(--color-highlight2);
    color: white;
}

.cus-flex-tab-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 2rem;
}

.cus-flex-tab-home .swiper-button-next {
    top: 15px;
    border: 2px solid var(--color-text);
    color: black;
    padding: 0 6px;
    border-radius: 3px;
}

.cus-flex-tab-home .swiper-button-prev {
    top: 15px;
    left: auto;
    right: 45px;
    border: 2px solid var(--color-text);
    color: black;
    padding: 0 6px;
    border-radius: 3px;
}

.box-arrow .btn-arrow {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50% !important;
    border: 1px solid var(--color-highlight) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem !important;
    background: white;
    color: var(--color-highlight2);
}

.box-arrow .swiper-button-next {
    top: 25px;
    right: 0;
}

.box-arrow .swiper-button-prev {
    top: 25px;
    left: auto;
    right: 45px;
}

.section-tab-01 {
    margin: 60px 0;
}

.section-tab-02 {
    margin: 60px 0;
}

.cus-item-noi-bat .article-item .article-title a {
    color: white;
}

.cus-item-noi-bat > div:nth-child(2) .ratio-1-1 {
    padding-top: 48.7%;
}

.cus-item-noi-bat > div:nth-child(2) > .row > div:nth-child(1) .article-item {
    margin-bottom: 10px;
}

.section-sp-gan-link {
    /* background-color: black; */
    padding: 60px 0 60px 0;
}

.swiper--tile-sp-link {
    font-size: 22px;
    color: white;
    padding: 15px 20px 20px 20px;
    font-weight: 600;
}

.swiper--wrap-sp-link {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    z-index: 2;
    width: auto;
    background-image: linear-gradient(#00000014, #7A1315);
}

.cus-row-sp-link > .row > div:nth-child(1), .cus-row-sp-link > .row > div:nth-child(2) {
    flex: 0 0 50%;
    max-width: 50%;
}

.cus-row-sp-link > .row > div:nth-child(1) .img-title-sp-link .ratio-1-1, .cus-row-sp-link > .row > div:nth-child(2) .img-title-sp-link .ratio-1-1 {
    padding-top: 55%;
}

.img-title-sp-link img {
    border-radius: 10px 10px 0 0;
}

.section-sp-gan-link .cus-flex-tab-home {
    border-bottom: none;
    margin-bottom: 20px;
}

.img-title-sp-link {
    position: relative;
}

.img-title-sp-link:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #0000004d;
    z-index: 2;
    opacity: 0;
}

.img-title-sp-link:hover:before {
    opacity: 1;
}

footer {
    background-color: var(--light);
    padding: 5rem 0 3rem;
    background-image: url(https://cdn12597.cdn4s14.io.vn/media/banner/background-website.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: relative;
}

footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    opacity: 0;
}

.box-img-bct img {
    max-width: 180px;
}

footer .icon-text-phone-header i {
    color: white;
}

.home footer {
    margin-top: 0px;
}

#age-verify {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#age-verify .popup-content {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

#age-verify .popup-content p {
    margin-bottom: 20px;
    font-size: 26px;
    color: var(--color-highlight);
    margin-top: 20px;
    font-weight: bold;
}

#age-verify .popup-content button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#age-verify .logo-section-popup img {
    max-width: 300px;
}

.bg-css-page-chung {
    position: relative;
    border-radius: 1rem;
    padding: 15px;
}

.bg-css-page-chung:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(to right, var(--color-highlight), var(--yellow)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.product-description {
    /* white-space: pre-wrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: 5px;
}

.icon-atrr-options-sp {
    display: flex;
    align-items: center;
}

.icon-atrr-options-sp i {
    font-size: 23px;
    color: var(--color-highlight);
    width: 34px;
}

.icon-atrr-options-sp .title {
    text-transform: uppercase;
    font-size: 13px;
    color: #726c6c;
}

.title-cate-qua-tang a {
    font-size: 20px;
    color: white;
    font-weight: 600;
}

.title-cate-qua-tang {
    padding: 10px 0 10px 0;
    text-align: center;
    background-color: var(--color-highlight2);
}

.img-left-form-qua-tang img {
    width: 100%;
}

.bg-form-fat-trc {
    background-color: var(--color-highlight2);
    padding: 30px;
    color: white;
}

.bg-form-fat-trc .form-group {
    margin-bottom: 1.5rem;
}

.magazine-viewport .page {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.magazine-viewport {
    width: auto !important;
    height: calc(80vh - 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;
}

.magazine-viewport .previous-button:before {
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f104";
}

.magazine-viewport .next-button:before {
    font-family: "Font Awesome 6 Pro" !important;
    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(https://cdn4854.cdn4s8.io.vn/media/images/banner-popup-original-copy.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 0 15px 0;
}

.video-slider-main iframe {
    width: 100%;
    height: 360px;
}

.swiper-wrap-hd-dat-hang {
    text-align: center;
}

.count-stt-hd-dat-hang {
    color: white;
    background-color: var(--color-highlight2);
    padding: 6px 15px;
    width: max-content;
    border-radius: 50%;
    font-weight: 600;
    font-size: 18px;
}

.cus-border-hd-dat-hang {
    position: relative;
    border-top: 1px solid var(--color-highlight2);
    margin-top: 40px;
}

.cus-border-hd-dat-hang > .row {
    position: relative;
    margin-top: -20px;
}

.cus-name-link-cate-sp1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    position: relative;
    margin-top: 30px;
}

.cus-name-link-cate-sp1 .swiper-button-next {
    top: 15px;
    border: 2px solid var(--color-text);
    color: black;
    padding: 0 6px;
    border-radius: 3px;
}

.cus-name-link-cate-sp1 .swiper-button-prev {
    top: 15px;
    left: auto;
    right: 45px;
    border: 2px solid var(--color-text);
    color: black;
    padding: 0 6px;
    border-radius: 3px;
}

.title-cate-sp-sale {
    font-size: 3rem;
    color: var(--color-highlight2);
    font-weight: bold;
}

.post-date-cus {
    border: 1px solid var(--black);
    width: max-content;
    padding: 2px 12px;
    text-align: center;
}

.article-item > .row {
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px;
}

.name-company-footer {
    font-size: 1.7rem;
    font-weight: bold;
}

.title-footer {
    font-size: 1.7rem;
}

.footer-menu-section ul li a {
    font-weight: 600;
}

.footer-menu-section ul li a:hover {
    color: var(--color-highlight2);
}

.img-mxh-footer-bct img {
    max-height: 75px;
}

.img-mxh-footer-bct2 img {
    max-height: 55px;
}

.img-banner-page-khuyen-mai img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

.social-section-form-lien-he li i {
    font-size: 18px;
}

.menu-section .menu-link.active {
    color: var(--color-highlight) !important;
}

.wrp-effect-change-img {
    position: relative;
}

.wrp-effect-change-img .effect-change-img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    filter: opacity(0);
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 10;
}

.wrp-effect-change-img:hover .effect-change-img img {
    opacity: 1;
    filter: opacity(1);
    visibility: visible;
}

.cus-menu-footer01 .img-mxh-footer-bct {
    margin-top: 30px !important;
}

.cus-sp-quan-tam .view-small > .row {
    margin: 0 0 0 0;
}

.img--zalo-icon-mxh {
    width: 13px;
    filter: brightness(0) invert(1);
}

.img--zalo-icon-mxh-contact {
    width: 13px;
    filter: brightness(0) invert(1);
}

.xem-them-slider-product a {
    background-color: var(--color-highlight);
    color: white;
    padding: 8px 20px;
    font-weight: 600;
    border-radius: 5px;
}

.xem-them-slider-product {
    text-align: center;
    margin-top: 30px;
}

footer .social-section ul i {
    color: var(--color-highlight) !important;
    font-size: 30px;
}

#return-to-top {
    position: fixed;
    z-index: 1000;
    bottom: 4.5rem;
    right: 1.5rem;
    background: var(--color-highlight);
    width: 4rem;
    height: 4rem;
    display: block;
    text-decoration: none;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
    color: white;
    border-radius: 50%;
}

#return-to-top i {
    position: relative;
    font-size: 1.8rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    line-height: 4rem;
}

#return-to-top:hover {
    background: var(--color-highlight);
    color: white;
}

/*css block san pham*/
.product-item:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--color-highlight);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.product-item .btn-product-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-highlight2);
}

.product-item .btn-product-action.wishlist {
    color: var(--color-highlight2);
}

.product-item .btn-product-action.cart {
    color: var(--white);
    background-color: var(--color-highlight2);
}

.product-item .add-to-cart {
    padding: 0 1rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background-color: #FF9D1C;
    color: var(--black);
    border-radius: 2rem;
}

/*css block san pham*/
@media (min-width: 1000px) and (max-width: 1350px) {
    .menu-section .entry-menu.dropdown ul {
        left: calc(50% + 1.5rem);
    }
}

@media (min-width: 768px) and (max-width: 1300px) {
    .item-service.swiper-slide-active {
        margin-left: -180px;
        /* margin-right: 100px; */
        width: 1000px !important;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .bg-fomr-search-header {
        width: 360px;
    }
}

@media (max-width: 768px) {
    .menu-section > ul > li.has-child > a {
        display: inline-block !important;
    }

    .menu-section .grower {
        border-left: 0;
    }

    .header-mobile-01 > .container > .row > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-mobile-01 {
        padding: 10px 0;
    }

    .texxt-count-cart-mb {
        display: none;
    }

    .social-section-form-lien-he li i {
        font-size: 20px;
    }

    .is-mobile .logo-section img {
        max-height: 5rem;
    }

    .is-mobile footer .logo-section img {
        height: 10rem;
    }

    .item-service.swiper-slide-active {
        margin-left: 0px;
        /* margin-right: 100px; */
        width: auto !important;
    }

    .cus-flex-tab-home {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .block-tab.nav {
        position: relative;
        margin-right: 0px;
        margin-top: 15px;
    }

    .block-tab.nav .nav-item .nav-link {
        margin: 0 15px 0 0px;
    }

    .cus-item-noi-bat > div:nth-child(2) > .row > div:nth-child(1) .article-item {
        margin-bottom: 30px;
    }

    .is-mobile .menu-section .active {
        color: var(--color-highlight2) !important;
        background: var(--white) !important;
    }

    .article .article-item .inner-image {
        margin-top: 0;
    }

    .cus-name-link-cate-sp1 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;
    }

    #age-verify .popup-content #confirm-age {
        margin-bottom: 20px;
    }

    .menu-section .menu-link {
        padding-left: 25px !important;
    }

    .menu-section .has-child .has-child ul li .menu-link {
        padding-left: 33px !important;
    }

    .menu-section .entry-menu.dropdown li {
        border-bottom: 1px solid var(--white);
    }

    .menu-section > ul > li > a {
        font-weight: bold;
        
    }

    .title-section {
        font-size: 2.5rem;
        padding-right: 40px;
    }

    .cus-box-dat-hang .title-section {
        padding-right: 0px;
    }

    .header-mobile-02 > .container > .row > div:nth-child(3) {
        display: flex;
        justify-content: flex-end;
    }

    .btn-mini-cart-header i, .icon-text-phone-header i {
        margin-right: 0px;
    }

    .cus-cate-product-home a {
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .cus-row-sp-link > .row > div:nth-child(1), .cus-row-sp-link > .row > div:nth-child(2) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cus-row-sp-link > .row > div:nth-child(1) .img-title-sp-link .ratio-1-1, .cus-row-sp-link > .row > div:nth-child(2) .img-title-sp-link .ratio-1-1 {
        padding-top: 100%;
    }

    .bg-fomr-search-header {
        width: 100%;
    }

    body {
        font-size: 1.6rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .footer-mid .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .footer-menu-section {
        margin-bottom: 3rem;
    }
}

@media (max-width: 568px) {
    .img-cate-home-left {
        display: none;
    }

    .cus-item-noi-bat > div:nth-child(2) .ratio-1-1 {
        padding-top: 100%;
    }
}

.gradient-background {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 7px;
    left: 7px;
    z-index: 0;
    border-bottom-right-radius: 25px;
}

.animation--border {
    overflow: hidden;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
}

.animation--border::before {
    content: "";
    background-image: conic-gradient(var(--color-highlight) 20deg, transparent 120deg);
    width: 150%;
    height: 150%;
    position: absolute;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.cus-article-noi-bat .inner-content {
    background-color: hsla(0, 0%, 100%, .95);
    margin: -14% auto 0;
    max-width: 85%;
    padding: 15px 10px;
    position: relative;
    text-align: center;
}

.cus-article-noi-bat .article-item .article-title {
    /*font-size: 2rem;*/
    text-align: center;
}

.cus-article-noi-bat .article-item .article-description {
    /*color: white;*/
    /* white-space: pre-wrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    /* padding: 0 10px 0 10px; */
}

.cus-article-noi-bat .article-item:hover .article-description {
    /*display: block;*/
}

.cus-border-dasher-detail {
    /*border: 1px dashed var(--color-highlight);*/
    /*padding: 15px;*/
    /* border-radius: 10px; */
}

.bg-form-fat-trc .form-control::placeholder, .bg-form-fat-trc .form-control {
    font-weight: 600;
    color: #495057;
}

.title-page-khuyen-mai > h3 {
    border: 1px solid var(--color-highlight);
}

.article-hot .info-article-right .article-item {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
}

.article-hot .info-article-right .article-item .inner-image {
    flex: 0 0 175px;
}

.article-hot .info-article-right .article-item:last-child {
    margin-bottom: 0;
}

.article-hot .info-article-left .article-item {
    margin-bottom: 2rem;
    position: relative;
}

.article-hot .info-article-left .article-item .inner-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 9;
}

.article-hot .info-article-left .article-item:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 190px;
    bottom: 0;
    background-image: linear-gradient(0deg, black, transparent);
    z-index: 1;
}

.article-hot .info-article-left .article-item .inner-content .article-title a {
    color: var(--white)
}

.article-hot .info-article-left .article-item .inner-content .post-date {
    color: var(--white)
}

.article-hot .info-article-left .article-item .inner-content .article-title {
    height: auto;
}

.article-hot .info-article-left .article-item .inner-content .article-description {
    color: var(--white)
}

.article-hot .info-article-right .article-title {
    font-weight: 500;
}

.article-hot .article-item .inner-content {
    padding: 15px;
}

.article-hot .article-item {
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

.box-article-page .article-item {
    display: flex;
    border: 0;
    border-radius: 0;
}

.box-article-page .article-item .inner-image {
    flex: 0 0 250px;
}

.box-article-page .article-item .inner-image .img {
    border-radius: 12px;
    overflow: hidden;
}

.box-article-page .article-item .inner-content {
    padding: 0 15px;
    flex: 1 1;
}

.box-article-page h3 {
    text-align: left !important;
    margin-bottom: 30px;
}

.view-small {
    border: 1px solid var(--color-highlight);
    border-radius: 12px;
    padding: 10px;
}

.view-small .title {
    padding: 10px 15px;
    border-bottom: 1px solid #d1d5db;
    font-weight: 700;
    font-size: 18px;
}

.view-small .info {
    padding: 15px;
}

.view-small .info .article-item {
    border: 0;
    border-radius: 0;
    display: flex;
    margin-bottom: 20px;
}

.view-small .info .article-item .inner-image {
    flex: 0 0 115px;
    max-width: 115px;
}

.view-small .info .article-item .inner-content {
    padding: 0;
    flex: 1 1;
    padding-left: 0px;
}

.box-article-page .view-small .inner-content {
    width: calc(100% - 10rem);
    margin-left: 0rem;
}

.box-article-page-vua-dang .view-small .inner-content {
    width: calc(100% - 10rem);
    margin-left: 0rem;
}

.view-small .info .article-item .inner-image .img {
    border-radius: 8px;
    overflow: hidden;
    padding-top: 90%;
}

.shadow {
    box-shadow: 0 0.8rem 1.2rem rgb(0 0 0 / 31%) !important;
}

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

.border2 {
    border: 2px solid #b3b6b9 !important;
}

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

.product-wl-item .product-action .btn-product-action i {
    color: var(--color-highlight);
}

.product-wl-item .product-action .btn-product-action:hover i {
    color: white;
    background-color: var(--color-highlight);
}

.article-image-detail .swiper-slide img {
    aspect-ratio: 4;
    width: 100%;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 1200px) {
    .box-article-page .article-item .inner-image {
        flex: 0 0 175px;
    }

    .box-article-page .article-item .inner-content {
        padding-right: 0;
    }
}

/*nut lien he rung lac*/
.contact-rung-lac > a {
    -webkit-animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes shake-top {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shake-top {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

/*nut lien he rung lac*/
@media (max-width: 1200px) and (min-width:1000px) {
    .menu-section > ul > li {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

@media (max-width: 992px) {
    .menu-section .marker-image {
        float: left;
        margin: 1.1rem 0.5rem 1.1rem 0;
    }
}

/* =============================================================================
   KHỐI DỊCH VỤ (SERVICE)
   -----------------------------------------------------------------------------
   CSS ở đây trước nằm inline trong 2 file Smarty, nay gom hết về custom.css:
       - templates/thoitrang05/block/service/style.tpl          -> [TRANG 1]
       - templates/thoitrang05/block/service_detail/style.tpl   -> [TRANG 2]
   2 file .tpl đó giờ chỉ còn ghi chú, KHÔNG thêm <style> vào lại nữa.

   Sửa giao diện thì tìm đúng mục dưới đây:
       [TRANG 1] DANH SÁCH DỊCH VỤ  - markup ở block/service/{view,view_slider,item}.tpl
       [TRANG 2] CHI TIẾT DỊCH VỤ   - markup ở block/service_detail/*.tpl

   Phần "Khách hàng đánh giá" + "Bình luận" ở cuối trang chi tiết KHÔNG thuộc khối
   này: đó là block rating/comment dùng chung, style nằm ở assets/css/comment-rating.css
   (sửa ở đó sẽ ảnh hưởng cả trang sản phẩm / bài viết).
   ============================================================================= */
/* BẢNG MÀU khối dịch vụ — cố ý viết mã hex trực tiếp, KHÔNG dùng var(--...).
   Lý do: MinifyHelper::compress() chạy CssMin và chỉ nạp biến từ assets/css/variable.css
   (đổi :root -> @variables). Biến khai báo trong custom.css sẽ không resolve được
   và CssMin sẽ xoá luôn dòng đó khi chạy ở chế độ production.
   Muốn đổi màu thì find & replace theo bảng dưới:
       var(--color-highlight)  xanh ngọc chủ đạo (form đặt ngay, dấu +, icon hỗ trợ)
       #0d8a65  xanh ngọc đậm (hover)
       #e8f5f0  xanh ngọc nhạt (nền bong bóng icon thuộc tính)
       var(--color-highlight)  xanh dương (nhãn "Nổi Bật" + tên dịch vụ trang danh sách)
       #e0201b  đỏ (giá bán)
       #ff9a3d -> #f97316  cam (nút Gửi yêu cầu)
       #e8eaec  màu đường kẻ / viền
*/
/* =============================================================================
   [TRANG 1] DANH SÁCH DỊCH VỤ
   Lưới 3 cột, mỗi thẻ: ảnh full-bleed + nhãn "Nổi Bật" góc trái + tên xanh + giá đỏ.
   Thẻ KHÔNG ép cao bằng nhau (đúng như thiết kế: tên 1 dòng thì thẻ ngắn hơn).
   ============================================================================= */
.nh-service-list {
    margin-left: -10px;
    margin-right: -10px;
}

.nh-service-list > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.nh-service-item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17, 34, 51, .08);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease;
}

.nh-service-item:hover {
    box-shadow: 0 10px 24px rgba(17, 34, 51, .14);
    transform: translateY(-3px);
}

/* --- ảnh đại diện: khung cố định 72%, ảnh cắt đầy khung --- */
.nh-service-item .nh-service-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #eef1f4;
}

.nh-service-item .nh-service-thumb:before {
    content: "";
    display: block;
    padding-top: 72%;
}

.nh-service-item .nh-service-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.nh-service-item:hover .nh-service-thumb img {
    transform: scale(1.06);
}

/* --- nhãn góc trên trái: "Nổi Bật" (xanh) và "-x%" (đỏ) --- */
.nh-service-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

.nh-service-badges span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
    white-space: nowrap;
}

.nh-service-badges .nh-featured {
    background: var(--color-highlight);
}

.nh-service-badges .nh-onsale {
    background: #e0201b;
}

/* --- phần chữ --- */
.nh-service-item .nh-service-body {
    padding: 14px 16px 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.nh-service-item .nh-service-title {
    margin: 0 0 11px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

/* tên tối đa 2 dòng, quá thì cắt "..." */
.nh-service-item .nh-service-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-main);
    text-decoration: none;
}

.nh-service-item .nh-service-title a:hover {
    color: var(--color-highlight);
}

.nh-service-item .nh-service-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nh-service-item .nh-service-price .nh-price-tag {
    color: var(--color-highlight);
    font-size: 12px;
}

.nh-service-item .nh-service-price .nh-price-amount {
    color: var(--color-highlight);
    font-weight: 700;
    font-size: 1.6rem;
}

.nh-service-item .nh-service-price .nh-price-old {
    color: #9e9e9e;
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
}

/* dùng lại thẻ này trong swiper (block/service/view_slider.tpl) */
.swiper-slide.nh-service-item {
    height: auto;
}

@media (max-width: 575px) {
    .nh-service-item .nh-service-title {
        font-size: 14px;
    }
}

/* =============================================================================
   [TRANG 2] CHI TIẾT DỊCH VỤ
   ============================================================================= */
/* --- 2.1 Thư viện ảnh --------------------------------------------------------
   Ảnh đầu chiếm đúng nửa trái, 4 ảnh còn lại xếp 2x2 ở nửa phải.
   Cột: 2fr 1fr 1fr + 2 khe 10px  ->  cột đầu = (W - 20px)/2, tức 50% bề ngang. */
.nh-sv-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

/* cả ô là vùng bấm để mở light gallery */
.nh-sv-gallery .nh-sv-cell {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #eef1f4;
    cursor: pointer;
}

/* ô nhỏ: tỉ lệ 4:3 */
.nh-sv-gallery .nh-sv-cell:before {
    content: "";
    display: block;
    padding-top: 75%;
}

/* Ô đầu chiếm 2 hàng. Nó rộng gấp đôi ô nhỏ nên chiều cao cần có
   = 2 x (66% ô nhỏ) + khe 10px = 66% của chính nó + 10px. */
.nh-sv-gallery .nh-sv-cell:first-child {
    grid-row: span 2;
}

.nh-sv-gallery .nh-sv-cell img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.nh-sv-gallery .nh-sv-cell:hover img {
    transform: scale(1.04);
}

/* lớp phủ "+N ảnh" và nút play video */
.nh-sv-gallery .nh-sv-more, .nh-sv-gallery .nh-sv-play {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--white);
    font-size: 26px;
    font-weight: 700;
    text-decoration: none;
}

.nh-sv-gallery .nh-sv-play {
    background: transparent;
    font-size: 40px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.nh-sv-gallery .nh-sv-cell:hover .nh-sv-more {
    background: rgba(0, 0, 0, .5);
}

.nh-sv-gallery .nh-sv-play:hover {
    color: var(--white);
    background: rgba(0, 0, 0, .18);
}

/* Nút phóng to góc dưới trái ảnh lớn.
   Markup dùng lại y hệt trang sản phẩm (.additional-action > .btn-addition-action.btn-expand)
   nên icon full-screen.svg và hiệu ứng hover invert lấy sẵn từ page.css.
   Dưới đây chỉ chỉnh lại kích thước / bo góc cho hợp khung ảnh dịch vụ,
   selector có .nh-sv-gallery nên KHÔNG ảnh hưởng trang sản phẩm. */
.nh-sv-gallery .additional-action {
    bottom: 1.2rem;
    left: 1.2rem;
    z-index: 3;
}

.nh-sv-gallery .additional-action .btn-addition-action {
    width: 3.6rem;
    height: 3.6rem;
    margin-top: 0;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.nh-sv-gallery .additional-action .btn-addition-action::before {
    width: 2rem;
    height: 2rem;
}

/* --- 2.2 Tên + giá ---------------------------------------------------------- */
.nh-sv-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.nh-sv-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.nh-sv-price {
    color: var(--color-highlight);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.nh-sv-price-old {
    color: var(--color-text);
    font-size: 15px;
    text-decoration: line-through;
    font-weight: 500;
}

.nh-sv-discount {
    background-color: var(--green);
    color: var(--white);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
}

/* --- 2.3 Dải thuộc tính: 4 ô icon vuông bo góc + nhãn nhỏ / giá trị đậm ------- */
.nh-sv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
    border-top: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    padding: 16px 0;
    margin-bottom: 24px;
}

.nh-sv-meta .nh-sv-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 25%;
    min-width: 165px;
}

.nh-sv-meta .nh-sv-meta-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #e8f5f0;
    color: var(--color-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.nh-sv-meta .nh-sv-meta-label {
    display: block;
    color: var(--color-text);
    line-height: 1.5;
}

.nh-sv-meta .nh-sv-meta-value {
    display: block;
    font-weight: 600;
    line-height: 1.5;
}

/* --- 2.4 Các mục nội dung (Mô tả / Lịch trình) ------------------------------- */
.nh-sv-section {
    margin-bottom: 26px;
}

.nh-sv-section-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
}

.nh-sv-desc img {
    max-width: 100%;
    height: auto;
}

/* --- 2.5 Lịch trình dạng accordion ------------------------------------------
   Theo mẫu: mỗi dòng là 1 thanh nền xám nhạt bo góc, ô vuông xanh "+" bên trái,
   tên ngày in đậm, mũi tên xám ở mép phải. Mở ra thì thanh chuyển nền trắng. */
.nh-sv-schedule .nh-sv-sch-item {
    border: 1px solid #eceeef;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #f6f7f8;
    transition: background .2s ease, border-color .2s ease;
}

.nh-sv-schedule .nh-sv-sch-item:last-child {
    margin-bottom: 0;
}

.nh-sv-schedule .nh-sv-sch-item:hover {
    border-color: #dfe3e5;
}

.nh-sv-schedule .nh-sv-sch-item.is-open {
    background: var(--white);
    border-color: #dfe3e5;
}

.nh-sv-schedule .nh-sv-sch-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eceeef;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #23272a;
}

/* ô vuông + / − xanh ngọc bên trái */
.nh-sv-schedule .nh-sv-sch-sign {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--color-highlight);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.nh-sv-schedule .nh-sv-sch-name {
    flex: 1 1 auto;
}

.nh-sv-schedule .nh-sv-sch-arrow {
    flex: 0 0 auto;
    color: #9aa0a6;
    font-size: 13px;
    transition: transform .25s ease;
}

.nh-sv-schedule .nh-sv-sch-item.is-open .nh-sv-sch-arrow {
    transform: rotate(180deg);
}

.nh-sv-schedule .nh-sv-sch-body {
    display: none;
    padding: 1.5rem;
    color: #555;
    font-size: 14px;
    line-height: 1.75;
}

.nh-sv-schedule .nh-sv-sch-item.is-open .nh-sv-sch-body {
    display: block;
}

.nh-sv-schedule .nh-sv-sch-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-top: 10px;
}

/* --- 2.6 Chia sẻ mạng xã hội ------------------------------------------------ */
.nh-sv-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.nh-sv-share span {
    color: #666;
    font-size: 14px;
}

.nh-sv-share a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f3f4;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
}

.nh-sv-share a:hover {
    background: var(--color-highlight);
    color: var(--white)
}

/* --- 2.7 Cột phải: form "Đặt ngay" + hộp hỗ trợ ------------------------------
   Sticky đặt ở .nh-sv-sidebar (bọc cả 2 hộp) chứ không đặt riêng trên form,
   để cả khối cùng dính khi cuộn. Markup: block/service_detail/element_booking_form.tpl
   Lưu ý: sticky sẽ chết nếu có cha nào đặt overflow:hidden. */
.nh-sv-sidebar {
    position: sticky;
    top: 90px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 1rem;
    margin-bottom: 3rem;
}

.nh-sv-booking {
    background: var(--color-highlight);
    border-radius: 1rem 1rem 0 0;
    padding: 22px 20px;
}

.nh-sv-booking .nh-sv-booking-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--white)
}

.nh-sv-booking .nh-sv-booking-sub {
    margin: 0 0 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.nh-sv-booking .form-group {
    margin-bottom: 11px;
}

.nh-sv-booking .nh-sv-field {
    position: relative;
}

/* icon nằm trong ô nhập, ghim bên trái */
.nh-sv-booking .nh-sv-field > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-main);
    font-size: 14px;
    pointer-events: none;
}

.nh-sv-booking .form-control {
    width: 100%;
    height: auto;
    border: 1px solid var(--white);
    border-radius: 6px;
    padding: 11px 12px 11px 40px;
    font-size: 14px;
    background: var(--white);
    color: #333;
    box-shadow: none;
}

.nh-sv-booking .form-control::placeholder {
    color: #9aa5a0;
}

.nh-sv-booking textarea.form-control {
    padding-left: 12px;
    min-height: 86px;
    resize: vertical;
}

.nh-sv-booking .form-control:focus {
    outline: 0;
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.nh-sv-booking .nh-sv-submit {
    width: 100%;
    margin-top: 5px;
    border: 0;
    border-radius: 3rem;
    padding: 12px 16px;
    background: linear-gradient(90deg, #ff9a3d 0%, #f97316 100%);
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
}

.nh-sv-booking .nh-sv-submit:hover {
    filter: brightness(1.06);
}

/* chữ báo lỗi phải sáng màu vì nền xanh đậm */
.nh-sv-booking label.error {
    display: block;
    margin-top: 4px;
    color: #ffe0dd;
    font-size: 12px;
}

/* flatpickr set readonly cho input -> giữ nền trắng và con trỏ bấm được */
.nh-sv-booking .form-control[readonly] {
    background: var(--white);
    cursor: pointer;
}

/* --- 2.7b Lịch flatpickr chọn ngày đi - ngày về ------------------------------
   Khởi tạo ở assets/js/custom.js. flatpickr append .flatpickr-calendar thẳng vào
   <body> nên KHÔNG lồng trong .nh-sv-booking được -> onReady gắn thêm class
   .nh-sv-calendar để các override dưới đây chỉ ăn vào lịch của form dịch vụ. */
.flatpickr-calendar.nh-sv-calendar {
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(17, 34, 51, .18);
    font-family: inherit;
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-months .flatpickr-month, .flatpickr-calendar.nh-sv-calendar .flatpickr-weekdays, .flatpickr-calendar.nh-sv-calendar span.flatpickr-weekday {
    background: var(--color-highlight);
    color: var(--white);
    fill: var(--white);
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-calendar.nh-sv-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #ffd9a8;
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-day.today {
    border-color: var(--color-highlight);
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-day.today:hover {
    background: var(--color-highlight);
    border-color: var(--color-highlight);
    color: var(--white)
}

/* ngày nằm giữa khoảng: nền xanh nhạt, box-shadow để lấp khe giữa các ô */
.flatpickr-calendar.nh-sv-calendar .flatpickr-day.inRange {
    background: #e8f5f0;
    border-color: #e8f5f0;
    color: #0d8a65;
    box-shadow: -5px 0 0 #e8f5f0, 5px 0 0 #e8f5f0;
}

/* 2 đầu mút của khoảng */
.flatpickr-calendar.nh-sv-calendar .flatpickr-day.selected, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.startRange, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.endRange, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.selected:hover, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.startRange:hover, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.endRange:hover {
    background: var(--color-highlight);
    border-color: var(--color-highlight);
    color: var(--white)
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-day.startRange.endRange {
    box-shadow: none;
}

/* lib mặc định vẽ vệt nối màu xanh dương giữa startRange và endRange */
.flatpickr-calendar.nh-sv-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar.nh-sv-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-calendar.nh-sv-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--color-highlight);
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-day:hover {
    background: #eef1f4;
    border-color: #eef1f4;
}

.flatpickr-calendar.nh-sv-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar.nh-sv-calendar .flatpickr-day.nextMonthDay {
    color: #c3c8cb;
}

/* --- 2.8 Hộp "Bạn có cần hỗ trợ?" ------------------------------------------- */
.nh-sv-support {
    background: var(--white);
    border-radius: 0 0 1rem 1rem;
    padding: 22px 20px;
}

.nh-sv-support .nh-sv-support-title {
    margin-bottom: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--color-black);
}

.nh-sv-support a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--color-black);
    font-size: 14px;
    text-decoration: none;
}

.nh-sv-support a:last-child {
    margin-bottom: 0;
}

.nh-sv-support a:hover {
    color: var(--color-highlight);
}

/* icon hỗ trợ: ô vuông bo góc màu xanh ngọc, chữ trắng */
.nh-sv-support a i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--color-highlight);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* --- 2.9 Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    /* xuống 1 cột thì bỏ sticky, cả khối nằm dưới nội dung */ .nh-sv-sidebar {
        position: static;
        margin-top: 24px;
    }

    .nh-sv-title {
        font-size: 21px;
    }

    .nh-sv-price {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .is-mobile .swiper-slider-main .swiper-slide img {
        height: 12rem;
    }

    .nh-sv-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .nh-sv-gallery .nh-sv-cell:first-child {
        grid-row: span 1;
        grid-column: span 2;
    }

    .nh-sv-gallery .nh-sv-cell:first-child:before {
        padding-top: 60%;
    }

    .nh-sv-meta .nh-sv-meta-item {
        flex: 1 1 50%;
    }
}

/* =============================================================================
   [TRANG THANH TOÁN] BƯỚC 1 — THÔNG TIN & THANH TOÁN
   -----------------------------------------------------------------------------
   Mockup: anh_yeu_cau/order1.png · Phương án: phuong_an_dat_hang.md mục 12.1
   Markup: templates/thoitrang05/Order/order_info.tpl
           + element_stepper / element_order_info_left / element_delivery_points
           + element_delivery_time / element_order_summary

   Tiền tố .nh-ck- (checkout) để không đụng .checkout-section và các lớp cũ của theme.
   Mã màu viết trực tiếp, KHÔNG dùng var(--...): MinifyHelper chạy CssMin chỉ nạp biến từ
   variable.css, biến khai trong custom.css sẽ bị xoá ở chế độ production.
       var(--color-highlight)  xanh dương chủ đạo (số bước, nút, thẻ đang chọn)
       #eef5ff  nền xanh nhạt (thẻ đang chọn, badge, hộp ghi chú)
       var(--red)  đỏ (giá, phí cộng thêm)
       #0a7d3c  xanh lá (miễn phí)
       #eaeef3  màu đường kẻ
   ============================================================================= */
.nh-checkout {
    background: #f4f7fb;
    padding: 24px 0 40px;
}

/* --- thanh 3 bước ---------------------------------------------------------
   Mockup: dải trắng bo góc, bước đang làm có nền xanh rất nhạt và mũi tên chỉ sang
   bước kế; bước chưa tới xám nhạt. */
.nh-ck-stepper {
    display: flex;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(17, 34, 51, .05);
    overflow: hidden;
    margin-bottom: 18px;
}

.nh-ck-step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 15px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

/* Mũi tên phân cách: vẽ bằng hai đường viền xoay 45°, đặt chồng lên mép trái của
   bước sau để thành hình ">" đúng như mockup. */
.nh-ck-step:before {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    border-top: 1px solid #dde3ea;
    border-right: 1px solid #dde3ea;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

.nh-ck-step.is-active:before {
    background-color: #f2f7ff;
}

.nh-ck-step-no {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #e8ecf1;
    color: #98a1ad;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.nh-ck-step.is-active {
    background: #f2f7ff;
    color: var(--color-highlight);
    font-weight: 700;
}

.nh-ck-step.is-active .nh-ck-step-no, .nh-ck-step.is-done .nh-ck-step-no {
    background: var(--color-highlight);
    color: #fff;
}

/* Bước đã qua: chữ xanh, bấm được để quay lại sửa */
a.nh-ck-step.is-done {
    background: #f2f7ff;
    color: var(--color-highlight);
    font-weight: 700;
    text-decoration: none;
}

.nh-ck-step.is-done {
    color: var(--color-highlight);
}

.nh-ck-step-label {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- khối đánh số ở cột trái ---------------------------------------------- */
.nh-ck-block {
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(17, 34, 51, .05);
    padding: 18px 20px 20px;
    margin-bottom: 16px;
}

.nh-ck-block-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Mockup: ô vuông bo góc chứ không phải hình tròn */
.nh-ck-block-no {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--color-highlight);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.nh-ck-block-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-highlight);
}

.nh-ck-block-extra {
    margin-left: auto;
    font-size: 13px;
    color: #6b7684;
}

.nh-ck-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
}

.nh-ck-required {
    color: var(--red);
}

.nh-ck-block .form-control {
    height: auto;
    padding: 9px 12px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    font-size: 14px;
}

.nh-ck-block .form-control:focus {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px rgba(24, 87, 182, .1);
}

.nh-ck-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #8a93a0;
}

/* --- lưới điểm nhận hàng -------------------------------------------------- */
.nh-ck-point-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.nh-ck-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    margin: 0;
    padding: 14px 8px 12px;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.nh-ck-point:hover {
    border-color: #b9cdea;
    box-shadow: 0 2px 6px rgba(24, 87, 182, .08);
}

/* radio thật vẫn nằm trong DOM để form gửi lên, chỉ ẩn khỏi mắt */
.nh-ck-point input[type="radio"], .nh-ck-time input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nh-ck-point.is-active {
    border-color: var(--color-highlight);
    background: #eef5ff;
}

.nh-ck-point-icon {
    font-size: 21px;
    color: var(--color-highlight);
    margin-bottom: 4px;
    line-height: 1;
}

.nh-ck-point-name {
    font-size: 13px;
    font-weight: 700;
    color: #1b2733;
    line-height: 1.4;
}

.nh-ck-point-desc {
    font-size: 11px;
    color: var(--color-text);
    line-height: 1.4;
}

.nh-ck-point-fee {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.nh-ck-fee-money {
    color: var(--red);
}

/* Mockup để "Miễn phí" màu xanh dương chứ không phải xanh lá */
.nh-ck-fee-free {
    color: var(--color-highlight);
}

/* "Tính phí theo khu vực": chưa có con số nên để cam nhạt, không doạ bằng màu đỏ */
.nh-ck-fee-area {
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
}

.nh-ck-point-detail {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e4e9ef;
}

/* hai khối cùng hiện (điểm nhận "Địa chỉ khác") thì chỉ cần một vạch ngăn */
.nh-ck-point-detail + .nh-ck-custom-address {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.nh-ck-point-chosen {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--color-black);
}

/* Phí của địa điểm đang chọn — order.js ghi đè nội dung ô này khi khách đổi địa điểm,
   nên nó phải có màu riêng để khách thấy con số vừa đổi. */
.nh-ck-point-chosen-fee {
    color: var(--color-highlight);
}

/* --- lưới khung giờ ------------------------------------------------------- */
.nh-ck-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nh-ck-time {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.nh-ck-time:hover {
    border-color: #b9cdea;
    box-shadow: 0 2px 6px rgba(24, 87, 182, .08);
}

.nh-ck-time.is-active {
    border-color: var(--color-highlight);
    background: #eef5ff;
}

.nh-ck-time-icon {
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--color-highlight);
    line-height: 1.5;
}

.nh-ck-time-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nh-ck-time-name {
    font-size: 13px;
    font-weight: 700;
    color: #1b2733;
    line-height: 1.4;
}

.nh-ck-time-desc {
    font-size: 11px;
    color: #98a1ad;
    line-height: 1.4;
}

.nh-ck-time-fee {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
}

.nh-ck-note-input {
    min-height: 82px;
    resize: vertical;
}

.nh-ck-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 13px;
    background: #f2f7ff;
    border: 1px solid #d8e6fb;
    border-radius: 6px;
    color: #37527d;
    font-size: 12px;
    line-height: 1.6;
}

.nh-ck-note i {
    color: var(--color-highlight);
    line-height: 1.6;
}

/* --- khối 4: mã giảm giá ---------------------------------------------------
   Mockup: ô nhập chiếm hết phần còn lại, nút "Áp dụng" nằm sát bên phải. Nút "Lấy mã"
   mockup không vẽ nhưng hệ thống có sẵn chức năng, đặt ngay cạnh "Áp dụng". */
.nh-ck-coupon {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.nh-ck-coupon .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 9px 12px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    font-size: 14px;
}

.nh-ck-coupon .form-control:focus {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px rgba(24, 87, 182, .1);
}

.nh-ck-coupon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    background: #f1f4f8;
    color: var(--color-black);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.nh-ck-coupon-btn:hover {
    background: #e4eaf2;
    color: #23272a;
}

/* "Lấy mã" là hành động phụ (mở danh sách mã), để viền rỗng cho nhẹ hơn "Áp dụng" */
.nh-ck-coupon-btn--ghost {
    background: #fff;
    border-color: #c7d6ea;
    color: var(--color-highlight);
}

.nh-ck-coupon-btn--ghost:hover {
    background: #eef5ff;
    color: #12468f;
}

.nh-ck-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 9px 12px;
    background: #eaf7ef;
    border-radius: 6px;
    font-size: 13px;
}

.nh-ck-coupon-applied-text {
    color: #0a7d3c;
}

.nh-ck-coupon-remove {
    color: #6b7684;
    font-size: 13px;
    text-decoration: underline;
}

.nh-ck-coupon-remove:hover {
    color: var(--red);
}

@media (max-width: 575px) {
    .nh-ck-coupon {
        flex-wrap: wrap;
    }

    .nh-ck-coupon .form-control {
        flex: 1 1 100%;
    }
}

.nh-ck-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-highlight);
    font-size: 14px;
    text-decoration: none;
}

.nh-ck-back:hover {
    color: #10407f;
    text-decoration: underline;
}

/* --- cột phải: tóm tắt đơn hàng ------------------------------------------- */
.nh-ck-summary {
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(17, 34, 51, .05);
    padding: 18px 20px 20px;
    position: sticky;
    top: 20px;
}

.nh-ck-summary-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
}

.nh-ck-summary-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-highlight);
}

.nh-ck-summary-count {
    font-size: 12px;
    color: #98a1ad;
}

/* danh sách sản phẩm: cuộn khi giỏ nhiều món để cột phải không dài hơn màn hình */
.nh-ck-item-list {
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 4px;
}

.nh-ck-item {
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #eaeef3;
}

/* sản phẩm cuối không cần vạch ngăn, đã có đường kẻ của bảng tiền ngay dưới */
.nh-ck-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.nh-ck-item-thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border: 1px solid #eaeef3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nh-ck-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nh-ck-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.nh-ck-item-name {
    display: block;
    margin-bottom: 6px;
    color: #23272a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
}

.nh-ck-item-name:hover {
    color: var(--color-highlight);
}

.nh-ck-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.nh-ck-item-qty {
    font-size: 12px;
    color: #77818f;
}

.nh-ck-item-price {
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.nh-ck-item-deposit {
    font-size: 12px;
    color: #77818f;
    white-space: nowrap;
}

.nh-ck-item-deposit strong {
    color: #1b2733;
}

/* Chip "Cọc 30%" — xanh dương như mockup */
.nh-ck-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    background: #eaf2ff;
    color: var(--color-highlight);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* Chip "Thanh toán 100%" — xanh lá, để khách phân biệt ngay hàng nào phải cọc */
.nh-ck-badge--full {
    background: #e7f6ed;
    color: #0f8a48;
}

/* --- bảng tiền ------------------------------------------------------------ */
.nh-ck-total-list {
    padding-top: 4px;
}

.nh-ck-total-list--main {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eaeef3;
}

.nh-ck-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    font-weight: 500;
}

.nh-ck-total-row > span:last-child {
    white-space: nowrap;
    font-weight: 600;
    color: #1b2733;
}

.nh-ck-total-row--grand {
    margin-bottom: 11px;
    font-size: 15px;
    font-weight: 700;
    color: #1b2733;
}

.nh-ck-total-row--grand > span:last-child {
    color: var(--color-highlight);
    font-size: 18px;
    font-weight: 700;
}

/* Dòng quan trọng nhất của cả trang — mockup để đỏ, to hơn cả "Tổng cộng" */
.nh-ck-total-row--deposit {
    font-weight: 700;
    color: #1b2733;
}

.nh-ck-total-row--deposit > span:last-child {
    color: var(--red);
    font-size: 18px;
    font-weight: 700;
}

.nh-ck-total-row--discount > span:last-child {
    color: #0f8a48;
}

.nh-ck-total-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #98a1ad;
}

.nh-ck-info {
    color: #98a1ad;
    font-size: 12px;
    cursor: help;
}

/* --- hộp quy tắc thanh toán ----------------------------------------------- */
.nh-ck-rule {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: #f2f7ff;
    border: 1px solid #d8e6fb;
    border-radius: 8px;
}

.nh-ck-rule-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: var(--color-highlight);
    font-size: 12.5px;
    font-weight: 700;
}

.nh-ck-rule-list {
    margin: 0;
    padding-left: 16px;
    color: #4a637f;
    font-size: 12px;
    line-height: 1.8;
}

/* --- nút xác nhận --------------------------------------------------------- */
.nh-ck-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 13px 16px;
    background: var(--color-highlight);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
}

.nh-ck-submit:hover, .nh-ck-submit:focus {
    background: #12468f;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(24, 87, 182, .25);
}

.nh-ck-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    color: #98a1ad;
    font-size: 12px;
}

/* =============================================================================
BƯỚC 2 — XÁC NHẬN ĐƠN HÀNG  (Order/confirm.tpl)
Mockup: anh_yeu_cau/order2.png

Dùng lại nguyên bộ .nh-ck-block / .nh-ck-summary / .nh-ck-total-* / .nh-ck-submit của bước 1,
chỉ thêm những gì bước 2 mới có: dòng tóm tắt "Chỉnh sửa", bảng chi tiết đơn, thẻ chọn cổng
thanh toán.
============================================================================= */
/* --- bước đã qua trên stepper bấm được ------------------------------------ */
a.nh-ck-step {
    text-decoration: none;
}

a.nh-ck-step:hover .nh-ck-step-label {
    color: var(--color-highlight);
}

/* --- link "Chỉnh sửa" ở góc phải đầu khối --------------------------------- */
.nh-ck-edit {
    margin-left: auto;
    color: var(--color-highlight);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.nh-ck-edit:hover {
    color: #12468f;
    text-decoration: underline;
}

.nh-ck-block-icon {
    margin-right: 7px;
    color: var(--color-highlight);
    font-size: 14px;
}

/* Nháy sáng khối vừa được "Chỉnh sửa" dẫn tới — order.js gỡ lớp sau ~2 giây */
.nh-ck-block.is-highlight {
    border-color: var(--color-highlight);
    box-shadow: 0 0 0 3px rgba(24, 87, 182, .18);
    transition: box-shadow .3s ease, border-color .3s ease;
}

/* --- ba cột tóm tắt trong khối 1 & 2 -------------------------------------- */
.nh-ck-recap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* min-width: 0 để địa chỉ dài không đẩy cột ra ngoài lưới */
.nh-ck-recap-col {
    min-width: 0;
}

.nh-ck-recap-label {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
}

.nh-ck-recap-value {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #1b2733;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

.nh-ck-recap-icon {
    flex: 0 0 auto;
    margin-right: 0;
    color: var(--color-highlight);
    font-size: 15px;
    line-height: 1.4;
}

.nh-ck-recap-sub {
    margin-top: 3px;
    padding-left: 20px;
    color: #77818f;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Phí ở khối tóm tắt: miễn phí thì xanh dương như thẻ chọn, có phí thì cam */
.nh-ck-recap-fee {
    margin-top: 4px;
    padding-left: 20px;
    color: var(--color-highlight);
    font-size: 12.5px;
    font-weight: 700;
}

/* --- bảng chi tiết đơn hàng ----------------------------------------------- */
.nh-ck-table-wrap {
    overflow-x: auto;
}

.nh-ck-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.nh-ck-table th {
    padding: 9px 8px;
    border-bottom: 1px solid #e3e9f1;
    font-weight: 600;
    white-space: nowrap;
}

.nh-ck-table td {
    padding: 13px 8px;
    border-bottom: 1px solid #f0f3f7;
    color: #1b2733;
    font-size: 13.5px;
    vertical-align: middle;
}

.nh-ck-table th:first-child, .nh-ck-table td:first-child {
    padding-left: 0;
}

.nh-ck-table th:last-child, .nh-ck-table td:last-child {
    padding-right: 0;
}

.nh-ck-table tr:last-child td {
    border-bottom: 0;
}

.nh-ck-td-product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

.nh-ck-td-thumb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 1px solid #eaeef3;
    border-radius: 6px;
    background: #fff;
}

.nh-ck-td-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nh-ck-td-name {
    display: block;
    color: #1b2733;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.nh-ck-td-name:hover {
    color: var(--color-highlight);
}

.nh-ck-td-product .nh-ck-badge {
    margin-top: 5px;
}

.nh-ck-td-total {
    font-weight: 700;
    white-space: nowrap;
}

/* --- chọn hình thức thanh toán -------------------------------------------- */
.nh-ck-payment {
    margin-top: 16px;
}

.nh-ck-gateway-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.nh-ck-gateway {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.nh-ck-gateway:hover {
    border-color: #b9ccea;
}

.nh-ck-gateway.is-active {
    border-color: var(--color-highlight);
    background: #f2f7ff;
}

.nh-ck-gateway input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Nút tròn tự vẽ: radio gốc mỗi trình duyệt một kiểu, không tô được theo mockup */
.nh-ck-gateway-radio {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #c3ccd8;
    border-radius: 50%;
    background: #fff;
}

.nh-ck-gateway.is-active .nh-ck-gateway-radio {
    border-color: var(--color-highlight);
}

.nh-ck-gateway.is-active .nh-ck-gateway-radio:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-highlight);
}

.nh-ck-gateway-logo {
    flex: 0 0 40px;
    width: 40px;
    text-align: center;
}

.nh-ck-gateway-logo img {
    max-height: 26px;
    object-fit: contain;
}

.nh-ck-gateway-body {
    flex: 1 1 auto;
    min-width: 0;
}

.nh-ck-gateway-name {
    display: block;
    color: #1b2733;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.nh-ck-gateway.is-active .nh-ck-gateway-name {
    color: var(--color-highlight);
}

.nh-ck-gateway-desc {
    display: block;
    margin-top: 2px;
    color: #98a1ad;
    font-size: 11.5px;
    line-height: 1.45;
}

/* Khối chi tiết của cổng thanh toán (hiện chỉ chuyển khoản dùng tới) */
.nh-ck-gateway-detail {
    margin: -2px 0 2px;
    border: 1px solid #b9ccea;
    border-radius: 9px;
    background: #f7f9fc;
}

.nh-ck-gateway-detail .nh-ck-bank-body {
    padding: 12px 13px 13px;
}

.nh-ck-gateway-detail .nh-ck-bank-item {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
}

/* Cột phải bước 2 hẹp nhất -> QR nhỏ thêm một bậc để vẫn đủ chỗ cho bảng bên cạnh */
.nh-ck-gateway-detail .nh-ck-bank-qr {
    flex: 0 0 120px;
    width: 120px;
}

/* Bước 2 chưa có mã đơn -> cảnh báo nội dung chuyển khoản chưa đầy đủ */
.nh-ck-bank-warn {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #a2700c;
    font-size: 13px;
    line-height: 1.5;
}

.nh-ck-submit:disabled, .nh-ck-submit.is-loading {
    opacity: .6;
    cursor: not-allowed;
}

/* Bước 2 và 3: cột phải là một CỤM (tóm tắt + thanh toán / trạng thái thu tiền).
   Dính riêng khối tóm tắt sẽ tách cụm ra làm đôi khi cuộn -> bỏ sticky ở hai bước này. */
.nh-ck-confirm .nh-ck-summary, .nh-ck-success .nh-ck-summary {
    position: static;
}

/* =============================================================================
BƯỚC 3 — HOÀN TẤT  (Order/success.tpl)

Dùng lại nguyên bộ khối/bảng/tóm tắt của bước 2, chỉ thêm: dải thông báo thành công, khối
thông tin chuyển khoản + QR, hai nút cuối trang.
============================================================================= */
.nh-ck-done {
    margin-bottom: 16px;
    padding: 28px 20px;
    border: 1px solid #cfe8d8;
    border-radius: 12px;
    background: #f2fbf6;
    text-align: center;
}

.nh-ck-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #1a9c5b;
    color: #fff;
    font-size: 24px;
}

.nh-ck-done-title {
    margin: 0 0 7px;
    color: #14663d;
    font-size: 22px;
    font-weight: 700;
}

.nh-ck-done-desc {
    margin: 0;
    color: #3d6b53;
    font-size: 14px;
    line-height: 1.6;
}

.nh-ck-done-code {
    display: inline-block;
    margin-top: 13px;
    padding: 7px 16px;
    border: 1px dashed #1a9c5b;
    border-radius: 8px;
    background: #fff;
    color: #16202e;
    font-size: 14px;
}

.nh-ck-done-code strong {
    color: #1a9c5b;
    letter-spacing: .03em;
}

/* --- thông tin chuyển khoản ----------------------------------------------- */
/* --- thông tin chuyển khoản + QR ------------------------------------------
   Khối này sống ở CỘT PHẢI hẹp của bước 2 (~360px) lẫn cột trái rộng của bước 3.
   Ảnh QR và bảng thông tin phải nằm TRÊN MỘT DÒNG ở cả hai chỗ, nên ảnh nhỏ lại
   (88px) và chữ xuống 12px; `nowrap` chặn bảng rơi xuống dưới ảnh. */
.nh-ck-bank-body {
    padding: 14px 16px 16px;
}

/* Nằm thẳng trong khối đã có padding (bước 3) thì không cần đệm thêm */
.nh-ck-block > .nh-ck-bank-body {
    padding: 0;
}

.nh-ck-bank-amount, .nh-ck-bank-note {
    margin: 0 0 6px;
    color: #1b2733;
    font-size: 13px;
    line-height: 1.55;
}

.nh-ck-bank-amount strong {
    color: var(--red);
    font-size: 16px;
    font-weight: 700;
}

.nh-ck-bank-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e3e9f1;
    border-radius: 8px;
    background: #f8fafd;
}

.nh-ck-bank-qr {
    flex: 0 0 88px;
    width: 88px;
}

.nh-ck-bank-info {
    flex: 1 1 auto;
    min-width: 0;
}

.nh-ck-bank-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: column;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
}

.nh-ck-bank-row > span {
    flex: 0 0 auto;
    color: #77818f;
}

/* --- nút cuối trang ------------------------------------------------------- */
.nh-ck-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.nh-ck-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--color-highlight);
    border-radius: 8px;
    color: var(--color-highlight);
    font-size: 14px;
    font-weight: 600;
}

.nh-ck-btn-ghost:hover {
    background: var(--color-highlight);
    color: #fff;
}

.bg-prd-related {
    background: #e6f7fd;
    padding: 3rem 0;
}

/* =============================================================================
   [TRANG THANH TOÁN] RESPONSIVE — dùng chung cả 3 bước
   -----------------------------------------------------------------------------
   Mốc cắt bám theo lưới Bootstrap của theme: 1199 / 991 / 767 / 575 / 400.
   Nguyên tắc: không bao giờ để trang cuộn ngang. Chỉ bảng chi tiết đơn được phép
   cuộn trong khung riêng, và dưới 575px thì bảng đổi hẳn sang dạng thẻ.
   ============================================================================= */
@media (max-width: 1199px) {
    .nh-ck-point-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    /* Hết hai cột -> cột phải trôi xuống dưới, bỏ dính mép trên */ .nh-ck-summary {
        position: static;
        margin-top: 16px;
    }

    .nh-ck-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nh-ck-step {
        padding: 13px 10px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .nh-checkout {
        padding: 16px 0 28px;
    }

    .nh-ck-block, .nh-ck-summary {
        padding: 15px 14px 16px;
    }

    .nh-ck-recap {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .nh-ck-time-grid {
        grid-template-columns: 1fr;
    }

    .nh-ck-done {
        padding: 22px 16px;
    }

    .nh-ck-done-title {
        font-size: 19px;
    }

    .nh-ck-table td {
        text-align: right !important;
    }
}

@media (max-width: 575px) {
    .nh-ck-point-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
       Stepper: KHÔNG xếp dọc (chiếm nửa màn hình đầu tiên). Thu nhỏ và giấu nhãn của
       bước không phải bước hiện tại — số thứ tự vẫn đủ để biết mình đang ở đâu.
    */
    .nh-ck-step {
        display: none;
    }

    .nh-ck-step.is-active {
        flex: 1 1 auto;
        display: flex;
    }

    .nh-ck-step:not(.is-active) .nh-ck-step-label {
        display: none;
    }

    .nh-ck-step-no {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .nh-ck-block-title {
        font-size: 14px;
    }

    /* Bảng chi tiết đơn -> mỗi dòng hàng thành một thẻ, nhãn cột lấy từ data-title */
    .nh-ck-table-wrap {
        overflow-x: visible;
    }

    .nh-ck-table thead {
        display: none;
    }

    .nh-ck-table, .nh-ck-table tbody, .nh-ck-table tr, .nh-ck-table td {
        display: block;
        width: 100%;
    }

    .nh-ck-table tr {
        padding: 12px 0;
        border-bottom: 1px solid #f0f3f7;
    }

    .nh-ck-table tr:last-child {
        border-bottom: 0;
    }

    .nh-ck-table td {
        padding: 3px 0;
        border: 0;
        text-align: right;
    }

    .nh-ck-table td:first-child {
        padding-bottom: 8px;
        text-align: left;
    }

    /* Ô nào có data-title thì in nhãn cột bên trái, thành cặp nhãn - giá trị */
    .nh-ck-table td[data-title]:not(:first-child):before {
        content: attr(data-title);
        float: left;
        color: #98a1ad;
        font-size: 12px;
        font-weight: 400;
    }

    .nh-ck-td-product {
        min-width: 0;
    }

    /* QR: hết chỗ cho hai cột -> ảnh lên trên, thông tin xuống dưới */
    .nh-ck-bank-item {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nh-ck-bank-qr, .nh-ck-gateway-detail .nh-ck-bank-qr {
        flex: 0 0 120px;
        width: 120px;
    }

    .nh-ck-bank-info {
        flex: 1 1 100%;
    }

    .nh-ck-done-actions .nh-ck-btn-ghost {
        flex: 1 1 100%;
        justify-content: center;
    }

    .nh-ck-total-row--grand > span:last-child, .nh-ck-total-row--deposit > span:last-child {
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    /* Giữ 2 cột thẻ điểm nhận (một cột thì thẻ dài ngoẵng mà chữ vẫn ngắn), chỉ bóp
       đệm và cỡ chữ lại cho vừa */.nh-ck-point {
        padding: 11px 6px 10px;
    }

    .nh-ck-point-name {
        font-size: 12.5px;
    }

    .nh-ck-item-thumb {
        width: 48px;
        height: 48px;
    }

    .nh-ck-coupon-btn {
        padding: 9px 12px;
        font-size: 13px;
    }
    
    .article-item .article-description {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
    
    .product-item .add-to-cart {
        font-size: 11px;
    }
}
.bg-highlight-02{
    background: var(--color-header);
}
.menu-section > ul > li > a:hover,
.menu-section > ul > li:hover > a,
.menu-section > ul > li.is-current > a {
    color: #ffd400 !important;
    
}

.menu-section > ul > li > a span {
    transition: color .3s ease;
}
.menu-section > ul > li:hover > a span,
.menu-section > ul > li.is-current > a span {
    color: #ffd400 !important;
}
.menu-section .dropdown a:hover {
    color: #e6a800 !important;
    text-decoration: none !important;
}
@media (min-width: 1024px) {
    .swiper-slider-main .item-service.swiper-slide-active {
        width: 62.5vw !important;     
        margin-left: -6.25vw !important; 
    }
}
.menu-section > ul > li > a,
.menu-section > ul > li > a span {
    transition: color .3s ease;
}

@media (min-width: 992px) {
    .menu-section > ul > li > a:hover,
    .menu-section > ul > li:hover > a,
    .menu-section > ul > li.is-current > a {
        color: #ffd400 !important;
        text-decoration: underline !important;
        text-underline-offset: 6px;
    }
    .menu-section > ul > li:hover > a span,
    .menu-section > ul > li.is-current > a span {
        color: #ffd400 !important;
    }
    .menu-section .dropdown a:hover {
        color: #e6a800 !important;
        text-decoration: none !important;
    }
    
}

@media (max-width: 991.98px) {
    .menu-section > ul > li.is-current > a,
    .menu-section > ul > li > a:active {
        color: #ffd400 !important;
        font-weight: 700;
    }
    
}
@media (min-width: 992px) {
    .menu-section > ul > li > a:hover,
    .menu-section > ul > li:hover > a,
    .menu-section > ul > li.is-current > a {
        color: #ffd400 !important;
        text-decoration: underline !important;
        text-underline-offset: 6px;
    }
    .menu-section > ul > li:hover > a span,
    .menu-section > ul > li.is-current > a span {
        color: #ffd400 !important;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    .menu-section > ul > li > a {
        color: #3334be;
    }
    .menu-section > ul > li > a:hover,
    .menu-section > ul > li:hover > a,
    .menu-section > ul > li.is-current > a,
    .menu-section > ul > li:hover > a span,
    .menu-section > ul > li.is-current > a span {
        color: #e6a800 !important;
    }
}