/* =========================================================
   HITOOLS UI FINAL OVERRIDE - .NET Core 9
   Load sau style.css, newStyle.css, myStyle.css
   Mục tiêu: đẹp hơn nhưng không phá layout gốc.
   ========================================================= */

:root {
    --hito-font: 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
    --hito-primary: var(--primary-color, #014d7f);
    --hito-primary-hover: #0057d1;
    --hito-red: #e6002d;
    --hito-text-title: #1a1a1a;
    --hito-text-main: #003b8e;
    --hito-text-body: #333;
    --hito-text-muted: #666666;
    --hito-bg-page: #f8fafc;
    --hito-bg-soft: #f5f9ff;
    --hito-bg-blue-light: #eef5ff;
    --hito-border: #e6edf7;
    --hito-border-strong: #dbe6f3;
    --hito-blue-border: #c9defd;
    --hito-shadow-sm: 0 3px 11px rgba(0, 0, 0, .10);
    --hito-shadow-md: 0 12px 28px rgba(15, 23, 42, .10);
    --hito-shadow-lg: 0 20px 48px rgba(15, 23, 42, .18);
}

body {
    color: var(--hito-text-body);
    background: var(--hito-bg-page);
}

a:hover,
.maincolor {
    color: var(--hito-primary) !important;
}

/* Chặn overlay cũ gây nhấp nháy khi hover menu danh mục */
.category-model,
.slider-cate:hover ~ .category-model {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   HEADER - GIỮ MÀU GỐC, CHỈ LÀM SẠCH NHẸ
   ========================================================= */
.header_top,
.header_middle {
    background: #fff !important;
}

.header_middle {
    border-bottom: 1px solid var(--hito-border) !important;
}

.logo-wrapper .logo img,
.logo img {
    max-height: 58px;
    width: auto;
    object-fit: contain;
}

.search_box {
    border: 1px solid var(--hito-border-strong) !important;
    border-radius: 4px !important;
    overflow: hidden;
    background: #fff !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.search_box:focus-within {
    border-color: var(--hito-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 77, 127, .08) !important;
}

.search_box input {
    color: var(--hito-text-body) !important;
    background: #fff !important;
}

.search_box button {
    background: #fff !important;
    color: var(--hito-primary) !important;
    border-left: 1px solid var(--hito-border-strong) !important;
}

.search_box button:hover {
    background: var(--hito-primary) !important;
    color: #fff !important;
}

.header-nav-right-block .btn-custom-1,
.btn-custom-1 {
    border-radius: 4px !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.header-nav-right-block .btn-custom-1:hover,
.btn-custom-1:hover {
    background: var(--hito-bg-blue-light) !important;
    color: var(--hito-primary) !important;
}

.header_account_list span.item_count {
    background: #c80436 !important;
    color: #fff !important;
}

/* Thanh menu giữ nền xanh chủ đạo như bản gốc */
.header-menu,
.header-menu.sticky-header {
    background: var(--hito-primary) !important;
    border: 0 !important;
}

.header-menu-content {
    background: transparent !important;
}

.header-menu .menu-list > li {
    transition: background-color .18s ease;
}

.header-menu .menu-list > li > a {
    color: #fff !important;
    text-shadow: 1.2px 1px #00000020;
    background: transparent !important;
    transition: background .16s ease, color .16s ease;
}

.header-menu .menu-list > li > a i {
    color: inherit !important;
}

.header-menu .menu-list > li:hover {
    background: #fff !important;
}

.header-menu .menu-list > li:hover > a,
.header-menu .menu-list > li > a:hover {
    color: var(--hito-primary) !important;
    background: #fff !important;
    text-decoration: none !important;
}

.header-menu .menu-list > li > a.active {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
}

.header-menu .menu-list > li:hover > a.active {
    color: var(--hito-primary) !important;
    background: #fff !important;
}

.header-menu .menu-hotline,
.header-menu .menu-hotline a,
.header-menu .menu-hotline span,
.header-menu .menu-hotline i {
    color: #fff !important;
}

.header-menu .menu-list li ul {
    background: #fff !important;
    border-bottom-color: var(--hito-primary) !important;
}

.header-menu .menu-list li ul li a {
    color: #333 !important;
}

.header-menu .menu-list li ul li:hover {
    background: var(--hito-primary) !important;
}

.header-menu .menu-list li ul li:hover > a,
.header-menu .menu-list li ul li:hover > a span,
.header-menu .menu-list li ul li:hover > a i {
    color: #fff !important;
}

/* =========================================================
   HOME SLIDER CATEGORY MEGA MENU
   An toàn: không style .slider-slide / .slide-wr / owl
   ========================================================= */
.slider_section,
.slider_section .slider-wrapper {
    overflow: visible !important;
}

#slider-cate.slider-cate {
    overflow: visible !important;
    z-index: 90 !important;
}

#slider-cate .category-head {
    background: var(--hito-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

#slider-cate .cate-list,
#slider-cate .cate-list ul {
    list-style: none !important;
}

#slider-cate .cate-list {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

#slider-cate .cate-items {
    position: static !important;
}

#slider-cate .cate-items > .cate-items-link {
    position: relative !important;
    z-index: 2 !important;
    color: var(--hito-text-title) !important;
    font-weight: 700 !important;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

#slider-cate .cate-items:hover > .cate-items-link,
#slider-cate .cate-items:focus-within > .cate-items-link {
    color: var(--hito-primary) !important;
    background: linear-gradient(90deg, var(--hito-bg-blue-light), #fff) !important;
    box-shadow: inset 3px 0 0 var(--hito-primary) !important;
    text-decoration: none !important;
}

#slider-cate .cate-items > .cate-items-list {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
    align-content: start !important;
    gap: 18px 24px !important;
    width: min(860px, calc(100vw - 420px)) !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    padding: 22px 26px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(8px) !important;
    background: #fff !important;
    border: 1px solid var(--hito-border-strong) !important;
    border-left: 3px solid var(--hito-primary) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: var(--hito-shadow-lg) !important;
    z-index: 9999 !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#slider-cate .cate-items > .cate-items-list::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background-color: #f1f1f1 !important;
}

#slider-cate .cate-items > .cate-items-list::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 999px !important;
}

#slider-cate .cate-items > .cate-items-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 100%;
    background: transparent;
}

#slider-cate .cate-items:hover > .cate-items-list,
#slider-cate .cate-items:focus-within > .cate-items-list {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

#slider-cate .cate-items-list > .cate-items-list-li {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#slider-cate .cate-items-list > .cate-items-list-li > .cate-items-link-a {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 12px !important;
    color: var(--hito-primary) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: linear-gradient(90deg, var(--hito-bg-blue-light), #f8fbff) !important;
    border: 1px solid var(--hito-blue-border) !important;
    border-left: 3px solid transparent !important;
    border-radius: 8px !important;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

#slider-cate .cate-items-list > .cate-items-list-li > .cate-items-link-a span {
    display: block !important;
    width: 100% !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#slider-cate .cate-items-list > .cate-items-list-li > .cate-items-link-a:hover,
#slider-cate .cate-items-list > .cate-items-list-li > .cate-items-link-a:focus {
    color: var(--hito-primary) !important;
    background: #fff !important;
    border-color: var(--hito-blue-border) !important;
    border-left-color: var(--hito-primary) !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important;
}

#slider-cate .cate-items-list-sub1,
#slider-cate .cate-items-list-sub2,
#slider-cate .cate-items-list-sub3,
#slider-cate .cate-items-list-sub4,
#slider-cate .cate-items-list-sub5,
#slider-cate .cate-items-list-sub6,
#slider-cate .cate-items-list-sub7,
#slider-cate .cate-items-list-sub8 {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#slider-cate .cate-items-list-sub2,
#slider-cate .cate-items-list-sub3,
#slider-cate .cate-items-list-sub4,
#slider-cate .cate-items-list-sub5,
#slider-cate .cate-items-list-sub6,
#slider-cate .cate-items-list-sub7,
#slider-cate .cate-items-list-sub8 {
    padding-left: 12px !important;
    border-left: 1px dashed var(--hito-blue-border) !important;
}

#slider-cate .cate-items-list-li-sub1,
#slider-cate .cate-items-list-li-sub2,
#slider-cate .cate-items-list-li-sub3,
#slider-cate .cate-items-list-li-sub4,
#slider-cate .cate-items-list-li-sub5,
#slider-cate .cate-items-list-li-sub6,
#slider-cate .cate-items-list-li-sub7,
#slider-cate .cate-items-list-li-sub8 {
    position: relative !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#slider-cate .cate-items-link-a-sub1,
