:root{
    --w-small-content: 80%;
}

.hvr-underline-from-left::before {
    height: 1px;
    background-color: var(--text-color);
}

/* Custom Properties */

/* Top Banner */
.mp-body .top-banner {
    padding: 8px 0;
    background-color: var(--main-color);
    color: #fff;
    text-align: center;
}

/* Header */
.mp-header {
    background-color: #fff;
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: auto;
}

.logo-img {
    height: 2.25rem;
}

.mp-body .social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    border-radius: 6px;
    background-color: #443980;
    color: #fff;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.mp-body .utility-icons a {
    color: #000;
    margin-left: 0.75rem;
    font-size: 1.375rem;
    transition: color 0.3s ease;
}

.utility-icons a:hover,
.social-icons a:hover {
    color: var(--main-color);
}

.bag-cart-number {
    position: absolute;
    top: -6px;
    right: -12px;
    z-index: 1;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--main-color);
    color: #fff;
    font-size: 0.75rem;
}


/* Navigation */
.nav-menu {
    border-bottom: 1px solid #E3E3E3;
}

.menu_li_level_1 .menu_a_level_1{
    position: relative;
}

.menu_li_level_1 .menu_a_level_1:before,
.menu_li_level_1 .menu_a_level_1:after{
    content: "";
    position: absolute;
    width: 0.675rem;
    height: 0.675rem;
    background-image: url('/templates/images/icon-active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0;
}

.menu_li_level_1 .menu_a_level_1:before{
    left: 0;
    bottom: 0;
    transform: translate(-100%, -50%) rotate(45deg) scale(0);
    transition: all .3s ease-in-out;
}

.menu_li_level_1 .menu_a_level_1:after{
    right: 0;
    top: 0;
    transform: translate(100%, 50%) rotate(-45deg) scale(0);
    transition: all .5s ease-in-out;
}

.menu_li_level_1.active .menu_a_level_1:before,
.menu_li_level_1:hover .menu_a_level_1:before{
    opacity: 1;
    transform: translate(-100%, -50%) rotate(0deg) scale(1);
}
.menu_li_level_1.active .menu_a_level_1:after,
.menu_li_level_1:hover .menu_a_level_1:after{
    opacity: 1;
    transform: translate(100%, 50%) rotate(0deg) scale(1);
}



.menu_a_level_1 {
    display: inline-flex;
    padding: 10px 0;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.menu_li_level_1.active .menu_a_level_1 {
    color: var(--main-color) !important;
}

.menu_li_level_1:hover .menu_a_level_1 {
    color: var(--main-color);
    transition: all 0.3s ease;
}

.menu_level_2_wrapper {
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    height: auto;
    background: #fff;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: -100;
}

.menu-black-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -200;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.has-menu-level-2:hover  .menu-black-bg {
    opacity: 1;
    transition: all 0.3s ease;
}

.has-menu-level-2:hover .menu_level_2_wrapper {
    /*top: 100%;*/
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: all;
}

.menu_a_level_2 {
    color: var(--text-color);
}

.menu_ul_level_1,
.mp-header-top {
    position: relative;
    background: #fff;
}

.menu_a_level_2.main {

}

.menu_li_level_2:hover .menu_a_level_2 {
    color: var(--text-color);
}

.menu_level_2_image {
    overflow: hidden;
    --bs-aspect-ratio: 150%;
    min-height: 100%;
}

.menu_level_2_image a,
.menu_level_2_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-header.active {
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.has-menu-level-2 {
    cursor: default;
}

/* header end */

/* modal tìm kiếm start */
/* Search Button Styles */
.hy-form-tim-kiem-button {
    background: transparent;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hy-form-tim-kiem-button i {
    font-size: 20px;
    color: #000;
}

/* Modal Styles */
.hy-form-tim-kiem-modal {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: #fff;
    /*z-index: 5000;*/
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    overflow: hidden;
}

.hy-form-tim-kiem-modal.show {
    top: 0;
    opacity: 1;
    z-index: 5000;
}

.hy-form-tim-kiem-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.hy-form-tim-kiem-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Search Header */
.hy-form-tim-kiem-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hy-form-tim-kiem-top{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E7E7E7;
}

.hy-form-tim-kiem-close {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #9E9E9E;
}

.hy-form-tim-kiem-close svg{
    margin-right: 1rem;
    transition: all 0.5s ease;
}

.hy-form-tim-kiem-close:hover svg{
    transform: rotate(360deg);
}


/* Search Form */
.hy-form-tim-kiem-form {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #F2F2F2;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
}

.hy-form-tim-kiem-input {
    width: 100%;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
}

.hy-form-tim-kiem-input::placeholder {
    color: #9E9E9E;
}

.hy-form-tim-kiem-icon {
    font-size: 18px;
}

.wrapper-suggest-key-search{
    padding: 3rem 3rem 3rem 0;
    border-right: 1px solid #E7E7E7;
}

.wrapper-suggest-key-search .wrapper-title{
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.wrapper-suggest-key-search .box-list-key-search{
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.wrapper-suggest-key-search .box-list-key-search .box-item{
    padding: 0.5rem;
    background-color: #F3F3F3;
    cursor: pointer;
}

.wrapper-featured-product{
    padding: 1.5rem 0;
}

.wrapper-featured-product .wrapper-title{
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.wrapper-featured-product .mp-product-item-name,
.wrapper-featured-product .mp-product-item-price-new,
.wrapper-featured-product .mp-product-item-units-sold{
    font-size: 0.75rem;
}

.wrapper-featured-product .mp-product-item-add-cart{
    font-size: 0.875rem;
    padding: 0.5rem 1.5rem;
}


/* Search Results */
.hy-form-tim-kiem-results {
    max-height: 400px;
    /*overflow-y: auto;*/
    padding: 0px 0;
    /*background: #fafafa;*/
    scrollbar-width: thin;
}

#result-search-modal > *:first-of-type{
    padding-top: 1rem;
}

#result-search-modal > *:last-of-type{
    padding-bottom: 1rem;
}

#result-search-modal p{
    margin-bottom: 0;
}

.hy-form-tim-kiem-result-item {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hy-form-tim-kiem-result-item:hover {
    background: #f0f0f0;
    padding: 0.5rem;
}

.hy-form-tim-kiem-result-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 4px;
    margin-right: 15px;
    object-fit: cover;
}

.hy-form-tim-kiem-result-content {
    flex: auto;
    max-width: 100%;
    overflow: hidden;
}

.hy-form-tim-kiem-result-title {
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.hy-form-tim-kiem-result-category {
    font-size: 12px;
    color: #999;
}

/* Scrollbar Styles */
.hy-form-tim-kiem-results::-webkit-scrollbar {
    width: 6px;
}

.hy-form-tim-kiem-results::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.hy-form-tim-kiem-results::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.searchTrigger {
    cursor: pointer;
}

.hy-blur-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 4000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.hy-blur-box.active {
    opacity: 1;
    pointer-events: all;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.hy-form-tim-kiem-result-price {
    color: var(--main-color);
}

/* modal tìm kiếm end */



/* sản phẩm item start */
.mp-product-item{
    height: 100%;
    background-color: #F8F8F8;
    padding: 0.75rem;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}

.mp-product-item .mp-product-item-image .inner-image{
    /*--bs-aspect-ratio: 90%;*/
    overflow: hidden;
    border-radius: 5px;
}

.mp-product-item .mp-product-item-image a,
.mp-product-item .mp-product-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-product-item .anh-sp-img-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    transition: all 0.3s ease;
    opacity: 1;
}

.mp-product-item .anh-sp-img-2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.mp-product-item .mp-product-item-image:hover .anh-sp-img-1 {
    opacity: 0;
}

.mp-product-item .mp-product-item-image:hover .anh-sp-img-2 {
    opacity: 1;
}

.mp-product-item .mp-product-item-add-cart{
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 10;
    transform: translate(150%, 0%);
    padding: 0.5rem;
    border-radius: 5px;
    background-color: var(--main-color);
    white-space: nowrap;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mp-product-item:hover .mp-product-item-add-cart{
    transform: translate(0%, 0%);
}

.mp-product-item-percent-discount{
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 10;
    overflow: hidden;
    padding: 0.125rem 0.5rem;
    background-color: var(--main-color);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.75rem;
    --circle-radius: 0.25rem;
    -webkit-mask-image: 
        radial-gradient(circle at left, transparent var(--circle-radius), black calc(var(--circle-radius) + 0.5px)),
        radial-gradient(circle at right, transparent var(--circle-radius), black calc(var(--circle-radius) + 0.5px));
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.mp-product-item .mp-product-item-name{
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    transition: all .3s ease;
}

.mp-product-item:hover .mp-product-item-name{
    color: var(--main-color);
}

.mp-product-item-star {

}

.mp-product-item-price-new {
    color: var(--main-color);
    font-size: 1rem;
    font-weight: 600;
}

.mp-product-item-price-old {
    font-size: 1rem;
    color: #666666;
    text-decoration: line-through;
}

.mp-product-item-units-sold {
    color: #797979;
    font-size: 1rem;
}


/* sản phẩm item end */

/* slider start */
.mp-slider-swiper-item {
    position: relative;
}

.mp-slider-swiper-item-image{
    overflow: hidden;
    --bs-aspect-ratio: calc(9 / 24 * 100%);
}

.mp-slider-swiper-item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-slider-swiper-item-content {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    max-width: 80%;
    transform: translate(-50%, -50%);
}

.mp-slider-swiper-item-content>*{
    color: var(--background-color);
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    /*filter: blur(10px);*/
}

.mp-slider-swiper-item-content h1,
.mp-slider-swiper-item-content h2{
    font-size: clamp(2.8125rem, 2.5625rem + 1.25vw, 4.0625rem);
}

.mp-slider-swiper-item-content h3{
    font-size: var(--fs-main-title);
}


.mp-slider-swiper .swiper-slide-active .mp-slider-swiper-item-content>* {
    animation: slide-visible 1s ease forwards;
    -webkit-animation: slide-visible 1s ease forwards;
    animation-delay: 0.5s;
}

@keyframes slide-visible {
    to {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        filter: blur(0px);
        -webkit-filter: blur(0px);
    }
}

/* slider end */

/* menu mobile start */
.mp-menu-mobile-bottom-left i {
    font-size: 1.5rem;
}

.logo-cong-ty-mobile-img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/*.mypham-offcanvas-adversie-image {
    overflow: hidden;
}

.mypham-offcanvas-adversie-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mypham-offcanvas-adversie-box {
    background: var(--main-color);
}

.mypham-offcanvas-adversie-content {
    color: var(--background-color);
    font-size: clamp(0.9rem, 0.8692rem + 0.1538vw, 1rem);
}

.mypham-offcanvas-adversie-content-link {
    text-decoration: underline;
    text-transform: uppercase;
}*/

.offcanvas-end.myphamOffCanvas {
    width: 100%;
    z-index: 5000;
    border-left: 0;
}

.myphamOffCanvas .offcanvas-header,
.mypham-offcanvas-adversie {
    border-bottom: 1px solid rgb(216, 216, 216);
}

.myphamOffCanvas .offcanvas-body {
    padding: 0;
}

.menu_mobile_li_1_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu_mobile_a_1 {
    color: var(--text-color);
    font-size: clamp(0.9rem, 0.7571rem + 0.7143vw, 1.1rem);
}

.menu_mobile_a_1:hover {
    color: var(--text-color);
}

.menu_mobile_li_1_content_box_icon_1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 15px;
    background-color: var(--text-color);
    transform: translate(-50%, -50%) rotate(90deg);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    z-index: 2;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}

.menu_mobile_li_1_content_box_icon_2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background-color: var(--text-color);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 1;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}

.menu_mobile_a_1.collapsed .menu_mobile_li_1_content_box_icon_1 {
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
}

.menu_mobile_li_1 {
    border-bottom: 1px solid rgb(216, 216, 216);
}

.menu_mobile_level_2_collapse {
    background-color: rgb(242, 242, 242);
}

.menu_mobile_level_2_collapse .card {
    background-color: transparent;
}

.menu_mobile_a_level_2 {
    color: var(--text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.menu_mobile_a_level_2.main {
    color: var(--text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    text-transform: uppercase;
}

.menu_mobile_a_level_2:hover {
    color: var(--text-color);
}

.menu_mobile_li_level_2.active .menu_mobile_a_level_2 {
    color: var(--main-color);
}

.mp-quang-cao-menu-mobile-box .nav-tabs .nav-link {
    background: var(--background-color);
    color: var(--text-color);
    font-size: clamp(0.66rem, 0.4886rem + 0.8571vw, 0.9rem);
}

.mp-quang-cao-menu-mobile-box .nav-tabs .nav-link.active,
.mp-quang-cao-menu-mobile-box .tab-content {
    background-color: rgb(242, 242, 242);
    border-bottom: none !important;
}

.mp-quang-cao-menu-mobile-box .nav-item {
    width: 50%;
}

.mp-quang-cao-menu-mobile-box-content-item-image {
    overflow: hidden;
}

.mp-quang-cao-menu-mobile-box-content-item-image img,
.mp-quang-cao-menu-mobile-box-content-item-image a {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-quang-cao-menu-mobile-box-content-item-link {
    background-color: var(--background-color);
    color: var(--text-color);
    width: max-content;
}

.mp-quang-cao-menu-mobile-box-content-item-link span {
    text-decoration: underline;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.mp-quang-cao-menu-mobile-box-content-item-link:hover span {
    color: var(--text-color);
}

.mp-tac-gia-header-mobile-avatar img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.chu-ky-tac-gia-img {
    max-width: 100px;
    height: auto;
}

.mp-tac-gia-header-mobile {
    background-color: #1f1f1f;
    color: var(--background-color);
}

.mp-menu-footer-mobile {
    background-color: var(--main-color);
}

.mp_menu_footer_mobile_a {
    color: var(--background-color);
}

.mp_menu_footer_mobile_a:hover {
    color: var(--background-color);
}

.mp_menu_footer_mobile_a .hvr-underline-from-left::before {
    background-color: var(--background-color);
}

.flag-icon {
    max-width: 32px;
}

.myphamOffCanvas .offcanvas-header {
    padding: 1.5rem 1rem;
}

.pnvn-menu-mobile {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: var(--background-color);
}

.pnvn-menu-mobile.active {
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

/* menu mobile end */


/* TRANG CHỦ START */
.hy-title-box {

}

.hy-title-label {
    color: var(--main-color);
    font-size: var(--fs-main-title);
    font-weight: 800;
    text-transform: uppercase;
}

.hy-title-shadow{
    margin-bottom: -2rem;
    color: white;
    -webkit-text-stroke: 2px #2e2e8e;
    paint-order: stroke fill;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    
}

/*===*/
.image-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svg-clip-path{
    position: absolute;
    width: 0;
    height: 0;
}

.box-special-offer{
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background-color: #FAFAFA;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
}

.box-special-offer .thumbnail{
    width: 35%;
    flex-shrink: 0;
    clip-path: url('#clip-path-img-special-offer');
}

.box-special-offer .title{
    font-weight: 600;
    font-size: 0.875rem;
}


/*===*/
.box-combo{
    position: relative;
}

.box-combo .box-thumbnail{
    overflow: hidden;
    border-radius: 1rem;
}

.box-combo .inner-thumbnail{
    --bs-aspect-ratio: 120%;
}

.box-combo .inner-thumbnail img{
    transition: all .5s ease;
}

.box-combo .box-content{
    position: absolute;
    inset: 0;
    background-color: rgba(68, 57, 128, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-size: 1.625rem;
    font-weight: 700;
    color: #fff;
    border-radius: 1rem;
    transition: all .3s ease;
}

.box-combo .box-content .title{
    font-size: 1.25rem;
}

.box-combo:hover .box-content{
    backdrop-filter: blur(4px);
    background-color: rgba(68, 57, 128, 0.5);
}

.box-combo:hover .inner-thumbnail img{
    transform: scale(1.05);
}


/*===*/
.swiper-review .swiper-slide{
    width: 23%;
}

.swiper-review .hy-video-slide-video-box{
    --bs-aspect-ratio: 150%;
    overflow: hidden;
    width: 100%;
    transition: all 0.5s ease;
    border-radius: 1.25rem;
    /*max-height: 388px;
    min-height: 388px;*/
}

.swiper-review .swiper-slide.swiper-slide-active .hy-video-slide-video-box {
    /*--bs-aspect-ratio: 150%;*/
    /*max-height: 500px;
    min-height: 500px;*/
    transition: all 0.5s ease;
}

.hy-video-slide-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    /*pointer-events: none;*/
}

.hy-video-slide-video-box .hy-video-label{
    position: absolute;
    top: 1.25rem;
    left: 0;
    background-color: rgba(0, 0, 0, 0.66);
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}

.hy-video-btn-play {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hy-video-btn-product{
   position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}


/*===*/
.mp-new-item{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mp-new-item-image {
    overflow: hidden;
    border-radius: 1rem;
}

.mp-new-item-image a,
.mp-new-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-new-item-link {
    background-color: var(--main-color);
    color: var(--background-color);
    font-size: 0.9rem;
    width: max-content;
    transition: all 0.35s ease;
}

.mp-new-item-name {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.mp-new-item-name a{
    color: var(--text-color);

}

.mp-new-item-link:hover {
    transform: translateY(-5px);
    transition: all 0.35s ease;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}


/*===*/
.box-new .box-thumbnail{
    overflow: hidden;
    border-radius: 1rem;
}



/* TRANG CHỦ END */



/* footer start */
.hy-dro-footer-wrapper {
    background: linear-gradient(0deg, #7060C4 0%, #443980 100%);
    color: #fff;
}

.hy-dro-footer-heading {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.hy-dro-footer-text {
    line-height: 1.5;
}

/*.hy-dro-footer-input {
    background-color: transparent;
    border: 1px solid #E2C2FA;
    color: #ffffff;
    padding: 8px 15px;
    width: 100%;
    margin-bottom: 15px;
}

.hy-dro-footer-input::placeholder {
    color: #ffffff;
    opacity: 0.8;
}*/

.hy-dro-footer-logo {

}

.hy-dro-footer-right-box{
    padding: var(--spacing-40) 0 var(--spacing-40) var(--spacing-40);
}

.hy-dro-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hy-dro-footer-list-item {
    margin-bottom: 10px;
    font-size: 14px;
}

.hy-dro-footer-social {
    margin-top: 20px;
}

.hy-dro-footer-social a {
    color: #ffffff;
    margin-right: 0.625rem;
    font-size: 16px;
}

.hy-dro-footer-left-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.5rem 4rem 2.5rem 0;
    position: relative;
    z-index: 1;
}

.hy-dro-footer-left-box:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    width: 400%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.hy-dro-footer-left-box .input-group {
    border-radius: 6px;
    border: 1px solid #E2C2FA;
    background-color: #7060C4;
}

.hy-dro-footer-left-box .form-control,
.hy-dro-footer-left-box .input-group-text {
    background: transparent;
    border: 0;
    color: #fff;
    height: 45px;
}

.hy-dro-footer-left-box .form-control:focus{
    box-shadow: none;
}

.hy-dro-footer-left-box .form-control + .input-group-text i {
    transition: transform 0.3s ease;
}

.hy-dro-footer-left-box .form-control::placeholder {
    color: #fff;
    opacity: 0.8;
}

.hy-dro-footer-left-box .form-control:focus + .input-group-text i {
    transform: translateX(0.25rem);
    transition: transform 0.3s ease;
}

.hy-gui-tu-van-btn {
    background-color: var(--main-color);
    border: none;
    color: #fff;
    font-weight: 700;
    transition: all 0.35s ease;
}

.hy-gui-tu-van-btn:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
        rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    transform: translateY(-5px);
    transition: all 0.35s ease;
    background-color: #201368;
}

.hy-dro-footer-a {
    color: var(--background-color);
    font-size: clamp(0.87rem, 0.8454rem + 0.1231vw, 0.95rem);
}

.hy-dro-footer-a .hvr-underline-from-left::before {
    background-color: var(--background-color);
}

.hy-dro-footer-a:hover {
    color: var(--background-color);
}

.hy-dro-footer-social img {
    max-width: 32px;
}

.hy-copy-right {
    font-size: 0.8rem;
}

.hy-copy-right a {
    color: var(--background-color);
}

.hy-copy-right a:hover {
    color: var(--background-color);
}

.hy-copy-right a.hvr-underline-from-left::before {
    background-color: var(--background-color);
}

.hy-dro-footer-info li a {
    display: flex;
    gap: 0.5rem;
}

.hy-dro-footer-info li a img {
    height: 1.125rem;
    flex-shrink: 0;
}

/* footer end */



/* breadcrumb start */
.maan-breadcrumb-box {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: rgba(68, 57, 128, 10%);
}

.maan-breadcrumb-box .breadcrumb-item a {
    transition: color 0.3s ease;
}

.maan-breadcrumb-box .breadcrumb-item a:hover {
    color: var(--main-color);
}

.maan-breadcrumb-box .breadcrumb-item.active {
    color: var(--main-color);
    font-weight: 600;
}
/* breadcrumb end */



.mp-ten-danh-muc {
    color: var(--main-color);
    font-size: var(--fs-main-title);
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.dodo-filter-box label {
    text-wrap-mode: nowrap;
}

.dodo-filter-box #filter-sort {
    border: none; 
    background-color: #E9E9E9;
}

.dodo-filter-box .form-select:focus {
    box-shadow: none;
}


.mp-ten-danh-muc-filter-box {
    /*border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;*/
}

.page-item.active .page-link {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

/* trang sản phẩm end */




/* trang sản phẩm chi tiết start */
.fbn-product-image-section{

}

.fbn-product-main-image img{

}

.fbn-product-thumbnail-wrapper{

}

.fbn-product-thumbnails img {

}

.fbn-product-thumbnails img:hover {
    transform: scale(1.1);
}

.fbn-thumbnail-prev,
.fbn-thumbnail-next {
    
}

.fbn-product-details-section{

}

.fbn-product-title {
    font-weight: 700;
    font-size: 1.5rem;
}

.fbn-product-rating i {
    background: linear-gradient(to bottom, #cc9f3c, #ffdb64, #cc9f3c);
    background-clip: text;
    color: transparent;
}

.fbn-product-price{
    font-weight: 600;
}

.fbn-product-price .price-sale{
    color: var(--main-color);
}

.fbn-product-price .price-regular{
    color: #6A6A6A;
    text-decoration: line-through;
}

.fbn-product-percent-discount{
    position: relative;
    padding: 0.125rem 0.75rem;
    background-color: var(--main-color);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.875rem;
}

.fbn-product-percent-discount:before,
.fbn-product-percent-discount:after{
    content: "";
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    border-radius: 50%;
}

.fbn-product-percent-discount:before{
    left: 0;
    transform: translate(-60%, -50%);
}

.fbn-product-percent-discount:after{
    right: 0;
    transform: translate(60%, -50%);
}

.fbn-product-sold {
    font-size: clamp(0.875rem, 1.25vw, 1rem);
}

.fbn-product-description {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
}

.fbn-product-button-wrapper{
    margin: 1.625rem 0;
    padding: 1.625rem 0;
    border-top: 1px dashed #BABABA;
    border-bottom: 1px dashed #BABABA;
}


.fbn-product-quantity-wrapper button {
    width: 40px;
    height: 40px;
    padding: 0;
    box-shadow: none !important;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.fbn-quantity-input {
    width: 60px;
    text-align: center;
    background-color: transparent;
}

.fbn-add-to-cart{
    width: 100%;
    border: none;
    border-radius: 0.375rem;
    background-color: var(--main-color) !important;
    box-shadow: none !important;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fbn-add-to-cart:hover {
    background-color: var(--main-color);
    transform: translateY(-3px);
}

.fbn-product-quantity-wrapper .input-group {
    /*border: 1px solid #d9d9d9;*/
    border-radius: 10px;
    width: max-content;
    background-color: #EFEFEF;
}

.fbn-quantity-input{
    border: none;
    font-size: 1.5rem;
    font-weight: 600;
}

.btn-outline-secondary {
    border-radius: 10px !important;
    background-color: #e9e9e9;
    border-color: #e9e9e9;
    color: var(--text-color);
}

.fbn-san-pham-detail-image {
    overflow: hidden;
}

.fbn-san-pham-detail-image a,
.fbn-san-pham-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-detail-thumb-image {
    overflow: hidden;
}

.sp-detail-thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* nội dung chi tiết */
.fbn-san-pham-chi-tiet-title {
    border-bottom: 2px solid var(--main-color);
}

.fbn-san-pham-chi-tiet-title h3 {
    background-color: var(--main-color);
    color: var(--background-color);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    border-top-left-radius: 5px;
    border-top-right-radius: 25px;
    padding: 8px 20px;
    padding-right: 50px;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    text-transform: uppercase;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
}

.fbn-san-pham-chi-tiet-des {
    padding: 1.5rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    border-bottom: 8px solid #eae9e9;
    background-color: #f8f8f8;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.fbn-san-pham-chi-tiet-des::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #f8f8f8, transparent);
    z-index: 2;
    pointer-events: none;
}

.fbn-san-pham-chi-tiet-des.collapsehaha::after {
    display: none;
}

.fbn-san-pham-chi-tiet-xem-them {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: 3;
}

.fbn-xem-them-btn {
    min-width: 150px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    background-color: var(--main-color);
    border: none;
    color: var(--background-color);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.fbn-xem-them-btn:hover {
    background-color: #4a3001;
}

.sp-tt-text-right {
    text-align: right;
}


.sp-detail-thumb-swiper{
    height: 500px;
}

.sp-detail-thumb-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.sp-detail-thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fbn-add-to-cart:hover {
    background-color: var(--text-color);
    transition: all 0.3s ease;
}

.vh-hinh-image {
    display: block;
    text-align: center;
    margin: 15px auto;
}

.fbn-category-hot-content-title {
    text-transform: uppercase;
    color: var(--text-color);
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
}

.dodo-tin-lien-quan-item-image {
    overflow: hidden;
}

.dodo-tin-lien-quan-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}

.dodo-tin-lien-quan-item:hover .dodo-tin-lien-quan-item-image img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}

.dodo-tin-lien-quan-item {
    border-top: 1px solid #e5e5e5;
}

.dodo-tin-lien-quan-item-name {
    color: var(--text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    font-size: clamp(0.9rem, 0.89rem + 0.05vw, 0.95rem);
}

.dodo-tin-lien-quan-item:hover .dodo-tin-lien-quan-item-name {
    color: var(--second-text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.dodo-cot-phai-title {
    color: var(--text-color);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    padding: 10px 20px;
    padding-top: 0;
    padding-right: 50px;
    text-transform: uppercase;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -o-transform: translateY(5px);
}

.dodo-tin-lien-quan-view-more {
    border: 1px solid #e5e5e5;
    color: var(--text-color);
    background-color: var(--background-color);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.dodo-tin-lien-quan-view-more:hover {
    background-color: var(--text-color);
    color: var(--background-color);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.dodo-san-pham-nay-mua-ngay-image {
    overflow: hidden;
}

.dodo-san-pham-nay-mua-ngay-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}

.dodo-san-pham-nay-mua-ngay-gia-tien {
    font-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
    color: var(--second-text-color);
}

.dodo-san-pham-nay-mua-ngay-item .dodo-san-pham-nay-mua-ngay-danh-gia {
    font-size: 0.8rem;
}

.dodo-san-pham-nay-mua-ngay-item .dodo-san-pham-nay-mua-ngay-danh-gia i {
    color: #ffc107;
}

.btn-mua-ngay {
    background: #666;
    text-transform: uppercase;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.btn-mua-ngay:hover {
    background-color: var(--text-color);
    color: var(--background-color);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.dodo-san-pham-nay-mua-ngay-box {
    border: 1px solid #e5e5e5;
    position: sticky;
    top: 80px;
}

.fbn-san-pham-chi-tiet-page {
    overflow: visible;
}

.sp-scroll {
    cursor: pointer;
}

.sp-scroll:hover {
    color: var(--second-text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.dodo-san-pham-nay-mua-ngay-image:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}

.btn-nhanxet,
.btn-guibl {
    background-color: var(--main-color);
    color: var(--background-color);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.btn-nhanxet:hover,
.btn-guibl:hover {
    background-color: var(--text-color);
    color: var(--background-color);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.content-nhanxet {
    background-color: transparent;
    width: 100%;
}

.khung-binh-luan-wrapper {
    border: 1px solid #eae9e9;
}

.title-medium-score {
    font-size: clamp(1.2rem, 1.14rem + 0.3vw, 1.5rem);
}

/*===*/
.wrapper-navbar-tab-product{
    position: sticky;
    top: 159px;
    z-index: 10;
    background-color: #fff;
}

#nav-tab-product{
    border-bottom: 1px solid #DBDBDB;
}

#nav-tab-product{
    gap: 1rem;
}

#nav-tab-product .nav-item .nav-link{
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: 1.125rem;
    color: #565656;
    text-transform: uppercase;
    position: relative;
    transition: all .5s ease-in-out;
}

#nav-tab-product .nav-item .nav-link.active{
    color: var(--main-color);
}

#nav-tab-product .nav-item .nav-link:after{
    transition: all .5s ease-in-out;
}

#nav-tab-product .nav-item .nav-link.active:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--main-color);
    border-radius: 50rem;
    transform: translateY(50%);
}


#accordion-product{
    margin-top: 2rem;
}

#accordion-product .accordion-item{
    border: none;
}

#accordion-product .accordion-button {
    padding: 0.5rem 0;
    background-color: transparent;
    border-bottom: 1px solid #E4E4E4;
    box-shadow: none !important;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
}

#accordion-product .accordion-button:after{
    content: "\2b";
    border-radius: 50%;
    background-image: unset;
    transition: all 0.8s cubic-bezier(.3,.9,.61,.99);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #C5C5C5;
    color: #fff;
    font-size: 1rem;
    font-family: "Font Awesome 6 Pro";
}

#accordion-product .accordion-button:not(.collapsed):after{
    transform-origin: center center;
    content: "\f068";
    transform: rotate(360deg);
}

#accordion-product .accordion-body{
    padding-top: var(--spacing-40);
    padding-left: 0;
    padding-right: 0;
}


/*===*/
.vh-notification {
    font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
}

.md-product-detail-page-col-left {
    position: sticky;
    top: 180px;
}

.icon-danh-gia {
    max-width: 32px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    -ms-transition: opacity 0.1s ease;
    -o-transition: opacity 0.1s ease;
}

.icon-danh-gia.active {
    opacity: 1;
    transition: opacity 0.1s ease;
    -webkit-transition: opacity 0.1s ease;
    -moz-transition: opacity 0.1s ease;
    -ms-transition: opacity 0.1s ease;
    -o-transition: opacity 0.1s ease;
}

.hy-title-view-more {
    color: var(--text-color);
    font-size: clamp(1rem, 0.9692rem + 0.1538vw, 1.1rem);
}

.hy-title-view-more:hover {
    color: var(--text-color);
}

.mp-product-item .icon-danh-gia {
    max-width: 20px;
    cursor: default;
}

/*====*/

.mp-product-box-review .review-thumbnail{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
}

.mp-product-box-review .review-info{
    flex: 1;
}

.mp-product-box-review .review-title{
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
}

/*.mp-product-box-review .review-date{
    margin-bottom: 0.75rem;
    color: #A8A8A8;
}*/

.mp-product-box-review .review-star{
    display: flex;
    gap: 0.375rem;
    color: #DAE014;
}


.mp-product-box-review .review-media{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mp-product-box-review .review-media .review-media-item{
    position: relative;
}

.mp-product-box-review .review-media .review-media-item video,
.mp-product-box-review .review-media .review-media-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-product-box-review .review-media .review-media-item.video:after{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "\f04b";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* trang sản phẩm chi tiết end */



/* trang tin tức chi tiết start */
/* Header Section */
.hy-tin-tuc-detail-page-category {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-brown);
    margin-bottom: 20px;
    font-weight: 500;
}

.hy-tin-tuc-detail-page-title {
    width: var(--w-small-content);
    margin: 0 auto;
    margin-bottom: 1.5rem;
    font-size: var(--fs-main-title);
    font-weight: 600;
    color: var(--main-color);
    line-height: normal;
}

.hy-tin-tuc-detail-page-meta {
    width: var(--w-small-content);
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    color: #555555;
}

.hy-tin-tuc-detail-page-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Featured Image */
.hy-tin-tuc-detail-page-featured {
    position: relative;
    margin-bottom: 40px;
}

.hy-tin-tuc-detail-page-featured img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 12px;
}

.hy-tin-tuc-detail-page-caption {
    width: var(--w-small-content);
    margin: 0.5rem auto 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Content Section */
.hy-tin-tuc-detail-page-content .content-small{
    width: var(--w-small-content);
    margin: 0 auto;
    margin-bottom: 1rem;
}

.hy-tin-tuc-detail-page-content p{
    margin-bottom: 1.5rem;
}

.hy-tin-tuc-detail-page-content p:last-of-type{
    margin-bottom: 0;
}

.hy-tin-tuc-detail-page-content h2 {
    font-size: 28px;
    color: var(--primary-black);
    margin: 40px 0 20px;
}

/* Share Section */
.hy-tin-tuc-detail-page-share {
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hy-tin-tuc-detail-page-share-text {
    font-size: 14px;
    color: var(--text-gray);
}

.hy-tin-tuc-detail-page-share-buttons {
    display: flex;
    gap: 15px;
}

.hy-tin-tuc-detail-page-share-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-gray);
    color: var(--primary-black);
    transition: all 0.3s ease;
}

.hy-tin-tuc-detail-page-share-button:hover {
    background-color: var(--primary-brown);
    color: white;
    transform: translateY(-2px);
}


/* Related Articles */
.hy-tin-tuc-detail-page-related {
    background-color: var(--light-gray);
}

.hy-tin-tuc-detail-page-related-header {
    text-align: center;
    margin-bottom: 40px;
}

.hy-tin-tuc-detail-page-related-title {
    font-size: 32px;
    color: var(--primary-black);
    margin-bottom: 10px;
}

.hy-tin-tuc-detail-page-related-subtitle {
    color: var(--text-gray);
    font-size: 16px;
}

.hy-tin-tuc-detail-page-related-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.hy-tin-tuc-detail-page-related-item:hover {
    transform: translateY(-5px);
}

.hy-tin-tuc-detail-page-related-image {
    position: relative;
    height: 200px;
}

.hy-tin-tuc-detail-page-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hy-tin-tuc-detail-page-related-content {
    padding: 25px;
}

.hy-tin-tuc-detail-page-related-category {
    color: var(--primary-brown);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.hy-tin-tuc-detail-page-related-item-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--text-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.hy-tin-tuc-detail-page-related-item:hover .hy-tin-tuc-detail-page-related-item-title {
    color: var(--main-color);
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.hy-tin-tuc-detail-page-related-item-title a {
    color: var(--primary-black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hy-tin-tuc-detail-page-related-item-title a:hover {
    color: var(--primary-brown);
}

.hy-tin-tuc-detail-page-related-meta {
    font-size: 13px;
    color: var(--text-gray);
}

.hy-tin-tuc-main-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*.hy-tin-tuc-main-image a,
.hy-tin-tuc-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}*/

/* Responsive Styles */
@media (max-width: 768px) {
    .hy-tin-tuc-detail-page-title {
        font-size: 2.2rem;
    }

    .hy-tin-tuc-detail-page-meta {
        flex-direction: row;
        gap: 15px;
    }

    .hy-tin-tuc-detail-page-featured {
        margin-bottom: 10px;
    }

    .hy-tin-tuc-detail-page-related {
        padding: 30px 0;
        margin-top: 0px;
    }

    .hy-tin-tuc-detail-page-share {
        margin: 10px 0;
    }
}

@media (max-width: 576px) {
    .hy-tin-tuc-detail-page-title {
        font-size: 1.8rem;
    }

    .hy-tin-tuc-detail-page-caption {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 10px;
        background: none;
        padding: 0;
    }
}

/* trang tin tức chi tiết end */

/* giao diện trang liên hệ start */
.hy-lien-he-page-title {
    text-align: center;
    margin-bottom: 1.25rem; 
    font-size: 1.75rem;
    font-weight: 700;
    line-height: normal;
    color: var(--main-color);
}

.hy-lien-he-page-subtitle{
    font-size: 18px;
    color: #555555;
}

/* Contact Info Section */
.hy-lien-he-page-info {

}

.hy-lien-he-page-info-item {
    height: 100%;
    padding: 20px 20px;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
    transition: transform 0.3s ease;
}

.hy-lien-he-page-info-item:hover {
    transform: translateY(-5px);
}

.hy-lien-he-page-info-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(179, 163, 188, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    color: var(--main-color);
}

.hy-lien-he-page-info-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.hy-lien-he-page-info-text {
    color: var(--text-gray);
}

.hy-lien-he-page-info-link {
    transition: color 0.3s ease;
}

.hy-lien-he-page-info-link:hover {
    color: var(--main-color);
}


/*====*/
.hy-lien-he-page-form-container {
    padding: 3rem;
    border-radius: 0.625rem;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.25);
}

.hy-lien-he-page-form-group {
    margin-bottom: 1.5rem;
}

.hy-lien-he-page-label{
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.hy-lien-he-page-label.required:after{
    content: " *";
    color: #DF000B;
}

.hy-lien-he-page-input,
.hy-lien-he-page-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #E9E9E9;
    border-radius: 6px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.hy-lien-he-page-input:focus,
.hy-lien-he-page-textarea:focus {
    border-color: #888888;
    outline: none;
}

.hy-lien-he-page-input:placeholder,
.hy-lien-he-page-textarea:placeholder{
    color: #888888;
}

.hy-lien-he-page-textarea {
    height: 220px;
    resize: vertical;
}

.hy-lien-he-page-submit {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(68, 57, 128, 1) 0%, rgba(112, 96, 196, 1) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hy-lien-he-page-submit:hover {
    transform: translateY(-2px);
}

/* Map Section */
.hy-lien-he-page-map {
    height: 400px;
}

.hy-lien-he-page-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: all !important;
}

/* Success Message */
.hy-lien-he-page-success {
    display: none;
    text-align: center;
    padding: 20px;
    background: #e8f5e9;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #2e7d32;
}

/* giao diện trang liên hệ end */

/* giao diện trang cố định start */

/* Header Section */
.hy-page-default-header {
    height: 24rem;
    background-color: var(--light-gray);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hy-page-default-title {
    font-size: 3rem;
    color: var(--primary-black);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.hy-page-default-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: var(--primary-brown);
}

/* Content Section */
.hy-page-default-content {
    padding: 0;
}

.hy-page-default-container {

}

.hy-page-default-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.hy-page-default-text:last-child {
    margin-bottom: 0;
}

.hy-page-default-highlight {
    color: var(--primary-brown);
    font-weight: 500;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hy-page-default-title {
        font-size: 2.5rem;
    }

    .hy-page-default-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hy-page-default-title {
        font-size: 2rem;
    }
}

/* giao diện trang cố định end */

/* trang tin tức start */
.hy-tin-tuc-page-theme-1-title {
    color: var(--primary-black);
    font-size: 3.5rem;
    /* font-weight: bold; */
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: 1px;
}

.hy-tin-tuc-page-theme-1-filters {
    background-color: white;
    border-radius: 50px;
    padding: 0.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 4px 6px var(--border-light);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.hy-tin-tuc-page-theme-1-filter-btn {
    background-color: transparent;
    color: var(--text-gray);
    border: none;
    margin: 0.25rem 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.hy-tin-tuc-page-theme-1-filter-btn:hover,
.hy-tin-tuc-page-theme-1-filter-btn.active {
    background-color: var(--primary-brown);
    color: white;
}

.hy-tin-tuc-page-theme-1-news-item {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 6px var(--border-light);
}

.hy-tin-tuc-page-theme-1-news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--border-light);
}

.hy-tin-tuc-page-theme-1-news-image {
    height: 250px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.hy-tin-tuc-page-theme-1-news-item:hover .hy-tin-tuc-page-theme-1-news-image {
    transform: scale(1.05);
}

.hy-tin-tuc-page-theme-1-news-content {
    padding: 1.5rem;
}

.hy-tin-tuc-page-theme-1-news-category {
    font-size: 0.8rem;
    color: var(--primary-brown);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hy-tin-tuc-page-theme-1-news-title {
    color: var(--primary-black);
    font-size: 1.4rem;
    /* font-weight: bold; */
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.hy-tin-tuc-page-theme-1-news-excerpt {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.hy-tin-tuc-page-theme-1-load-more {
    background-color: var(--primary-brown);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(125, 57, 37, 0.2);
}

.hy-tin-tuc-page-theme-1-load-more:hover {
    background-color: var(--primary-black);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.hy-tin-tuc-page-theme-1-news-meta {
    color: var(--text-color);
}

.hy-tin-tuc-page-theme-1-news-meta i {
    color: var(--text-gray);
    font-size: 14px;
}

@media (max-width: 767px) {
    .hy-tin-tuc-page-theme-1-title {
        font-size: 2.5rem;
    }

    .hy-tin-tuc-page-theme-1-filters {
        border-radius: 12px;
    }
}


/* trang tin tức end */


/* bổ sung giỏ hàng start */
.hy-khong-co-gio-hang-container {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.hy-khong-co-gio-hang-icon {
    font-size: 4rem;
    color: var(--primary-brown);
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.hy-khong-co-gio-hang-title {
    color: var(--primary-black);
    font-size: 2rem;
    margin-bottom: 15px;
}

.hy-khong-co-gio-hang-message {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hy-khong-co-gio-hang-button {
    background-color: var(--primary-brown);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.hy-khong-co-gio-hang-button:hover {
    background-color: var(--primary-black);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: var(--background-color);
}

@media (max-width: 480px) {
    .hy-khong-co-gio-hang-container {
        padding: 30px;
    }

    .hy-khong-co-gio-hang-title {
        font-size: 1.75rem;
    }

    .hy-khong-co-gio-hang-icon {
        font-size: 3rem;
    }
}

.vanhiep-title {
    overflow: hidden;
}

.index .vanhiep-title {
    opacity: 0;
}

/* bổ sung giỏ hàng end */

.cart-review th,
.cart-review td{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.cart-review thead th{
    font-weight: 500;
    border-bottom-color: #E6E6E6 !important;
}


.cart-review .cart-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-review .cart-quantity{
    display: flex;
    background-color: #EFEFEF;
    border-radius: 0.375rem;
}

.cart-review .cart-quantity .qty-button{
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-review .cart-quantity .num_sl{
    width: 40px;
    background-color: transparent;
    border: 0;
    text-align: center;
}

.cart-review .cart-name{
    font-weight: 500;
    font-size: 1.125rem;
}

.cart-review .cart-price{
    font-weight: 500;
    font-size: 1.125rem;
}


.cart-order{
    /*padding: 2rem;*/
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.cart-order .ha-cart-total-price-table tr td{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
}

.cart-order .ha-cart-total-price-table tr td{
    font-weight: 700;
}

.cart-order .ha-cart-total-price-table tr td.total-price-text{
    font-weight: 600;
}

.cart-order .total-price-label,
.cart-order .total-price-text{
  padding-top: 2rem !important;
}


.btn-go-to-checkout{
    width: -webkit-fill-available;
    margin: 1.5rem 2rem 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.375rem;
    background-color: var(--main-color) !important;
    box-shadow: none !important;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
}



#offcanvasAccount{
    width: 500px;
}

#offcanvasAccount .offcanvas-header{
    border-bottom: 1px solid #E6E6E6;
}

#offcanvasAccount .offcanvas-body{
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.account-form .title-form{
    text-align: center;
    color: var(--main-color);
}

.account-form .note-form{
    font-size: 0.875rem;
    text-align: center;
}

.account-form .form-control{
    padding: 0.75rem 1rem;
    box-shadow: none !important;
    border-radius: 0.5rem;
}

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

.account-form #remember:focus{
    border-color: var(--main-color);
    box-shadow: none;
}

.account-form #remember:checked{
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.account-form .forget-password,
.account-form #btnShowLogin{
    color: var(--main-color);
    font-weight: 500;
}

.account-form .btn{
    padding: 0.75rem 1rem;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 0.5rem;
    box-shadow: none !important;
    color: #fff;
}

.account-form .btn.btn-outline{
    background-color: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

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

.account-form .line-after-btn{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.account-form .line-after-btn span.line{
    flex: 1;
    display: block;
    height: 1px;
    background-color: #E6E6E6;
    font-size: 0.875rem;
}


.password-wrapper {
    position: relative;
}
.toggle-password {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    z-index: 10;
}
.toggle-password:hover {
    color: #000;
}

.password-weak { color: red; }
.password-medium { color: orange; }
.password-strong { color: green; }
.password-match { color: green; }
.password-mismatch { color: red; }


#tab-account{
    position: relative;
}

#tab-account .nav-link{
    border: 0 !important;
    color: #000;
}

#tab-account .tab-active-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--main-color);
    transition: transform 0.35s ease, width 0.35s ease;
    will-change: transform, width;
}

.tab-content-account{
    flex: 1;
    overflow: auto;
}

.box-total-order{
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    background-color: #f8f8f8;
}

.box-total-order .numer{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-color);
}

.box-item-order{
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    border: 1px solid #774f3624;
    transition: all .3s ease;
}

.box-item-order:hover{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.box-item-order + .box-item-order{
    margin-top: 0.5rem;
}

.box-item-order .box-item-top{
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #774f3624;
}

.box-item-order .order-code{
    font-size: 1.25rem;
    font-weight: 600;
}

.box-item-order .order-date{
    font-size: 0.875rem;
}

.box-item-order .box-item-bottom{
    padding-top: 0.5rem;
    border-top: 1px solid #774f3624;
}

.box-item-order .order-total-label{
    font-size: 0.875rem;
}

.box-item-order .order-total{
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--main-color);
}

.box-item-order .order-view-detail{
    color: var(--main-color);
    font-weight: 500;
}




.pagination .page-link{
    min-width: 2rem;
    color: var(--main-color);
}