#slider-cate .cate-items-link-a-sub2,
#slider-cate .cate-items-link-a-sub3,
#slider-cate .cate-items-link-a-sub4,
#slider-cate .cate-items-link-a-sub5,
#slider-cate .cate-items-link-a-sub6,
#slider-cate .cate-items-link-a-sub7,
#slider-cate .cate-items-link-a-sub8 {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 2px 0 !important;
    padding: 8px 10px 8px 22px !important;
    color: var(--hito-text-body) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    white-space: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    transition: background .14s ease, color .14s ease, padding-left .14s ease;
}

#slider-cate .cate-items-link-a-sub1 span,
#slider-cate .cate-items-link-a-sub2 span,
#slider-cate .cate-items-link-a-sub3 span,
#slider-cate .cate-items-link-a-sub4 span,
#slider-cate .cate-items-link-a-sub5 span,
#slider-cate .cate-items-link-a-sub6 span,
#slider-cate .cate-items-link-a-sub7 span,
#slider-cate .cate-items-link-a-sub8 span {
    display: inline-block !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#slider-cate .cate-items-link-a-sub1::before,
#slider-cate .cate-items-link-a-sub2::before,
#slider-cate .cate-items-link-a-sub3::before,
#slider-cate .cate-items-link-a-sub4::before,
#slider-cate .cate-items-link-a-sub5::before,
#slider-cate .cate-items-link-a-sub6::before,
#slider-cate .cate-items-link-a-sub7::before,
#slider-cate .cate-items-link-a-sub8::before {
    content: "\203A" !important;
    position: absolute !important;
    top: 50% !important;
    left: 7px !important;
    width: auto !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#slider-cate .cate-items-link-a-sub1:hover,
#slider-cate .cate-items-link-a-sub2:hover,
#slider-cate .cate-items-link-a-sub3:hover,
#slider-cate .cate-items-link-a-sub4:hover,
#slider-cate .cate-items-link-a-sub5:hover,
#slider-cate .cate-items-link-a-sub6:hover,
#slider-cate .cate-items-link-a-sub7:hover,
#slider-cate .cate-items-link-a-sub8:hover {
    color: var(--hito-primary) !important;
    background: var(--hito-bg-blue-light) !important;
    padding-left: 26px !important;
    text-decoration: none !important;
}

#slider-cate .cate-items-link-a-sub1:hover::before,
#slider-cate .cate-items-link-a-sub2:hover::before,
#slider-cate .cate-items-link-a-sub3:hover::before,
#slider-cate .cate-items-link-a-sub4:hover::before,
#slider-cate .cate-items-link-a-sub5:hover::before,
#slider-cate .cate-items-link-a-sub6:hover::before,
#slider-cate .cate-items-link-a-sub7:hover::before,
#slider-cate .cate-items-link-a-sub8:hover::before {
    left: 10px !important;
    color: var(--hito-primary) !important;
}

@media (max-width: 1199px) {
    #slider-cate .cate-items > .cate-items-list {
        width: min(700px, calc(100vw - 360px)) !important;
        grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    #slider-cate .cate-items > .cate-items-list {
        display: none !important;
    }
}

/* =========================================================
   PRODUCT CARDS - đồng đều, sạch hơn
   ========================================================= */
.product-flag-new,
.badge-new,
.ribbon-new,
.ribbon-hot {
    display: none !important;
}

.product-card-wrapper {
    display: flex;
}

.product-card {
    width: 100%;
    height: 100%;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hito-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-card:hover {
    border-color: var(--hito-blue-border) !important;
    box-shadow: var(--hito-shadow-md) !important;
    transform: translateY(-2px);
}

.card-image-wr {
    height: 135px !important;
    min-height: 135px !important;
    padding: 12px !important;
    background: #fff !important;
    border-bottom: 1px solid #f1f5f9;
}

.card-image-wr a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.card-image-wr img,
.card-image-wr .card-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.product-card:hover .card-image-wr img {
    transform: scale(1.04);
}

.product-info-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.product-description {
    flex: 1 1 auto;
}

.product-title h6 {
    min-height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    font-size: 13.5px !important;
    line-height: 21px !important;
    font-weight: 600 !important;
    color: var(--hito-text-main) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.product-title h6:hover {
    color: var(--hito-red) !important;
}

.product-price,
.product-price .current_price {
    color: var(--hito-red) !important;
    font-weight: 800 !important;
}

.product-price .contact {
    color: var(--hito-primary) !important;
}

.product-hover-btn {
    margin-top: auto !important;
}

.product-hover-btn ul li a:hover {
    background: var(--hito-primary) !important;
    border-color: var(--hito-primary) !important;
    color: #fff !important;
}

/* =========================================================
   SECTION / SHIPPING / FOOTER
   ========================================================= */
.section_title label,
.section_title button,
.category-product-section .section-title h3,
.category-product-section h3,
.section-title h3 {
    color: var(--hito-text-main) !important;
}

.shipping_area {
    background: #fff;
    border-top: 1px solid var(--hito-border);
    border-bottom: 1px solid var(--hito-border);
}

.single_shipping {
    transition: transform .18s ease, box-shadow .18s ease;
}

.single_shipping:hover {
    transform: translateY(-2px);
}

.single_shipping .shipping_icone,
.single_shipping .shipping_icone i {
    color: var(--hito-primary) !important;
}

/* Footer giữ tinh thần gốc: top sáng, bottom xanh chủ đạo */
.footer_widgets {
    background: #fafafa !important;
    color: #333 !important;
}

.footer_widgets .footer_top {
    background: #fafafa !important;
    border-top: 1px solid var(--hito-border) !important;
}

.footer_widgets .footer_top h3,
.footer_widgets .widgets_container h3 {
    color: var(--hito-primary) !important;
    font-weight: 700 !important;
}

.footer_widgets .footer_top p,
.footer_widgets .footer_top span,
.footer_widgets .footer_top li,
.footer_widgets .footer_top a,
.footer_widgets .footer_desc {
    color: #333 !important;
}

.footer_widgets .footer_top a:hover,
.footer_widgets .footer_menu ul li a:hover {
    color: var(--hito-primary) !important;
}

.footer_widgets .footer_logo img {
    max-height: 80px;
    width: auto;
}

.footer_widgets .subscribe_form form,
.footer_widgets .footer-newsletter {
    border-color: var(--hito-primary) !important;
}

.footer_widgets .subscribe_form form input,
.footer_widgets .footer-newsletter input {
    color: #333 !important;
    background: #fff !important;
}

.footer_widgets .subscribe_form form button,
.footer_widgets .footer-newsletter button,
#mc-submit {
    background: var(--hito-primary) !important;
    color: #fff !important;
    border-color: var(--hito-primary) !important;
}

.footer_widgets .subscribe_form form button:hover,
.footer_widgets .footer-newsletter button:hover,
#mc-submit:hover {
    background: var(--hito-primary-hover) !important;
    border-color: var(--hito-primary-hover) !important;
}

.footer_widgets .footer_bottom {
    background: var(--hito-primary) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
}

.footer_widgets .footer_bottom,
.footer_widgets .footer_bottom p,
.footer_widgets .footer_bottom a,
.footer_widgets .copyright_area p {
    color: #fff !important;
}

.footer_widgets .footer_payment img {
    border-radius: 3px;
}

@media (max-width: 767px) {
    .product-card {
        min-height: 260px;
    }

    .card-image-wr {
        height: 125px !important;
        min-height: 125px !important;
    }
}

/* =========================================================
   FOOTER PRO - HITOOLS
   Chỉ áp dụng cho footer có class .hitools-footer-pro
   ========================================================= */
.footer_widgets.hitools-footer-pro {
    margin-top: 30px !important;
    background: #0f172a !important;
    color: #dbeafe !important;
    border-top: 0 !important;
    overflow: hidden;
}

.hitools-footer-pro .footer-pro-cta {
    background: linear-gradient(135deg, var(--hito-primary), var(--hito-primary-hover)) !important;
    color: #fff !important;
    position: relative;
}

.hitools-footer-pro .footer-pro-cta::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    pointer-events: none;
}

.hitools-footer-pro .footer-pro-cta-inner {
    min-height: 118px;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}


.hitools-footer-pro .footer-pro-cta h2 {
    margin: 0 0 7px;
    color: #fff !important;
    font-size: 26px;
    line-height: 1.22;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,.16);
}

.hitools-footer-pro .footer-pro-cta p {
    margin: 0;
    max-width: 760px;
    color: rgba(255,255,255,.88) !important;
    font-size: 14px;
    line-height: 1.65;
}

.hitools-footer-pro .footer-pro-cta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hitools-footer-pro .footer-pro-btn {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.hitools-footer-pro .footer-pro-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
    text-decoration: none !important;
}

.hitools-footer-pro .footer-pro-btn-light {
    background: #fff !important;
    color: var(--hito-primary) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
}

.hitools-footer-pro .footer-pro-btn-phone {
    background: rgba(15, 23, 42, .34) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
}

.hitools-footer-pro .footer-pro-main,
.hitools-footer-pro .footer_top {
    background: #0f172a !important;
    border-top: 0 !important;
    padding: 40px 0 34px !important;
    position: relative;
}

.hitools-footer-pro .footer-pro-main::before {
    content: "";
    position: absolute;
    right: -170px;
    bottom: -170px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(1, 77, 127, .22);
    pointer-events: none;
}

.hitools-footer-pro .footer-pro-grid {
    position: relative;
    z-index: 1;
}

.hitools-footer-pro .widgets_container {
    margin-bottom: 0 !important;
}

.hitools-footer-pro .footer_logo {
    margin-bottom: 15px !important;
}

.hitools-footer-pro .footer_logo img {
    height: 58px !important;
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain;
}

.hitools-footer-pro .footer-pro-brand h3,
.hitools-footer-pro .widgets_container h3,
.hitools-footer-pro .footer_top h3 {
    position: relative;
    margin: 0 0 15px !important;
    padding-bottom: 11px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.hitools-footer-pro .footer-pro-brand h3::after,
.hitools-footer-pro .widgets_container h3::after,
.hitools-footer-pro .footer_top h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    border-radius: 999px;
    background: var(--hito-primary-hover);
}

.hitools-footer-pro .footer-pro-desc,
.hitools-footer-pro .footer_desc,
.hitools-footer-pro .footer_top p,
.hitools-footer-pro .footer_top span,
.hitools-footer-pro .footer_top li,
.hitools-footer-pro .footer_top a {
    color: #cbd5e1 !important;
    font-size: 13px;
    line-height: 1.72;
}

.hitools-footer-pro .footer-pro-contact-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.hitools-footer-pro .footer-pro-contact-list a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e2e8f0 !important;
    font-weight: 600;
}

.hitools-footer-pro .footer-pro-contact-list i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #fff !important;
    font-size: 12px;
}

.hitools-footer-pro .footer_menu ul li {
    margin-bottom: 6px !important;
}

.hitools-footer-pro .footer_menu ul li a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 2px 0 !important;
    color: #cbd5e1 !important;
    transition: color .15s ease, transform .15s ease;
}

.hitools-footer-pro .footer_menu ul li a::before {
    content: "\203A";
    color: #7fb6ff;
    font-size: 16px;
    line-height: 1;
}

.hitools-footer-pro .footer_menu ul li a:hover,
.hitools-footer-pro .footer-pro-contact-list a:hover {
    color: #fff !important;
    transform: translateX(2px);
    text-decoration: none !important;
}

.hitools-footer-pro .footer-social {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.hitools-footer-pro .footer-social .footer-social-items {
    margin: 0 !important;
}

.hitools-footer-pro .footer-social a {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.hitools-footer-pro .footer-social a:hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.24);
    transform: translateY(-2px);
}

.hitools-footer-pro .footer-social img,
.hitools-footer-pro .footer-social-items img {
    max-width: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

.hitools-footer-pro .subscribe_form {
    margin-top: 12px;
}

.hitools-footer-pro .subscribe_form form,
.hitools-footer-pro .footer-newsletter {
    height: 44px !important;
    max-width: 520px;
    display: flex !important;
    align-items: stretch;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    overflow: hidden;
    background: rgba(255,255,255,.06) !important;
}

.hitools-footer-pro .subscribe_form form input,
.hitools-footer-pro .footer-newsletter input {
    height: 100% !important;
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    color: #fff !important;
}

.hitools-footer-pro .subscribe_form form input::placeholder,
.hitools-footer-pro .footer-newsletter input::placeholder {
    color: rgba(255,255,255,.55) !important;
}

.hitools-footer-pro .subscribe_form form button,
.hitools-footer-pro .footer-newsletter button,
.hitools-footer-pro #mc-submit {
    width: 108px !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--hito-primary-hover) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.hitools-footer-pro .subscribe_form form button:hover,
.hitools-footer-pro .footer-newsletter button:hover,
.hitools-footer-pro #mc-submit:hover {
    background: #fff !important;
    color: var(--hito-primary) !important;
}

.hitools-footer-pro .footer-pro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.hitools-footer-pro .footer-pro-tags span {
    height: 27px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: #dbeafe !important;
    font-size: 11px;
    font-weight: 700;
}

.hitools-footer-pro .footer-pro-bottom,
.hitools-footer-pro .footer_bottom {
    background: #0b1220 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding: 13px 0 !important;
}

.hitools-footer-pro .footer_bottom,
.hitools-footer-pro .footer_bottom p,
.hitools-footer-pro .footer_bottom a,
.hitools-footer-pro .copyright_area p {
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.hitools-footer-pro .footer_payment ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.hitools-footer-pro .footer_payment li {
    margin: 0 !important;
}

.hitools-footer-pro .footer_payment img {
    height: 28px !important;
    width: auto !important;
    border-radius: 4px !important;
    background: #fff;
    padding: 1px;
}

@media (max-width: 991px) {
    .hitools-footer-pro .footer-pro-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .hitools-footer-pro .footer-pro-cta-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .hitools-footer-pro .footer-pro-btn {
        flex: 1 1 180px;
    }

    .hitools-footer-pro .footer-pro-grid > [class*="col-"] {
        margin-bottom: 26px;
    }

    .hitools-footer-pro .footer_payment ul {
        justify-content: flex-start;
        margin-top: 12px !important;
    }
}

@media (max-width: 575px) {
    .hitools-footer-pro .footer-pro-cta h2 {
        font-size: 22px;
    }

    .hitools-footer-pro .footer-pro-cta p {
        font-size: 13px;
    }

    .hitools-footer-pro .footer-pro-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hitools-footer-pro .footer-pro-btn {
        width: 100%;
    }

    .hitools-footer-pro .footer_logo img {
        height: 48px !important;
        max-height: 48px !important;
    }

    .hitools-footer-pro .subscribe_form form,
    .hitools-footer-pro .footer-newsletter {
        border-radius: 12px !important;
    }

    .hitools-footer-pro .subscribe_form form button,
    .hitools-footer-pro .footer-newsletter button,
    .hitools-footer-pro #mc-submit {
        width: 92px !important;
    }
}

/* =========================================================
   RESPONSIVE FIX: 669px -> 767px
   Ở khoảng này header đã chuyển dạng tablet/mobile nhưng
   slider category gốc vẫn còn hiện, làm banner bị bó ngang.
   Chỉ xử lý khu vực slider, không đụng desktop.
   ========================================================= */
@media (min-width: 669px) and (max-width: 767px) {
    .slider_section .slider-wrapper {
        display: block !important;
        flex-wrap: nowrap !important;
        padding-top: 14px !important;
        padding-bottom: 18px !important;
        overflow: hidden !important;
    }

    .slider_section #slider-cate.slider-cate,
    .slider_section .slider-cate.d-mobile-none,
    .slider_section #slider-cate.d-mobile-none,
    .slider_section .d-mobile-none#slider-cate {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .slider_section .slider-slide {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        min-width: 0 !important;
    }

    .slider_section .slide-wr,
    .slider_section .single_slider,
    .slider_section .owl-carousel,
    .slider_section .owl-stage-outer,
    .slider_section .owl-stage,
    .slider_section .owl-item {
        max-width: 100% !important;
    }

    .slider_section .slide-wr img,
    .slider_section .single_slider img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .slider_section .owl-dots {
        bottom: 8px !important;
    }
}

/* Đồng bộ luôn breakpoint 767 cho class d-mobile-none để tránh lỗi tablet hẹp */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }

    .slider_section .slider-slide {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   RESPONSIVE SAFE FIX v5: 669px -> 991px
   Sửa lỗi khoảng trắng, logo/menu bị trôi khi DevTools responsive.
   Chỉ override tablet/mobile, không đụng desktop >= 992px.
   ========================================================= */
@media (max-width: 991px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .main_header,
    .header_top,
    .header-top,
    .header_middle,
    .mobile-search,
    .slider_section,
    .shipping_area,
    .content-body,
    .content-wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .content-wrapper {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Topbar tablet/mobile: tránh slogan + login chen nhau gây tràn ngang */
    .header-top .desktop-top-wrapper,
    .desktop-top-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 34px !important;
        gap: 10px !important;
    }

    .header-offer-wrapper {
        display: none !important;
    }

    .header-top-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        justify-content: flex-end !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .header-login,
    .desktop-view-login {
        min-width: 0 !important;
        max-width: calc(100vw - 90px) !important;
    }

    .header-login-btn,
    .header-account-combo {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 4px 8px !important;
    }

    .header-language {
        flex: 0 0 auto !important;
    }

    /* Header middle: hamburger + logo trái, quote/cart phải */
    .header_middle {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        background: #fff !important;
        border-bottom: 1px solid var(--hito-border) !important;
    }

    .header_middle .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .header_middle .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .header_middle .logo-wrapperr {
        width: auto !important;
        max-width: 48% !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .logo-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .canvas_open {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--hito-border-strong) !important;
        border-radius: 6px !important;
        background: #fff !important;
        color: var(--hito-primary) !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .logo {
        padding-top: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .logo img,
    .logo-wrapper .logo img {
        max-height: 44px !important;
        max-width: 170px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .header_middle .col-lg-8,
    .header_middle .col-md-7,
    .header_middle .col-sm-6,
    .header_middle .col-4 {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header_right_info {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }

    .search_container.mobail_s_none {
        display: none !important;
    }

    .header_account_area {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .header-nav-right-block,
    .header-nav-right-block.d-mobile-none {
        display: none !important;
    }

    .header_account_list.mini_cart_wrapper {
        flex: 0 0 auto !important;
    }

    .header_account_list span.lnr-cart {
        font-size: 29px !important;
    }

    .header_account_list span.item_count {
        top: -4px !important;
        right: -8px !important;
    }

    .header-menu {
        display: none !important;
    }

    /* Search mobile luôn hiện ổn định từ 669 -> 991 */
    .mobile-search {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 15px !important;
        margin: 0 !important;
        background: #f8fafc !important;
        border-bottom: 1px solid var(--hito-border) !important;
    }

    .mobile-search form {
        width: min(100%, 560px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .mobile-search .search_box {
        height: 38px !important;
        width: 100% !important;
    }

    .mobile-search .search_box input {
        height: 38px !important;
        font-size: 13px !important;
    }

    .mobile-search .search_box button {
        width: 48px !important;
        min-width: 48px !important;
        height: 38px !important;
    }

    /* Tablet/mobile hero: bỏ category trái, slider full width */
    .slider_section .slider-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 10px !important;
        padding-bottom: 14px !important;
        overflow: hidden !important;
    }

    .slider_section #slider-cate.slider-cate,
    .slider_section .slider-cate.d-mobile-none,
    .slider_section #slider-cate.d-mobile-none,
    .slider_section .d-mobile-none#slider-cate {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .slider_section .slider-slide,
    .slider_section .slide-wr,
    .slider_section .slider_area,
    .slider_section .owl-carousel,
    .slider_section .owl-stage-outer,
    .slider_section .owl-stage,
    .slider_section .owl-item,
    .slider_section .single_slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .slider_section .slider-slide {
        display: block !important;
        flex: 0 0 100% !important;
    }

    .slider_section .slide-wr,
    .slider_section .slider_area,
    .slider_section .owl-stage-outer,
    .slider_section .owl-stage,
    .slider_section .owl-item,
    .slider_section .single_slider {
        min-height: 220px !important;
    }

    .slider_section .single_slider {
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .slider_section .single_slider img,
    .slider_section .slider-img {
        display: block !important;
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        object-fit: cover !important;
        object-position: center center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .shipping_area .row {
        row-gap: 12px !important;
    }
}

@media (min-width: 669px) and (max-width: 991px) {
    .slider_section .slide-wr,
    .slider_section .slider_area,
    .slider_section .owl-stage-outer,
    .slider_section .owl-stage,
    .slider_section .owl-item,
    .slider_section .single_slider {
        min-height: 255px !important;
    }

    .slider_section .single_slider img,
    .slider_section .slider-img {
        height: 255px !important;
        min-height: 255px !important;
    }
}

@media (max-width: 575px) {
    .header-login-btn,
    .header-account-combo {
        max-width: 180px !important;
        font-size: 12px !important;
    }

    .logo img,
    .logo-wrapper .logo img {
        max-height: 40px !important;
        max-width: 145px !important;
    }

    .canvas_open {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .slider_section .single_slider img,
    .slider_section .slider-img {
        height: 190px !important;
        min-height: 190px !important;
    }
}

/* =========================================================
   RESPONSIVE FIX v6: Slider trắng khi co nhỏ dưới 768px
   Lý do: Owl carousel đôi khi giữ transform/width cũ khi đổi breakpoint.
   Cách xử lý: mobile/tablet hẹp chỉ hiển thị slide active/slide đầu tiên,
   không ép height cứng để tránh tạo khoảng trắng.
   ========================================================= */
@media (max-width: 767px) {
    .slider_section {
        background: #fff !important;
    }

    .slider_section .slider-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .slider_section #slider-cate.slider-cate,
    .slider_section .slider-cate,
    .slider_section .slider-cate.d-mobile-none,
    .slider_section #slider-cate.d-mobile-none,
    .slider_section .d-mobile-none#slider-cate {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .slider_section .slider-slide,
    .slider_section .slide-wr,
    .slider_section .slider_area {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider_section .slider_area.owl-carousel,
    .slider_section .slider_area.owl-loaded,
    .slider_section .slider_area.owl-drag {
        display: block !important;
        overflow: hidden !important;
    }

    .slider_section .owl-stage-outer {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .slider_section .owl-stage {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
    }

    .slider_section .owl-item {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #fff !important;
    }

    .slider_section .owl-item.active,
    .slider_section .owl-item:first-child {
        display: block !important;
    }

    .slider_section .single_slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider_section .owl-item .single_slider {
        display: none !important;
    }

    .slider_section .owl-item.active .single_slider,
    .slider_section .owl-item:first-child .single_slider,
    .slider_section .slider_area > .single_slider:first-child {
        display: block !important;
    }

    .slider_section .single_slider img,
    .slider_section .single_slider img.slider-img,
    .slider_section .slider-img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .slider_section .single_slider .container,
    .slider_section .slider_content {
        display: none !important;
    }

    .slider_section .owl-nav {
        display: none !important;
    }

    .slider_section .owl-dots {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 6px !important;
        z-index: 5 !important;
    }
}

/* Tablet hẹp 768px-991px: không ép stage/item, để Owl tự tính; chỉ bỏ khoảng trắng cứng. */
@media (min-width: 768px) and (max-width: 991px) {
    .slider_section .slide-wr,
    .slider_section .slider_area,
    .slider_section .owl-stage-outer,
    .slider_section .owl-stage,
    .slider_section .owl-item,
    .slider_section .single_slider {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .slider_section .single_slider img,
    .slider_section .slider-img {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   RESPONSIVE FIX v7: Tablet 768px -> 991px slider trắng
   Lý do: Owl carousel giữ transform/width cũ khi resize từ desktop
   sang tablet, trong khi menu trái đã ẩn. Reset stage và show slide đầu.
   Không ảnh hưởng desktop >= 992px.
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .slider_section {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    .slider_section .slider-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 14px !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .slider_section #slider-cate.slider-cate,
    .slider_section .slider-cate,
    .slider_section .slider-cate.d-mobile-none,
    .slider_section #slider-cate.d-mobile-none,
    .slider_section .d-mobile-none#slider-cate {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .slider_section .slider-slide,
    .slider_section .slide-wr,
    .slider_section .slider_area {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }

    .slider_section .slider_area.owl-carousel,
    .slider_section .slider_area.owl-loaded,
    .slider_section .slider_area.owl-drag,
    .slider_section .owl-stage-outer {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .slider_section .owl-stage {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        transition: none !important;
        background: #fff !important;
    }

    .slider_section .owl-item {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #fff !important;
    }

    .slider_section .owl-item.active,
    .slider_section .owl-item:first-child {
        display: block !important;
    }

    .slider_section .single_slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider_section .owl-item .single_slider {
        display: none !important;
    }

    .slider_section .owl-item.active .single_slider,
    .slider_section .owl-item:first-child .single_slider,
    .slider_section .slider_area > .single_slider:first-child {
        display: block !important;
    }

    .slider_section .single_slider img,
    .slider_section .single_slider img.slider-img,
    .slider_section .slider-img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .slider_section .single_slider .container,
    .slider_section .slider_content {
        display: none !important;
    }

    .slider_section .owl-nav {
        display: none !important;
    }

    .slider_section .owl-dots {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 8px !important;
        z-index: 5 !important;
    }
}

/* Dưới 992px nếu Owl vẫn không kịp refresh khi co giãn cửa sổ,
   buộc trigger layout lại bằng contain + full-width. */
@media (max-width: 991px) {
    .slider_section .slider_area {
        contain: layout paint !important;
    }
}

/* =========================================================
   RESPONSIVE/UI PATCH v8: Search desktop red style
   - Chỉ xử lý cụm .search_container.mobail_s_none và nút báo giá/đặt hàng desktop.
   - Lấy tinh thần hitools_v55: viền đỏ, nút đỏ, hover đỏ đậm.
   - Không đụng slider/mega menu.
   ========================================================= */
@media (min-width: 992px) {
    .header_middle .header_right_info {
        gap: 18px !important;
    }

    .header_middle .search_container.mobail_s_none {
        display: block !important;
        flex: 1 1 540px !important;
        width: auto !important;
        max-width: 580px !important;
        min-width: 340px !important;
        margin: 0 18px 0 0 !important;
    }

    .header_middle .search_container.mobail_s_none form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .header_middle .search_container.mobail_s_none .search_box {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 45px !important;
        min-height: 45px !important;
        background: #fff !important;
        border: 2px solid var(--hito-red, #e6002d) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 20px rgba(230, 0, 45, .10) !important;
        transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    .header_middle .search_container.mobail_s_none .search_box:focus-within {
        border-color: var(--hito-red, #e6002d) !important;
        box-shadow: 0 0 0 3px rgba(230, 0, 45, .09), 0 10px 24px rgba(230, 0, 45, .12) !important;
    }

    .header_middle .search_container.mobail_s_none .search_box input {
        flex: 1 1 auto !important;
        width: auto !important;
        height: 45px !important;
        min-width: 0 !important;
        padding: 0 16px !important;
        border: 0 !important;
        outline: 0 !important;
        background: #fff !important;
        color: var(--hito-text-body, #333) !important;
        font-size: 14px !important;
        line-height: 45px !important;
    }

    .header_middle .search_container.mobail_s_none .search_box input::placeholder {
        color: #7b8491 !important;
        opacity: 1 !important;
    }

    .header_middle .search_container.mobail_s_none .search_box button {
        flex: 0 0 58px !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 45px !important;
        min-height: 45px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-left: 1px solid rgba(230, 0, 45, .14) !important;
        border-radius: 0 !important;
        background: var(--hito-red, #e6002d) !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    .header_middle .search_container.mobail_s_none .search_box button span,
    .header_middle .search_container.mobail_s_none .search_box button i {
        color: #fff !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .header_middle .search_container.mobail_s_none .search_box button:hover {
        background: #c80025 !important;
        color: #fff !important;
        box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .04) !important;
    }

    /* Nút Báo giá / Đặt hàng theo style đỏ của mockup, nhưng giữ đúng HTML hiện tại */
    .header_middle .header-nav-right-block {
        gap: 8px !important;
        padding: 0 14px 0 0 !important;
    }

    .header_middle .header-nav-right-block .btn-custom-1 {
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 13px !important;
        border-radius: 10px !important;
        border: 1px solid #ffd1d8 !important;
        background: #fff !important;
        color: var(--hito-red, #e6002d) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .header_middle .header-nav-right-block .btn-custom-1 span {
        color: inherit !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .header_middle .header-nav-right-block .btn-custom-1:first-child {
        background: var(--hito-red, #e6002d) !important;
        border-color: var(--hito-red, #e6002d) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(230, 0, 45, .16) !important;
    }

    .header_middle .header-nav-right-block .btn-custom-1:hover {
        background: #c80025 !important;
        border-color: #c80025 !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(230, 0, 45, .18) !important;
    }

    .header_middle .header_account_area {
        flex: 0 0 auto !important;
        min-width: auto !important;
    }
}

/* Mobile/tablet search: chỉ đồng bộ màu nút, không thay layout responsive đang ổn */
@media (max-width: 991px) {
    .mobile-search .search_box {
        border-color: #dbe6f3 !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    .mobile-search .search_box:focus-within {
        border-color: var(--hito-red, #e6002d) !important;
        box-shadow: 0 0 0 3px rgba(230, 0, 45, .08) !important;
    }

    .mobile-search .search_box button {
        background: #fff !important;
        color: var(--hito-primary, #014d7f) !important;
        border-left: 1px solid var(--hito-border-strong, #dbe6f3) !important;
    }

    .mobile-search .search_box button:hover,
    .mobile-search .search_box:focus-within button {
        background: var(--hito-red, #e6002d) !important;
        color: #fff !important;
        border-left-color: var(--hito-red, #e6002d) !important;
    }

    .mobile-search .search_box button:hover span,
    .mobile-search .search_box:focus-within button span {
        color: #fff !important;
    }
}


/* =========================================================
   UI PATCH v9: cart_button hover + home extra sections
   - Fix hover cart_button không đổi màu lỗi/mất chữ.
   - Thêm style cho "Vì sao chọn HiTOOLS?" và CTA báo giá nhanh.
   ========================================================= */
.cart_button a,
.cart_button button {
    min-height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid var(--hito-border-strong, #dbe6f3) !important;
    background: #fff !important;
    color: var(--hito-primary, #014d7f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.cart_button a *,
.cart_button button * {
    color: inherit !important;
}

.cart_button a:hover,
.cart_button a:focus,
.cart_button button:hover,
.cart_button button:focus {
    background: var(--hito-red, #e6002d) !important;
    border-color: var(--hito-red, #e6002d) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .18) !important;
    transform: translateY(-1px) !important;
}

.cart_button a:active,
.cart_button button:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 14px rgba(230, 0, 45, .14) !important;
}

.cart_button:first-child a {
    background: var(--hito-primary, #014d7f) !important;
    border-color: var(--hito-primary, #014d7f) !important;
    color: #fff !important;
}

.cart_button:first-child a:hover,
.cart_button:first-child a:focus {
    background: var(--hito-red, #e6002d) !important;
    border-color: var(--hito-red, #e6002d) !important;
    color: #fff !important;
}

.hitools-why-section,
.hitools-quick-quote-section {
    background: #fff !important;
}

.hitools-why-section {
    padding: 30px 0 14px !important;
}

.hitools-quick-quote-section {
    padding: 14px 0 34px !important;
}

.hitools-section-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.hitools-section-head h2 {
    position: relative !important;
    margin: 0 !important;
    padding-bottom: 9px !important;
    color: var(--hito-primary, #014d7f) !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
}

.hitools-section-head h2:after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 68px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--hito-primary, #014d7f), #6ea8ff) !important;
}

.hitools-section-head p {
    max-width: 680px !important;
    margin: 12px 0 0 !important;
    color: var(--hito-text-muted, #666) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.hitools-section-link {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--hito-border-blue, #c9defd) !important;
    background: #fff !important;
    color: var(--hito-primary, #014d7f) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: .16s ease !important;
}

.hitools-section-link:hover {
    background: var(--hito-primary, #014d7f) !important;
    border-color: var(--hito-primary, #014d7f) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(1, 77, 127, .18) !important;
}

.hitools-why-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.hitools-why-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 178px !important;
    padding: 20px 17px !important;
    border: 1px solid #e6edf7 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.hitools-why-card:after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    top: -34px !important;
    width: 94px !important;
    height: 94px !important;
    border-radius: 999px !important;
    background: var(--hito-bg-blue-soft, #f5f9ff) !important;
    z-index: 0 !important;
}

.hitools-why-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--hito-border-blue, #c9defd) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .09) !important;
}

.hitools-why-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--hito-primary, #014d7f), var(--hito-primary-hover, #0057d1)) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    font-size: 18px !important;
    box-shadow: 0 8px 18px rgba(1, 77, 127, .18) !important;
}

.hitools-why-icon i {
    color: #fff !important;
}

.hitools-why-card h3 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 8px !important;
    color: var(--hito-primary, #014d7f) !important;
    font-size: 15.5px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.hitools-why-card p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    color: var(--hito-text-muted, #666) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.hitools-quick-quote-box {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: center !important;
    border-radius: 20px !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #0f172a 0%, var(--hito-primary, #014d7f) 100%) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
}

.hitools-quick-quote-box:before {
    content: "" !important;
    position: absolute !important;
    right: -110px !important;
    top: -110px !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .09) !important;
    pointer-events: none !important;
}

.hitools-quick-content,
.hitools-quick-actions {
    position: relative !important;
    z-index: 1 !important;
}

.hitools-quick-kicker {
    height: 26px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .9px !important;
}

.hitools-quick-content h2 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16) !important;
}

.hitools-quick-content p {
    max-width: 760px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.hitools-quick-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.hitools-quick-points span {
    min-height: 32px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.hitools-quick-points i {
    color: #fff !important;
}

.hitools-quick-actions {
    border-radius: 16px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    display: grid !important;
    gap: 10px !important;
}

.hitools-quick-btn {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: .16s ease !important;
}

.hitools-quick-btn i {
    color: inherit !important;
}

.hitools-quick-btn-red {
    background: var(--hito-red, #e6002d) !important;
    border: 1px solid var(--hito-red, #e6002d) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .22) !important;
}

.hitools-quick-btn-red:hover {
    background: #c80025 !important;
    border-color: #c80025 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.hitools-quick-btn-light {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: var(--hito-primary, #014d7f) !important;
}

.hitools-quick-btn-light:hover {
    background: var(--hito-bg-blue-light, #eef5ff) !important;
    color: var(--hito-primary, #014d7f) !important;
    transform: translateY(-1px) !important;
}

.hitools-quick-btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    color: #fff !important;
}

.hitools-quick-btn-outline:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1199px) {
    .hitools-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hitools-quick-quote-box {
        grid-template-columns: 1fr !important;
    }

    .hitools-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .hitools-why-section {
        padding-top: 22px !important;
    }

    .hitools-section-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hitools-section-head h2 {
        font-size: 23px !important;
    }

    .hitools-why-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hitools-why-card {
        min-height: auto !important;
        padding: 18px 16px !important;
    }

    .hitools-quick-quote-section {
        padding-bottom: 24px !important;
    }

    .hitools-quick-quote-box {
        border-radius: 16px !important;
        padding: 20px !important;
        gap: 18px !important;
    }

    .hitools-quick-content h2 {
        font-size: 23px !important;
    }

    .hitools-quick-actions {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
}


/* =========================================================
   HITOOLS PATCH v10 - Why section visible + red consult button
   ========================================================= */
.hitools-footer-pro .footer-pro-btn-red {
    background: var(--hito-red, #e6002d) !important;
    color: #fff !important;
    border: 1px solid var(--hito-red, #e6002d) !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .20) !important;
}

.hitools-footer-pro .footer-pro-btn-red:hover,
.hitools-footer-pro .footer-pro-btn-red:focus {
    background: #c80025 !important;
    border-color: #c80025 !important;
    color: #fff !important;
}

/* Đưa khối Vì sao chọn HiTOOLS lên gần hero: cách đều, không dính Sản phẩm nổi bật */
.hitools-why-section {
    margin-top: 0 !important;
    border-top: 1px solid #e6edf7 !important;
}

.hitools-quick-quote-section + #idloadhomepage {
    display: block !important;
}

@media (max-width: 767px) {
    .hitools-footer-pro .footer-pro-btn-red {
        width: 100% !important;
    }
}


/* =========================================================
   HITOOLS PATCH v11 - Ensure Why section visible + red consult button
   ========================================================= */
.hitools-why-section,
.hitools-quick-quote-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hitools-why-section-fallback,
.hitools-quick-quote-fallback {
    position: relative !important;
    z-index: 1 !important;
}

.hitools-quick-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.hitools-quick-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: .16s ease !important;
}

.hitools-quick-btn-red,
.footer-pro-btn-red,
.hitools-footer-pro .footer-pro-cta-actions .footer-pro-btn:first-child,
.hitools-footer-pro a.footer-pro-btn[href*="lien-he"] {
    background: var(--hito-red, #e6002d) !important;
    border: 1px solid var(--hito-red, #e6002d) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .22) !important;
}

.hitools-quick-btn-red:hover,
.footer-pro-btn-red:hover,
.hitools-footer-pro .footer-pro-cta-actions .footer-pro-btn:first-child:hover,
.hitools-footer-pro a.footer-pro-btn[href*="lien-he"]:hover {
    background: #c80025 !important;
    border-color: #c80025 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.hitools-quick-btn-light {
    background: #fff !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: var(--hito-primary, #014d7f) !important;
}

.hitools-quick-btn-light:hover {
    background: var(--hito-bg-blue-light, #eef5ff) !important;
    color: var(--hito-primary, #014d7f) !important;
}

@media (max-width: 767px) {
    .hitools-quick-actions {
        margin-top: 18px !important;
    }
}

/* =========================================================
   PATCH V15 - Fix product title ellipsis/dot clipping
   Mục tiêu: bỏ dấu "..." lạ ở tên sản phẩm, cho title xuống dòng tự nhiên.
========================================================= */
.product-card .product-title,
.product-card .product-title a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.product-card .product-title h6 {
    display: block !important;
    min-height: 60px !important;
    max-height: 60px !important;
    height: 60px !important;
    line-height: 20px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .product-card .product-title h6 {
        min-height: 54px !important;
        max-height: 54px !important;
        height: 54px !important;
        line-height: 18px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   FONT - BE VIETNAM PRO
   ========================================================= */
html,
body {
    font-family: var(--hito-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body :not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-brands):not([class^="fa-"]):not([class*=" fa-"]):not(.ion):not([class^="ion-"]):not([class*=" ion-"]):not(.lnr):not([class^="lnr-"]):not([class*=" lnr-"]):not(.k-icon):not(.k-svg-icon):not(.k-font-icon) {
    font-family: var(--hito-font) !important;
}

input,
button,
select,
textarea,
.k-input,
.k-button,
.k-dropdown,
.k-grid,
.k-widget {
    font-family: var(--hito-font) !important;
}


/* =========================================================
   HiTOOLS FIX v22: random-tab hover không che/mất chữ
   - Class thực tế: .random-tab-items.nav-item
   - Lỗi do pseudo ::before nằm cùng z-index với link, hover phủ lên chữ
   ========================================================= */
.random-tab .random-tab-items,
.random-tab-list .random-tab-items.nav-item {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.random-tab .random-tab-items::before,
.random-tab-list .random-tab-items.nav-item::before {
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 0;
    transform: scale3d(0, 1, 1) !important;
    transform-origin: 0 50% !important;
}

.random-tab .random-tab-items:hover::before,
.random-tab-list .random-tab-items.nav-item:hover::before {
    opacity: 1;
    transform: scale3d(1, 1, 1) !important;
}

.random-tab .random-tab-link,
.random-tab .random-tab-items > a,
.random-tab-list .random-tab-items.nav-item > a {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.random-tab .random-tab-items:hover .random-tab-link,
.random-tab .random-tab-items:hover > a,
.random-tab-list .random-tab-items.nav-item:hover > a,
.random-tab .random-tab-items:has(.active) .random-tab-link,
.random-tab .random-tab-items:has(.active) > a,
.random-tab-list .random-tab-items.nav-item:has(.active) > a {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.random-tab .random-tab-items:has(.active)::before,
.random-tab-list .random-tab-items.nav-item:has(.active)::before {
    opacity: 0 !important;
}

/* =========================================================
   HiTOOLS FIX v23: checkout_btn hover/text bị mất chữ
   - Class thực tế trang giỏ hàng: .checkout_btn
   - Ép lại text, nền, hover và tắt pseudo overlay nếu theme cũ phủ lên chữ.
   ========================================================= */
.checkout_btn {
    text-align: right !important;
}

.checkout_btn a,
.checkout_btn button,
.checkout_btn input[type="submit"] {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 190px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid var(--hito-primary, var(--primary-color, #014d7f)) !important;
    border-radius: 8px !important;
    background: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    color: #ffffff !important;
    font-family: 'Be Vietnam Pro', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.checkout_btn a::before,
.checkout_btn a::after,
.checkout_btn button::before,
.checkout_btn button::after,
.checkout_btn input[type="submit"]::before,
.checkout_btn input[type="submit"]::after {
    content: none !important;
    display: none !important;
}

.checkout_btn a *,
.checkout_btn button *,
.checkout_btn input[type="submit"] * {
    position: relative !important;
    z-index: 2 !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.checkout_btn a:hover,
.checkout_btn a:focus,
.checkout_btn button:hover,
.checkout_btn button:focus,
.checkout_btn input[type="submit"]:hover,
.checkout_btn input[type="submit"]:focus {
    background: var(--hito-red, #e6002d) !important;
    border-color: var(--hito-red, #e6002d) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .18) !important;
    transform: translateY(-1px) !important;
}

.checkout_btn a:active,
.checkout_btn button:active,
.checkout_btn input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 14px rgba(230, 0, 45, .14) !important;
}

@media (max-width: 767px) {
    .checkout_btn {
        text-align: stretch !important;
    }

    .checkout_btn a,
    .checkout_btn button,
    .checkout_btn input[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   HiTOOLS FIX v24: cart submit + coupon button hover/text
   - Buttons thực tế:
     <button onclick="updateCart()" type="button">Cập Nhật Giỏ Hàng</button>
     <button type="submit">Áp dụng mã</button>
   - Ép lại style để hover không bị overlay/mất chữ.
   ========================================================= */
.cart_submit button,
.coupon_inner button,
.coupon_inner button[type="submit"],
button[onclick="updateCart()"] {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 18px !important;
    border: 1px solid var(--hito-primary, var(--primary-color, #014d7f)) !important;
    border-radius: 8px !important;
    background: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    color: #ffffff !important;
    font-family: 'Be Vietnam Pro', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.cart_submit button::before,
.cart_submit button::after,
.coupon_inner button::before,
.coupon_inner button::after,
button[onclick="updateCart()"]::before,
button[onclick="updateCart()"]::after {
    content: none !important;
    display: none !important;
}

.cart_submit button:hover,
.cart_submit button:focus,
.coupon_inner button:hover,
.coupon_inner button:focus,
button[onclick="updateCart()"]:hover,
button[onclick="updateCart()"]:focus {
    background: var(--hito-red, #e6002d) !important;
    border-color: var(--hito-red, #e6002d) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .18) !important;
    transform: translateY(-1px) !important;
}

.cart_submit button:active,
.coupon_inner button:active,
button[onclick="updateCart()"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 14px rgba(230, 0, 45, .14) !important;
}

.coupon_inner input {
    min-height: 40px !important;
    border-radius: 8px !important;
    border-color: #dbe6f3 !important;
}

@media (max-width: 767px) {
    .cart_submit button,
    .coupon_inner button,
    .coupon_inner button[type="submit"],
    button[onclick="updateCart()"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .coupon_inner input {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* =========================================================
   HiTOOLS FIX v28: product detail quantity + add/cart order buttons
   - Nút mặc định màu xanh HiTOOLS, hover chuyển đỏ.
   - Fix chữ không bị mất khi hover, tắt pseudo overlay theme cũ.
   ========================================================= */
.product_variant.quantity {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.product_variant.quantity label {
    margin: 0 6px 0 0 !important;
    color: var(--hito-text-main, #003b8e) !important;
    font-family: 'Be Vietnam Pro', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.product_variant.quantity input[type="number"],
.product_variant.quantity #numberProducts {
    width: 86px !important;
    min-width: 86px !important;
    height: 42px !important;
    padding: 0 10px !important;
    border: 1px solid #dbe6f3 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--hito-text-body, #333333) !important;
    font-family: 'Be Vietnam Pro', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

.product_variant.quantity input[type="number"]:focus,
.product_variant.quantity #numberProducts:focus {
    border-color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    box-shadow: 0 0 0 3px rgba(1, 77, 127, .1) !important;
}

.product_variant.quantity .button.customs-btn,
.product_variant.quantity button.customs-btn,
button.button.customs-btn[onclick^="addToCart"],
button.button.customs-btn[onclick^="addAndGoToCart"] {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 9px !important;
    border: 1px solid var(--hito-primary, var(--primary-color, #014d7f)) !important;
    background: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    color: #ffffff !important;
    font-family: 'Be Vietnam Pro', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(1, 77, 127, .18) !important;
    transform: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.product_variant.quantity .button.customs-btn::before,
.product_variant.quantity .button.customs-btn::after,
.product_variant.quantity button.customs-btn::before,
.product_variant.quantity button.customs-btn::after,
button.button.customs-btn[onclick^="addToCart"]::before,
button.button.customs-btn[onclick^="addToCart"]::after,
button.button.customs-btn[onclick^="addAndGoToCart"]::before,
button.button.customs-btn[onclick^="addAndGoToCart"]::after {
    content: none !important;
    display: none !important;
}

/* Mặc định xanh, hover đỏ cho cả Thêm vào giỏ và Đặt hàng */
.product_variant.quantity button.customs-btn[onclick^="addToCart"],
.product_variant.quantity button.customs-btn[onclick^="addAndGoToCart"],
button.button.customs-btn[onclick^="addToCart"],
button.button.customs-btn[onclick^="addAndGoToCart"] {
    border-color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    background: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(1, 77, 127, .18) !important;
}

.product_variant.quantity .button.customs-btn:hover,
.product_variant.quantity .button.customs-btn:focus,
.product_variant.quantity button.customs-btn:hover,
.product_variant.quantity button.customs-btn:focus,
button.button.customs-btn[onclick^="addToCart"]:hover,
button.button.customs-btn[onclick^="addToCart"]:focus,
button.button.customs-btn[onclick^="addAndGoToCart"]:hover,
button.button.customs-btn[onclick^="addAndGoToCart"]:focus {
    background: var(--hito-red, #e6002d) !important;
    border-color: var(--hito-red, #e6002d) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(230, 0, 45, .2) !important;
    transform: translateY(-1px) !important;
}

.product_variant.quantity .button.customs-btn:active,
.product_variant.quantity button.customs-btn:active,
button.button.customs-btn[onclick^="addToCart"]:active,
button.button.customs-btn[onclick^="addAndGoToCart"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 5px 14px rgba(230, 0, 45, .14) !important;
}

@media (max-width: 575px) {
    .product_variant.quantity {
        align-items: stretch !important;
        gap: 9px !important;
    }

    .product_variant.quantity label {
        width: 100% !important;
    }

    .product_variant.quantity input[type="number"],
    .product_variant.quantity #numberProducts,
    .product_variant.quantity .button.customs-btn,
    .product_variant.quantity button.customs-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================
   v29 - Product detail related products text color sync
   Đồng bộ màu chữ sản phẩm liên quan với card trang chủ
   ========================================================== */
.related_products .product_content h4,
.related_products .product_content h4 a,
.related_products .product_content .product_name,
.related_products .product_content .product_name a,
.related_products .product-title h6,
.related_products .product-title h6 a,
.related_products .product-title a,
.p_section1.related_product .product_content h4,
.p_section1.related_product .product_content h4 a,
.p_section1.related_product .product_content .product_name,
.p_section1.related_product .product_content .product_name a,
.p_section1.related_product .product-title h6,
.p_section1.related_product .product-title h6 a,
.p_section1.related_product .product-title a,
.related_product .product_content h4,
.related_product .product_content h4 a,
.related_product .product-title h6,
.related_product .product-title h6 a {
    color: var(--hito-text-main, #003b8e) !important;
    font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.related_products .product_content h4 a:hover,
.related_products .product_content .product_name a:hover,
.related_products .product-title h6 a:hover,
.related_products .product-title a:hover,
.p_section1.related_product .product_content h4 a:hover,
.p_section1.related_product .product_content .product_name a:hover,
.p_section1.related_product .product-title h6 a:hover,
.p_section1.related_product .product-title a:hover,
.related_product .product_content h4 a:hover,
.related_product .product-title h6 a:hover {
    color: var(--hito-red, #e6002d) !important;
}

.related_products .price_box,
.related_products .price_box span,
.related_products .price_box .current_price,
.related_products .product-price,
.p_section1.related_product .price_box,
.p_section1.related_product .price_box span,
.p_section1.related_product .price_box .current_price,
.p_section1.related_product .product-price,
.related_product .price_box,
.related_product .price_box span,
.related_product .price_box .current_price,
.related_product .product-price {
    color: var(--hito-red, #e6002d) !important;
    font-weight: 800 !important;
}

.related_products .product_content p a,
.p_section1.related_product .product_content p a,
.related_product .product_content p a {
    color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    font-weight: 700 !important;
}

.related_products .product_content p a:hover,
.p_section1.related_product .product_content p a:hover,
.related_product .product_content p a:hover {
    color: var(--hito-red, #e6002d) !important;
}

/* ==========================================================
   v30 - Related products color softened to match home cards
   - Giữ màu như card trang chủ, giảm độ đậm chữ
   - Liên hệ trở lại màu xanh, chỉ giá tiền mới màu đỏ
   ========================================================== */
.related_products .product_content h4,
.related_products .product_content h4 a,
.related_products .product_content .product_name,
.related_products .product_content .product_name a,
.related_products .product-title h6,
.related_products .product-title h6 a,
.related_products .product-title a,
.p_section1.related_product .product_content h4,
.p_section1.related_product .product_content h4 a,
.p_section1.related_product .product_content .product_name,
.p_section1.related_product .product_content .product_name a,
.p_section1.related_product .product-title h6,
.p_section1.related_product .product-title h6 a,
.p_section1.related_product .product-title a,
.related_product .product_content h4,
.related_product .product_content h4 a,
.related_product .product-title h6,
.related_product .product-title h6 a {
    color: var(--hito-text-main, #003b8e) !important;
    font-family: 'Be Vietnam Pro', Arial, Helvetica, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.related_products .product_content h4 a:hover,
.related_products .product_content .product_name a:hover,
.related_products .product-title h6 a:hover,
.related_products .product-title a:hover,
.p_section1.related_product .product_content h4 a:hover,
.p_section1.related_product .product_content .product_name a:hover,
.p_section1.related_product .product-title h6 a:hover,
.p_section1.related_product .product-title a:hover,
.related_product .product_content h4 a:hover,
.related_product .product-title h6 a:hover {
    color: var(--hito-red, #e6002d) !important;
}

/* Mặc định phần giá/liên hệ ở sản phẩm liên quan dùng màu xanh như trang chủ */
.related_products .price_box,
.related_products .price_box span,
.related_products .product-price,
.p_section1.related_product .price_box,
.p_section1.related_product .price_box span,
.p_section1.related_product .product-price,
.related_product .price_box,
.related_product .price_box span,
.related_product .product-price,
.related_products .product_content p,
.related_products .product_content p a,
.p_section1.related_product .product_content p,
.p_section1.related_product .product_content p a,
.related_product .product_content p,
.related_product .product_content p a {
    color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    font-weight: 600 !important;
}

/* Chỉ giá tiền thật mới giữ màu đỏ */
.related_products .price_box .current_price,
.related_products .product-price .current_price,
.p_section1.related_product .price_box .current_price,
.p_section1.related_product .product-price .current_price,
.related_product .price_box .current_price,
.related_product .product-price .current_price,
.related_products .price_box .price,
.p_section1.related_product .price_box .price,
.related_product .price_box .price {
    color: var(--hito-red, #e6002d) !important;
    font-weight: 700 !important;
}

.related_products .product_content p a:hover,
.p_section1.related_product .product_content p a:hover,
.related_product .product_content p a:hover {
    color: var(--hito-red, #e6002d) !important;
}

/* ==========================================================
   v31 - Price/contact color consistency
   Đồng bộ màu giá, VNĐ và Liên hệ như card trang chủ
   ========================================================== */
.product-price .current_price:not(.contact),
.price_box .current_price:not(.contact),
.related_products .product-price .current_price:not(.contact),
.related_products .price_box .current_price:not(.contact),
.p_section1.related_product .product-price .current_price:not(.contact),
.p_section1.related_product .price_box .current_price:not(.contact),
.related_product .product-price .current_price:not(.contact),
.related_product .price_box .current_price:not(.contact) {
    color: var(--hito-red, #e6002d) !important;
    font-weight: 700 !important;
}

.product-price .current_price .currency,
.price_box .current_price .currency,
.related_products .product-price .current_price .currency,
.related_products .price_box .current_price .currency,
.p_section1.related_product .product-price .current_price .currency,
.p_section1.related_product .price_box .current_price .currency,
.related_product .product-price .current_price .currency,
.related_product .price_box .current_price .currency {
    color: var(--hito-text-main, #333333) !important;
    font-weight: 600 !important;
}

.product-price .current_price.contact,
.price_box .current_price.contact,
.related_products .product-price .current_price.contact,
.related_products .price_box .current_price.contact,
.p_section1.related_product .product-price .current_price.contact,
.p_section1.related_product .price_box .current_price.contact,
.related_product .product-price .current_price.contact,
.related_product .price_box .current_price.contact,
.related_products .product_content p a,
.p_section1.related_product .product_content p a,
.related_product .product_content p a {
    color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    font-weight: 600 !important;
}

.product-price .current_price.contact:hover,
.price_box .current_price.contact:hover,
.related_products .product_content p a:hover,
.p_section1.related_product .product_content p a:hover,
.related_product .product_content p a:hover {
    color: var(--hito-red, #e6002d) !important;
}

/* ==========================================================
   v32 - Price box exact color control
   Cấu trúc hỗ trợ:
   <span class="current_price">300.000 <span class="currency">VNĐ</span></span>
   <span class="current_price contact">Liên hệ</span>
   ========================================================== */
.product-price .current_price,
.price_box .current_price,
.related_products .product-price .current_price,
.related_products .price_box .current_price,
.p_section1.related_product .product-price .current_price,
.p_section1.related_product .price_box .current_price,
.related_product .product-price .current_price,
.related_product .price_box .current_price {
    font-family: var(--hito-font, 'Be Vietnam Pro', Arial, Helvetica, sans-serif) !important;
    line-height: 1.35 !important;
}

/* Có giá thật: chỉ số tiền màu đỏ */
.product-price .current_price:not(.contact),
.price_box .current_price:not(.contact),
.related_products .product-price .current_price:not(.contact),
.related_products .price_box .current_price:not(.contact),
.p_section1.related_product .product-price .current_price:not(.contact),
.p_section1.related_product .price_box .current_price:not(.contact),
.related_product .product-price .current_price:not(.contact),
.related_product .price_box .current_price:not(.contact) {
    color: var(--hito-red, #e6002d) !important;
    font-weight: 700 !important;
}

/* Đơn vị VNĐ: không xanh, dùng màu chữ thường cho dịu như trang chủ */
.product-price .current_price:not(.contact) .currency,
.price_box .current_price:not(.contact) .currency,
.related_products .product-price .current_price:not(.contact) .currency,
.related_products .price_box .current_price:not(.contact) .currency,
.p_section1.related_product .product-price .current_price:not(.contact) .currency,
.p_section1.related_product .price_box .current_price:not(.contact) .currency,
.related_product .product-price .current_price:not(.contact) .currency,
.related_product .price_box .current_price:not(.contact) .currency {
    color: var(--hito-text-body, #333333) !important;
    font-weight: 600 !important;
}

/* Không có giá: Liên hệ luôn màu xanh như card trang chủ */
.product-price .current_price.contact,
.price_box .current_price.contact,
.related_products .product-price .current_price.contact,
.related_products .price_box .current_price.contact,
.p_section1.related_product .product-price .current_price.contact,
.p_section1.related_product .price_box .current_price.contact,
.related_product .product-price .current_price.contact,
.related_product .price_box .current_price.contact {
    color: var(--hito-primary, var(--primary-color, #014d7f)) !important;
    font-weight: 600 !important;
}

.product-price .current_price.contact:hover,
.price_box .current_price.contact:hover,
.related_products .product-price .current_price.contact:hover,
.related_products .price_box .current_price.contact:hover,
.p_section1.related_product .product-price .current_price.contact:hover,
.p_section1.related_product .price_box .current_price.contact:hover,
.related_product .product-price .current_price.contact:hover,
.related_product .price_box .current_price.contact:hover {
    color: var(--hito-red, #e6002d) !important;
}