/* ==========================================================================
   GIAO DIỆN HEADER JOB HMO (THEME THOITRANG05 - HOANG MINH OFFICE)
   Tuân thủ quy tắc theme Web4s: Bootstrap 4, tiền tố hmo-, max 3 đốt, layout flex
   ========================================================================== */
   
/* 1. Cấu hình bài viết */
/* CSS cau hoi thuong gap*/
.faq-Z details{margin: 1.2rem 0;background: #f8f9fa;border-radius: 14px;border: 1px solid #e9ecef;overflow: hidden;}
.faq-Z summary {padding: 16px 22px;font-weight: 600;cursor: pointer;background: #fff;list-style: none;position: relative;color: #1a5f7a;font-size: 1.02rem;}
/* Tối ưu ẩn icon mặc định trên trình duyệt WebKit/Safari */
.faq-Z summary::-webkit-details-marker {display: none;}
.faq-Z summary span{position: absolute;right: 20px;}
.faq-Z details > div{padding: 16px 22px;border-top: 1px solid #e9ecef;line-height: 1.8;}
/* CSS bang gia*/
.article-detail .title-table{background:#4aab3d;color:#fff;font-weight:600;text-align:center;}
.article-detail .title-table-2{background:#072032;color:#fff;font-weight:600;}
.article-detail .title-table-2 h4{color:#fff !important;}
/* Container tổng */
.article-detail .product-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;padding: 20px 0;}
/* Thẻ bao ngoài mỗi sản phẩm */
.article-detail .product-item{display: flex;flex-direction: column;background: #fff;border: 1px solid #eee;border-radius: 8px;padding: 15px;
transition: transform 0.3s, box-shadow 0.3s;height: 100%;
/* Đảm bảo các card cao bằng nhau trong 1 hàng */}
/* Tính năng di chuột vào phần tử chỉ cần áp dụng cho màn tablet hoặc PC, Mobile thì k cần */
@media(min-width:1024px){.article-detail .product-item:hover{transform:translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);}}
.main-title {
   line-height: 40px;
   margin-bottom: 30px;
   color: #2c378f;
   font-size: 35px;
   font-weight: 700;
   margin-top: 0;
   text-transform: uppercase;
}
.text-center {
    text-align: center;
}
.hmo-quote-modal .modal-content {
border-radius: 14px;
}

.hoteline-head {
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
}
/* 1. Cấu hình độ rộng container theo kích thước màn hình */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1390px;
}
}
@media (min-width: 1500px) {
.container {
max-width: 1400px;
}
}
@media (min-width: 1600px) {
.container {
max-width: 1600px;
}
}
/* Language Switcher Styles */
.lang-toggle-btn {
gap: 0.8rem;
font-size: 1.4rem;
font-weight: 510;
letter-spacing: 0.05em;
text-transform: uppercase;
color: white;

}
.hmo-hero-row{margin:0 !important}
.current-lang-flag {
width: 2.2rem;
height: 1.5rem;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lang-chevron {
font-size: 1.1rem;
transition: transform 0.3s ease;
}

.header-lang-item.open .lang-chevron {
transform: rotate(180deg);
}

.header-lang-dropdown-box {
position: absolute;
top: calc(100% - 0.5rem);
right: 0;
width: 16rem;
background: #005aadde;
border: 1px solid rgba(207, 162, 97, 0.25);
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(1rem);
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}

.header-lang-item.open .header-lang-dropdown-box,
.header-lang-item:hover .header-lang-dropdown-box {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}

.header-lang-dropdown-box .language-switch__list {
display: flex;
flex-direction: column;
}

.header-lang-dropdown-box .language-switch__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-lang-dropdown-box .language-switch__item:last-child {
border-bottom: none;
}

.header-lang-dropdown-box .language-switch__link {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.2rem 1.6rem;
color: #FFFFFF !important;
font-family: 'SF Pro', sans-serif;
font-size: 1.4rem;
transition: all 0.3s ease;
text-decoration: none !important;
}

.header-lang-dropdown-box .language-switch__link:hover,
.header-lang-dropdown-box .language-switch__item.is-active .language-switch__link {
background-color: rgb(255 249 241 / 12%);
color: #ffae38 !important;
}

.header-lang-dropdown-box .language-switch__flag {
width: 2.2rem;
height: 1.5rem;
object-fit: cover;
border-radius: 2px;
}

.header-lang-dropdown-box .language-switch__name {
font-weight: 500;
}


/* 2. Tầng 1: Topbar */
.hmo-topbar-row {
background-color: #D8D6D7;
line-height: 36px;
}
.hmo-topbar {
width: 100%;
}

.hmo-topbar-wrap {
min-height: 35px;
 
}

.hmo-topbar-nav {
gap: 0;
}

.hmo-topbar-item {
position: relative;
display: inline-flex;
align-items: center;
}

.hmo-topbar-item+.hmo-topbar-item::before {
content: "|";
display: inline-block;
color: rgba(255, 255, 255, 0.4);
margin: 0 10px;
font-size: 11px;
line-height: 1;
}

.hmo-topbar-link {
color: #212529;
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-topbar-link i {
font-size: 13px;
}

.hmo-topbar-link:hover {
color:#044BB5;
font-weight:bold;
text-decoration: none;
}
.hmo-topbar-right {
margin-left: auto;
}

.hmo-topbar-mail {
color: #ffffff;
font-size: 17px;
width: 40px;
height: 30px;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s ease;
}

.hmo-topbar-mail:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.15);
text-decoration: none;
}

/* 3. Tầng 2: Main Header */
.hmo-header-row {
background-color: #ffffff;
}

.hmo-header {
width: 100%;
}

.hmo-header-left {
flex-shrink: 0;
}
/* pc */
.hmo-header-logo img {
object-fit: contain;
z-index: 999;
width:auto;
height: 50px;
}

.hmo-header-search {
max-width: 500px;
}

.hmo-header-form {
display: flex;
align-items: center;
}

.hmo-header-input {
height: 42px;
border: 1px solid var(--hmo-border, #e2e8f0);
border-radius: 4px;
padding-left: 15px;
padding-right: 45px;
font-size: 13.5px;
color: var(--hmo-text-dark, #2d3748);
background-color: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hmo-header-input:focus {
border-color: var(--hmo-accent, #ff9f00);
box-shadow: 0 0 0 3px rgba(255, 159, 0, 0.15);
background-color: #ffffff;
}

.hmo-header-searchbtn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--hmo-accent, #ff9f00);
font-size: 18px;
padding: 6px 12px;
cursor: pointer;
line-height: 1;
}

.hmo-header-searchbtn:hover {
color: var(--hmo-primary-dark, #004680);
}

.hmo-header-actions {
flex-shrink: 0;
}
.hmo-header-hotline {
    background-color: #F91E26;
    height: 42px;
    /* line-height: 42px; */
    color: #ffffff;
    padding: 0px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 650;
    margin-right: 18px;
    transition: all 0.2s ease;
}
.hmo-header-hotline i {
font-size: 16px;
}

.hmo-header-hotline:hover {
background-color: var(--hmo-accent-hover, #e88900);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(255, 159, 0, 0.35);
}

.hmo-header-action {
color: var(--hmo-text-dark, #2d3748);
margin-left: 16px;
cursor: pointer;
transition: all 0.2s ease;
}

.hmo-header-actionicon {
width: 38px;
height: 38px;
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
border-radius: 50%;
font-size: 16px;
transition: all 0.2s ease;
}

.hmo-header-badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 18px;
height: 18px;
line-height: 18px;
padding: 0 4px;
background-color: #222222;
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-align: center;
border-radius: 10px;
border: 2px solid #ffffff;
}

.hmo-header-actiontext {
line-height: initial;
font-size: 12.5px;
font-weight: 500;
margin-top: 4px;
white-space: nowrap;
transition: color 0.2s ease;
}

.hmo-header-action:hover .hmo-header-actionicon {
transform: scale(1.08);
background-color: var(--hmo-primary-dark, #004680);
}

.hmo-header-action:hover .hmo-header-actiontext {
color: var(--hmo-primary, #005aad);
}

/* 4. Tầng 3: Menu Danh Mục (Navigation Bar) */
.hmo-nav-row {
position: relative;
background-color: var(--hmo-primary);
box-shadow: 0 3px 6px rgb(0 0 0 / .1607843137);
border: none !important;
z-index: 999;
}

.hmo-nav {
width: 100%;
}

.hmo-nav-list {
width: 100%;
}

.hmo-nav-item {
position: relative;
}

.hmo-nav-link {
padding: 12px 14px;
font-size: 14.5px;
font-weight: 700;
color: var(--hmo-text-dark, #2d3748);
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.3px;
transition: all 0.2s ease;
}

.hmo-nav-link i {
font-size: 11px;
color: var(--hmo-text-muted, #718096);
transition: transform 0.2s ease, color 0.2s ease;
}

.hmo-nav-item:hover>.hmo-nav-link {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.hmo-nav-item:hover>.hmo-nav-link i {
color: var(--hmo-primary, #005aad);
transform: rotate(180deg);
}

/* Dropdown menu đa cấp */
.hmo-nav-sub {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
border-top: 3px solid var(--hmo-primary, #005aad);
border-radius: 0 0 4px 4px;
padding: 6px 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
}

.hmo-nav-item:hover>.hmo-nav-sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.hmo-nav-subitem {
display: block;
}

.hmo-nav-sublink {
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
color: var(--hmo-text-dark, #2d3748);
text-decoration: none;
border-bottom: 1px solid #f1f5f9;
transition: all 0.15s ease;
}

.hmo-nav-sublink:hover {
background-color: #eef6ff;
color: var(--hmo-primary, #005aad);
padding-left: 22px;
text-decoration: none;
}

/* 5. Giao diện các Khối Trang chủ Job HMO */

/* --- 5.1 Hero Banner Slider --- */
.hmo-hero {
position: relative;
width: 100%;
overflow: hidden;
}

.hmo-hero-slider {
width: 100%;
position: relative;
}

.hmo-hero-slide {
width: 100%;
}

.hmo-hero-link {
display: block;
width: 100%;
}

.hmo-hero-link img {
width: 100%;
height: auto;
aspect-ratio: 1024 / 350;
object-fit: cover;
display: block;
}

.hmo-hero-pagination {
position: absolute;
bottom: 12px !important;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}

.hmo-hero-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #ffffff;
opacity: 0.6;
margin: 0 4px;
transition: all 0.3s ease;
border-radius: 50%;
display: inline-block;
}

.hmo-hero-pagination .swiper-pagination-bullet-active {
background: #005aad;
opacity: 1;
width: 10px;
height: 10px;
}

/* --- 5.2 Thanh tiện ích chính sách --- */
.hmo-policy-row {
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
}

.hmo-policy {
width: 100%;
padding: 16px 0;
}

.hmo-policy-list {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.hmo-policy-col {
position: relative;
display: flex;
align-items: center;
}

.hmo-policy-col+.hmo-policy-col::before {
content: "";
position: absolute;
left: 0;
top: 15%;
height: 70%;
width: 1px;
background-color: rgba(255, 255, 255, 0.25);
}

.hmo-policy-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 15px;
text-align: center;
flex-direction: column;
}

.hmo-policy-icon {
font-size: 32px;
color: #ffffff;
line-height: 1;
margin-bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.hmo-policy-content {
display: flex;
flex-direction: column;
align-items: center;
}

.hmo-policy-title {
font-size: 14.5px;
font-weight: 700;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 0.3px;
line-height: 1.3;
}

.hmo-policy-title a,
.hmo-policy-title span {
color: #ffffff;
text-decoration: none;
}

.hmo-policy-desc {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.85);
margin-top: 3px;
line-height: 1.3;
}

/* Product-category mega menu, only for menu/view.tpl. */
.hmo-category-menu .menu-section {
position: relative;
}

.hmo-category-menu .menu-section>ul>.hmo-category-menu-item {
position: static;
}

.hmo-category-menu .menu-section>ul>li>.hmo-category-mega {
left: 0;
right: 0;
width: 100%;
padding: 28px;
background: #ffffff;
color: #333333;
box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
border-top: 3px solid var(--hmo-primary, #005aad);
max-height: min(720px, 80vh);
overflow-y: auto;
overscroll-behavior: contain;
}

.hmo-category-menu .hmo-category-mega-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}

.hmo-category-menu .hmo-category-mega-layout.has-banner {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.hmo-category-menu .hmo-category-mega-content {
min-width: 0;
}

.hmo-category-menu .hmo-category-mega-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 22px 18px;
}

.hmo-category-menu .hmo-category-mega-group {
grid-column: 1 / -1;
min-width: 0;
}

.hmo-category-menu .hmo-category-mega-group+.hmo-category-mega-group {
margin-top: 12px;
}

.hmo-category-menu .hmo-category-mega-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
border-bottom: 2px solid rgba(0, 0, 0, .08);
margin-bottom: 22px;
padding-bottom: 9px;
}

.hmo-category-menu .hmo-category-mega h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
color: var(--hmo-primary, #005aad);
overflow-wrap: anywhere;
}

.hmo-category-menu .menu-section .hmo-category-mega a {
height: auto;
line-height: 1.5;
padding: 0 !important;
color: inherit;
text-transform: none;
transition: color .25s ease;

}

.hmo-category-menu .menu-section .hmo-category-mega a:hover {
color: var(--hmo-primary, #005aad); 
}

.hmo-category-menu .hmo-category-mega a:focus-visible {
outline: 2px solid var(--hmo-highlight, #ffbf00);
outline-offset: 3px;
}

.hmo-category-menu .hmo-category-mega-more {
flex-shrink: 0;
font-size: 12px;
text-transform: uppercase !important;
}

.hmo-category-menu .hmo-category-mega-card {
min-width: 0;
text-align: center;
}

.hmo-category-menu .hmo-category-mega-card>a {
display: block;
}

.hmo-category-menu .hmo-category-mega-image {
display: flex;
align-items: center;
justify-content: center;
height: 96px;
margin-bottom: 12px;
}

.hmo-category-menu .hmo-category-mega-image img {
max-width: 100%;
width: 100%;
height: 100%;
object-fit: contain;
}

.hmo-category-menu .hmo-category-mega-name {
display: block;
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
overflow-wrap: anywhere;
color: #333333;
}

.hmo-category-menu .hmo-category-mega-banner {
min-width: 0;
text-align: center;
}

.hmo-category-menu .hmo-category-mega-banner img {
display: block;
width: 100%;
height: auto;
max-height: 250px;
object-fit: contain;
margin-bottom: 12px;
}

.hmo-category-menu .hmo-category-mega-banner h3 {
font-size: 16px;
margin-bottom: 6px;
}

.hmo-category-menu .hmo-category-mega-banner p {
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
margin: 0;
}

.hmo-category-menu .menu-section .hmo-category-mega-links {
margin-top: 10px;
text-align: left;
}

.hmo-category-menu .menu-section .hmo-category-mega-links li {
border: 0;
margin: 0 0 6px;
}

.hmo-category-menu .menu-section .hmo-category-mega-links a {
font-size: 13px;
overflow-wrap: anywhere;
}

.hmo-category-menu .menu-section .hmo-category-mega-links .hmo-category-mega-links {
padding-left: 12px;
}

@media (min-width: 992px) {
.menu-section ul{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
font-size:15px;
}
.hmo-menu-fixed {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1030;
background: var(--hmo-primary, #005aad);
}

.hmo-category-menu .menu-section {
position: relative;
width: 100%;
height: auto;
overflow: visible;
transform: none;
box-shadow: none;
background: transparent;
z-index: 100;
}

.hmo-category-menu .menu-top,
.hmo-category-menu .btn-menu-mobile,
.hmo-category-menu .menu-section .grower {
display: none;
}

.hmo-category-menu .menu-section>ul>li {
display: inline-block;
border: 0;
margin: 0;
}

.hmo-category-menu .menu-section>ul>li>a {
display: inline-block !important;
height:52px;
line-height:52px;
padding: 0 !important;
color: #ffffff;
transition: color .25s ease;

}

.hmo-category-menu .menu-section>ul>li:hover>a,
.hmo-category-menu .menu-section>ul>li:focus-within>a {
color: var(--hmo-highlight, #ffbf00);
}

.hmo-category-menu .menu-section>ul>li>.hmo-category-mega {
display: block !important;
position: absolute;
top: 100%;
left: var(--hmo-mega-left, 0px);
right: auto;
width: var(--hmo-mega-width, 100%);
max-width: none;
box-sizing: border-box;
max-height: var(--hmo-mega-height, 80vh);
opacity: 0;
visibility: hidden;
filter: none;
transform: translateY(-8px);
transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
pointer-events: none;
}

.hmo-category-menu .hmo-category-mega-layout {
width: 100%;
max-width: 1500px;
margin-inline: auto;
}

.hmo-category-menu .menu-section>ul>li:hover>.hmo-category-mega,
.hmo-category-menu .menu-section>ul>li:focus-within>.hmo-category-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
}

@media (max-width: 991.98px) {
.hmo-category-menu .menu-section {
position: fixed;
max-width: calc(100vw - 30px);
}

.hmo-category-menu .menu-section>ul>.hmo-category-menu-item {
position: relative;
}

.hmo-category-menu .menu-section>ul>li>.hmo-category-mega {
position: static;
display: none;
width: 100%;
padding: 18px 14px;
max-height: none;
overflow: visible;
opacity: 1;
visibility: visible;
filter: none;
}

.hmo-category-menu .hmo-category-mega-layout.has-banner {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}

.hmo-category-menu .hmo-category-mega-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 12px;
}

.hmo-category-menu .hmo-category-mega-heading {
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}

.hmo-category-menu .hmo-category-mega h3 {
font-size: 15px;
}

.hmo-category-menu .hmo-category-mega-name {
font-size: 12px;
}

.hmo-category-menu .hmo-category-mega-image {
height: 76px;
}

.hmo-category-menu .hmo-category-menu-toggle {
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}
}

/* --- 5.3 Khối sản phẩm Danh mục (view_hmo_category) --- */
.hmo-product-row {
margin-bottom: 45px !important;
}

.hmo-prodblock {
width: 100%;
}

.hmo-prodblock-header {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 2px solid #eaebec;
padding-bottom: 10px;
margin-bottom: 20px;
gap: 14px 24px;
}

.hmo-prodblock-titlewrap {
position: relative;
flex: 0 0 auto;
max-width: 100%;
min-width: 0;
}

.hmo-prodblock-bar {
display: inline-block;
flex-shrink: 0;
width: 4px;
height: 24px;
background-color: var(--hmo-primary, #005aad);
margin-right: 10px;
border-radius: 2px;
}

.hmo-prodblock-icon {
flex-shrink: 0;
font-size: 22px;
color: var(--hmo-primary, #005aad);
}

.hmo-prodblock-title {
min-width: 0;
line-height: 1.35;
overflow-wrap: anywhere;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.hmo-prodblock-title a,
.hmo-prodblock-title span {
color: #1a202c;
text-decoration: none;
}

.hmo-prodblock-title a:hover {
color: var(--hmo-primary, #005aad);
}

.hmo-prodblock-tabs {
flex: 1 1 520px;
min-width: 0;
gap: 8px;
}

.hmo-prodblock-tabitem {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
}

.hmo-prodblock-tab {
display: block;
padding: 6px 11px;
border: 1px solid #e5e9ed;
border-radius: 4px;
background: #f8f9fa;
font-size: 14.5px;
font-weight: 500;
color: #4a5568;
text-decoration: none;
line-height: 1.45;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
white-space: normal;
overflow-wrap: anywhere;
}

.hmo-prodblock-tab:hover {
color: var(--hmo-primary, #005aad);
border-color: var(--hmo-primary, #005aad);
background: #fff;
text-decoration: none;
}

/* Lưới sản phẩm 5 cột Flexbox */
.hmo-prodgrid {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}

.hmo-prodgrid-col {
flex: 0 0 20%;
max-width: 20%;
padding: 15px;
box-sizing: border-box;
}

.hmo-prodcard {
position: relative;
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 12px 10px 14px;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.hmo-prodcard:hover {
border-color: #cbd5e0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hmo-prodcard-top {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
}

.hmo-prodcard-badge {
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
line-height: 1.2;
}

.hmo-prodcard-wish {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: #ff9800;
color: #ffffff;
font-size: 11px;
border-radius: 3px;
text-decoration: none;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.hmo-prodcard-wish:hover {
background-color: #f57c00;
color: #ffffff;
transform: scale(1.1);
}

.hmo-prodcard-thumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
/*margin-top: 10px;*/
overflow: hidden;
}

.hmo-prodcard-thumb a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.hmo-prodcard-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}

.hmo-prodcard-thumb:hover img {
transform: scale(1.05);
}

.hmo-prodcard-body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
text-align: center;
}

.hmo-prodcard-name {
font-size: 15px;
font-weight: 600;
line-height: 1.4;
height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 8px;
}

.hmo-prodcard-name a {
color: #1a202c;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-prodcard-name a:hover {
color: var(--hmo-primary, #005aad);
}

.hmo-prodcard-pricing {
margin-bottom: 10px;
}

.hmo-prodcard-oldprice {
font-size: 13px;
color: #a0aec0;
text-decoration: line-through;
min-height: 18px;
line-height: 1.2;
}

.hmo-prodcard-oldprice-empty {
text-decoration: none !important;
visibility: hidden;
}

.hmo-prodcard-price {
font-size: 16.5px;
font-weight: 700;
color: #ee4d2d;
line-height: 1.2;
margin-top: 2px;
}

.hmo-prodcard-action {
margin-top: auto;
}

.hmo-prodcard-buybtn {
width: 100%;
}

.hmo-prodcard-buybtn:hover {
background-color: var(--hmo-primary-dark, #004680);
color: #ffffff;
text-decoration: none;
}

/* Tooltip chi tiết sản phẩm kiểu Hoàng Minh Office - Chuyển sang cơ chế động theo chuột */
.hmo-prodcard-tooltip {
display: none !important;
}

/* Tooltip toàn cục nổi di chuyển linh hoạt theo con trỏ chuột */
#hmo-global-tooltip, .hmo-global-tooltip {
position: fixed;
top: 0;
left: 0;
width: 500px;
max-width: calc(100vw - 25px);
background: #ffffff !important;
border: 1.5px solid var(--hmo-primary, #005aad);
border-radius: 8px;
box-shadow: 0 12px 36px rgba(5, 83, 172, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
z-index: 999999;
pointer-events: auto;
display: none;
overflow: hidden;
text-align: left;
transition: opacity 0.12s ease;
will-change: left, top;
}

/* Header tooltip */
.hmo-prodcard-tthead {
background-color: #f5f5f5;
padding: 10px;
border-bottom: 1px solid #ebebeb;
}

.hmo-prodcard-ttname {
color: #111111;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
flex-grow: 1;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-right: 10px;
transition: color 0.2s ease;
}

.hmo-prodcard-ttname:hover {
color: #005aad;
text-decoration: none;
}

.hmo-prodcard-ttbrand {
font-size: 11.5px;
font-weight:bold;
color: #005aad;
background: #e8f0fe;
padding: 3px 7px;
border-radius: 4px;
white-space: nowrap;
}

/* Thân nội dung tooltip */
.hmo-prodcard-ttbody {
background-color: #ffffff;
padding: 12px 14px;
max-height: min(400px, calc(82vh - 90px));
overflow-y: auto;
overscroll-behavior: contain;
}

.hmo-prodcard-ttbody::-webkit-scrollbar {
width: 5px;
}

.hmo-prodcard-ttbody::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}

.hmo-prodcard-ttbody::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}

.hmo-prodcard-ttbody::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* Giá trong tooltip */
.hmo-prodcard-ttprice {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}

.hmo-prodcard-ttold {
font-size: 14px;
color: #82869e;
text-decoration: line-through;
font-weight: 500;
}

.hmo-prodcard-ttbadge {
display: inline-block;
background: #eef6ff;
color: #e53e3e;
border: 1px solid #fed7d7;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
margin-left: 8px;
}

.hmo-prodcard-ttmainprice {
font-size: 22px;
font-weight:600;
color: var(--hmo-primary, #005aad);
line-height: 1.2;
}

/* Thông số kỹ thuật / mô tả trong tooltip */
.hmo-prodcard-ttdesc {
font-size: 13px;
color: #2d3748;
line-height: 1.5;
margin-bottom: 12px;
}
  

.hmo-prodcard-ttdesc h2,
.hmo-prodcard-ttdesc h3 {
font-size: 13.5px;
font-weight: 700;
color: #1a202c;
margin-top: 8px;
margin-bottom: 6px;
}

.hmo-prodcard-ttdesc table {
width: 100% !important;
border-collapse: collapse !important;
margin: 6px 0 10px !important;
}

.hmo-prodcard-ttdesc table tr:nth-child(odd) {
background-color: #f8f9fa;
}

.hmo-prodcard-ttdesc table tr:nth-child(even) {
background-color: #ffffff;
}

.hmo-prodcard-ttdesc table th,
.hmo-prodcard-ttdesc table td {
padding: 5px 8px !important;
font-size: 13px !important;
line-height: 1.4 !important;
border: 1px solid #edf2f7 !important;
vertical-align: top;
}

.hmo-prodcard-ttdesc table th {
font-weight: 700;
color: #2d3748;
width: 40%;
}

.hmo-prodcard-ttdesc ul {
list-style: none;
padding-left: 0;
margin-bottom: 8px;
}

.hmo-prodcard-ttdesc ul li {
padding: 5px 8px;
font-size: 12px;
line-height: 1.4;
}

.hmo-prodcard-ttdesc ul li:nth-child(odd) {
background-color: #f8f9fa;
}

.hmo-prodcard-ttdesc ul li:nth-child(even) {
background-color: #ffffff;
}

/* Khối Ưu đãi đặc biệt */
.hmo-prodcard-ttoffer {
border: 1px solid #e2e8f0;
border-radius: 6px;
background-color: #f8fafc;
overflow: hidden;
margin-top: 10px;
}

.hmo-prodcard-ttoffer-title {
background-color: #f1f5f9;
color: #005aad;
font-size: 13px;
font-weight: 700;
padding: 6px 10px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
}

.hmo-prodcard-ttoffer-title i {
color: #005aad;
}

.hmo-prodcard-ttoffer-body {
padding: 8px 10px;
font-size: 13px;
color: #4a5568;
line-height: 1.5;
}

.hmo-prodcard-ttoffer-body p {
font-weight: bold;
}

.hmo-prodcard-ttdot {
color: #005aad;
font-weight: 700;
}

/* Nút Xem Thêm */
.hmo-prodblock-more {
margin-top: 24px;
}

.hmo-prodblock-morebtn, .hmo-prodcard-buybtn {
    padding-inline: var(--x);
    line-height: var(--y);
    --x: 35px;
    --y: 40px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight:600;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    background-color: var(--hmo-primary);
    position: relative;
}
.hmo-prodblock-morebtn span,.hmo-prodcard-buybtn span{z-index:99}
.hmo-prodblock-morebtn i {
transition: transform 0.2s ease;
}
.hmo-prodblock-more a:hover,.hmo-prodcard-action:hover{color:#fff;}
.hmo-prodblock-morebtn::before,.hmo-prodcard-buybtn::before {
 position: absolute;
    content: "";
    top: 50%;
    left: 0px;
    height: 105%;
    width: 100%;
    transform: translateY(-50%) scaleY(0);
    background-color:#072032;
    color: #ffffff;
    -webkit-transition: all 0.25s ease 0s;
    -khtml-transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -ms-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}

.hmo-prodblock-morebtn:hover::before,.hmo-prodcard-buybtn:hover::before{
transform:translateY(-50%) scaleY(1);
}

.hmo-prodblock-morebtn:hover i {
transform: translateX(4px);
}

/* --- 5.4 Chân Trang (Footer HMO) --- */
.hmo-footer {
background-color:#072032;
color: #ffffff;
padding-top: 50px;
padding-bottom: 30px;
}

.hmo-footer-bottom {
background-color:#0c1931;
}

/* Cột Thông tin công ty */
.hmo-footcompany {
color: #ffffff;
}

.hmo-footcompany-logo {
max-height:50px;
width: auto;
object-fit: contain;
}

.hmo-footcompany-name {
font-size: 16px;
font-weight:bold;
text-transform: uppercase;
color: #ffffff;
line-height: 1.45;
margin-bottom: 14px;
}

.hmo-footcompany-line {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}

/* Cột Menu Chân trang */
.hmo-footmenu {
color: #ffffff;
}

.hmo-footmenu-title {
font-size:16px;
font-weight:bold;
text-transform: uppercase;
}

.hmo-footmenu-link {
font-size: 14px;
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
transition: all 0.2s ease;
display: inline-block;
}

.hmo-footmenu-link:hover {
color: #ffffff;
text-decoration: none;
padding-left: 5px;
}

/* Nút Mạng Xã Hội */
.hmo-footer-socials {
gap: 0;
}

.hmo-footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1.5px solid #ffffff;
border-radius: 50%;
color: #ffffff;
font-size: 13.5px;
margin-left: 8px;
text-decoration: none;
transition: all 0.2s ease;
}

.hmo-footer-social:hover {
background-color: #ffffff;
color: var(--hmo-primary, #005aad);
text-decoration: none;
transform: scale(1.1);
}

/* Bản Quyền Chân Trang */
.hmo-footcpr {
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-top: 20px;
padding-bottom: 10px;
}

.hmo-footcpr-line {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.9);
}

.hmo-footcpr-line strong {
color: #ffffff;
font-weight: 700;
}

.hmo-footcpr-tax {
font-size: 12.5px;
color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Khối Tin Tức & Sự Kiện Nổi Bật (.hmo-newsblock)
   ========================================================================== */
.hmo-newsblock-header {
border-bottom: 1px solid #e9ecef;
padding-bottom: 12px;
}

.hmo-newsblock-bar {
display: inline-block;
width: 4px;
height: 22px;
background-color: var(--hmo-primary, #005aad);
margin-right: 10px;
border-radius: 2px;
}

.hmo-newsblock-title {
font-size: 24px;
font-weight: 700;
color: #1a202c;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.2;
}

.hmo-newsblock-more {
font-size: 14.5px;
color: #718096;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-newsblock-more:hover {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.hmo-newscard {
background: #ffffff;
border: 1px solid #d9dee6;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hmo-newscard:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.hmo-newscard-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
}

.hmo-newscard-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}

.hmo-newscard:hover .hmo-newscard-thumb img {
transform: scale(1.06);
}

.hmo-newscard-body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.hmo-newscard-date {
font-size: 13px;
color: #718096;
margin-bottom: 8px;
font-weight: 500;
}

.hmo-newscard-name {
font-size: 16.5px;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
height: 48px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
}

.hmo-newscard-name a {
color: #1a202c;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-newscard-name a:hover {
color: var(--hmo-primary, #005aad);
}

.hmo-newscard-desc {
font-size: 14px;
color: #4a5568;
line-height: 1.6;
height: 68px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 14px;
}

.hmo-newscard-action {
margin-top: auto;
}

.hmo-newscard-more {
font-size: 14px;
font-weight: 600;
color: var(--hmo-primary, #005aad);
text-decoration: none;
display: inline-block;
transition: transform 0.2s ease;
}

.hmo-newscard-more:hover {
color: var(--hmo-primary-dark, #004680);
text-decoration: none;
transform: translateX(3px);
}

/* ==========================================================================
   Khối Item Bài Viết (Job HMO - Chuyên Mục Tin Tức)
   ========================================================================== */
.article-item.hmo-article-card {
display: flex;
flex-direction: column;
height: 100%;
background: transparent;
border: none;
padding: 0;
margin-bottom: 0;
}

.hmo-article-thumb {
position: relative;
display: block;
.header-lang-dropdown-box .language-switch__link: hover, .header width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
}

.hmo-article-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.hmo-article-card:hover .hmo-article-thumb img {
transform: scale(1.05);
}

.hmo-article-body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding-top: 10px;
}

.hmo-article-date {
font-size: 13px;
color: #718096;
margin-bottom: 6px;
font-weight: 400;
line-height: 1.3;
}

.hmo-article-title {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hmo-article-title a {
color: #222222;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-article-title a:hover {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.hmo-article-desc {
font-size: 13.5px;
color: #4a5568;
line-height: 1.55;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ==========================================================================
   Khối Slider Quảng Cáo Trang Sản Phẩm (.hmo-dualslider)
   ========================================================================== */
.hmo-dualslider-row {
margin-bottom: 24px !important;
}

.hmo-dualslider {
position: relative;
width: 100%;
border-radius: 6px;
overflow: hidden;
background-color: #f5f5f5;
}

.hmo-dualslider-swiper {
width: 100%;
position: relative;
}

.hmo-dualslider-slide {
width: 100%;
}

.hmo-dualslider-link {
display: block;
width: 100%;
overflow: hidden;
}
.hmo-dualslider-link img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1200 / 360;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    transition: transform 0.3s ease;
}
.hmo-dualslider-link:hover img {
transform: scale(1.02);
}

.hmo-dualslider-pagination {
position: absolute;
bottom: 8px !important;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}

.hmo-dualslider-pagination .swiper-pagination-bullet {
width: 7px;
height: 7px;
background: #ffffff;
opacity: 0.6;
margin: 0 3px;
border-radius: 50%;
display: inline-block;
transition: all 0.25s ease;
cursor: pointer;
}

.hmo-dualslider-pagination .swiper-pagination-bullet-active {
background: #ffffff;
opacity: 1;
width: 18px;
border-radius: 4px;
}

/* ==========================================================================
   Khối Đối Tác Của Chúng Tôi (.hmo-partnerblock)
   ========================================================================== */
.hmo-partnerblock {
padding: 10px 0 20px;
}

.hmo-partnerblock-title {
font-size: 24px;
font-weight: 700;
color: #333333;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.hmo-partner-slider {
padding: 10px 0;
}

.hmo-partner-link {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
padding: 0 10px;
text-decoration: none;
}

.hmo-partner-logo {
max-height: 46px;
max-width: 140px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.75;
transition: all 0.3s ease;
}

.hmo-partner-link:hover .hmo-partner-logo {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.08);
}

/* ==========================================================================
   Trang Danh Sách Sản Phẩm (.hmo-listing) - Style giống hoangminhoffice.com
   ========================================================================== */

/* --- 7.1 Override product-item trên trang listing dùng class hmo-prodcard --- */
.product-item.hmo-prodcard {
margin-bottom: 0;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 12px 10px 14px;
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
overflow: visible;
position: relative;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-item.hmo-prodcard:hover {
border-color: #cbd5e0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* --- 7.2 Breadcrumb override cho trang listing --- */
.breadcrumbs-section {
font-size: 13.5px;
}

.breadcrumbs-section a {
color: var(--hmo-text-muted, #718096);
font-weight: 500;
}

.breadcrumbs-section a:hover {
color: var(--hmo-primary, #005aad);
}

.breadcrumbs-section h1 {
font-size: inherit;
font-weight: 500;
color: var(--hmo-text-muted, #718096);
text-transform: none;
line-height: inherit;
}

.breadcrumbs-section h1 a {
color: inherit;
}

.breadcrumbs-section h1 a:hover {
color: var(--hmo-primary-dark, #004680);
}

.breadcrumbs-section span {
font-weight: inherit;
color: inherit;
}

/* --- 7.3 Sidebar Danh mục & Bộ lọc (Style theo web mẫu hoangminhoffice.com) --- */

/* Khối bao bọc sidebar */
.col-md-3>[nh-block="lus29v4"].mb-5 {
margin-bottom: 24px !important;
}

.content-filter-product {
padding: 0 !important;
}

/* Tiêu đề mục sidebar: Chữ in hoa + vạch đỏ đứng bên trái chuẩn web mẫu */
.categories .border-bottom.text-uppercase,
.content-filter-product .text-uppercase.h5,
.title-section {
display: flex !important;
align-items: center !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #111111 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px;
margin-bottom: 10px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
position: relative;
line-height: 1.4;
}

.categories .border-bottom.text-uppercase::before,
.content-filter-product .text-uppercase.h5::before,
.title-section::before {
content: "" !important;
display: inline-block !important;
width: 3px !important;
height: 15px !important;
background-color: var(--hmo-primary, #005aad) !important;
margin-right: 8px !important;
border-radius: 1px;
flex-shrink: 0;
}

/* Xoá viền xám thô và padding thừa của theme gốc */
.content-filter-product .border-bottom.border-gray.pb-4.mb-4 {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 8px !important;
}

/* Danh mục sản phẩm (Categories) */
.categories .categories-section {
padding-left: 0;
list-style: none;
margin-bottom: 22px;
}

.categories .categories-section>li {
position: relative;
border-bottom: 1px dashed #e5e5e5;
padding: 0;
transition: background-color 0.15s ease;
}

.categories .categories-section>li:last-child {
border-bottom: none;
}

.categories .categories-section>li>a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 500;
color: #333333;
padding: 7px 0;
text-decoration: none;
transition: color 0.2s ease, padding-left 0.2s ease;
}

.categories .categories-section>li>a::before {
display: none !important;
}

.categories .categories-section>li>a:hover,
.categories .categories-section>li.active>a {
color: var(--hmo-primary, #005aad);
padding-left: 4px;
text-decoration: none;
}

/* Nút dropdown mở rộng danh mục con */
.categories .categories-section .dropdown-toggle {
position: absolute;
right: 0;
top: 6px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #718096;
font-size: 11px;
transition: transform 0.2s ease, color 0.2s ease;
}

.categories .categories-section .dropdown-toggle::after {
display: inline-block;
border: none;
content: "\f107";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
}

.categories .categories-section .dropdown-toggle.open::after,
.categories .categories-section .dropdown-toggle[aria-expanded="true"]::after {
content: "\f106";
color: var(--hmo-primary, #005aad);
}

/* Danh mục cấp con */
.categories .categories-section .list-child {
padding-left: 12px;
border-left: 2px solid #edf2f7;
margin-bottom: 6px;
list-style: none;
}

.categories .categories-section .list-child li a {
display: block;
font-size: 12.5px;
font-weight: 400;
color: #4a5568;
padding: 4px 0;
text-decoration: none;
transition: color 0.2s ease;
}

.categories .categories-section .list-child li a:hover {
color: var(--hmo-primary, #005aad);
padding-left: 3px;
}

/* Danh sách lọc giá sản phẩm */
.content-filter-product .filter-section {
padding-left: 0;
list-style: none;
margin-bottom: 18px !important;
}

.content-filter-product .filter-section li {
margin-bottom: 5px;
}

.content-filter-product .filter-section li>a {
display: inline-flex;
align-items: center;
font-size: 13px;
color: #333333;
font-weight: 500;
text-decoration: none;
margin: 2px 0;
transition: color 0.2s ease;
}

.content-filter-product .filter-section li>a:hover {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.content-filter-product .filter-section li>a.active {
color: var(--hmo-primary, #005aad);
font-weight: 600;
}

/* Custom nút radio tròn lọc giá */
.content-filter-product .filter-section li .inner-switch.circle>span {
width: 15px !important;
height: 15px !important;
border: 1.5px solid #cbd5e0 !important;
border-radius: 50% !important;
margin-right: 8px !important;
position: relative !important;
background-color: #ffffff !important;
transition: border-color 0.2s ease;
}

.content-filter-product .filter-section li>a:hover .inner-switch.circle>span {
border-color: var(--hmo-primary, #005aad) !important;
}

.content-filter-product .filter-section li>a.active .inner-switch.circle>span {
border-color: var(--hmo-primary, #005aad) !important;
}

.content-filter-product .filter-section li>a.active .inner-switch.circle>span::after,
.content-filter-product .filter-section li>a:hover .inner-switch.circle>span::after {
content: "" !important;
position: absolute !important;
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background-color: var(--hmo-primary, #005aad) !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}

/* Custom checkbox vuông lọc thương hiệu */
.content-filter-product .filter-section li .inner-switch:not(.circle)>span {
width: 15px !important;
height: 15px !important;
border: 1.5px solid #cbd5e0 !important;
border-radius: 3px !important;
margin-right: 8px !important;
position: relative !important;
background-color: #ffffff !important;
transition: all 0.2s ease;
}

.content-filter-product .filter-section li>a:hover .inner-switch:not(.circle)>span {
border-color: var(--hmo-primary, #005aad) !important;
}

.content-filter-product .filter-section li>a.active .inner-switch:not(.circle)>span {
background-color: var(--hmo-primary, #005aad) !important;
border-color: var(--hmo-primary, #005aad) !important;
}

.content-filter-product .filter-section li>a.active .inner-switch:not(.circle)>span::after {
content: "\f00c" !important;
font-family: "Font Awesome 6 Pro" !important;
font-weight: 900 !important;
font-size: 9px !important;
color: #ffffff !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
line-height: 1 !important;
}

/* Thuộc tính & Trạng thái dạng nút tag hiện đại tinh gọn */
.content-filter-product .product-attribute-switch {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 0 18px 0 !important;
padding-left: 0;
list-style: none;
}

.content-filter-product .product-attribute-switch .inner-product-attribute {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: auto !important;
width: auto !important;
min-width: 44px;
padding: 5px 12px !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: #2d3748 !important;
background-color: #f7fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 4px !important;
margin: 0 !important;
line-height: 1.35 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}

.content-filter-product .product-attribute-switch .inner-product-attribute:hover {
border-color: var(--hmo-primary, #005aad) !important;
color: var(--hmo-primary, #005aad) !important;
background-color: #eef6ff !important;
text-decoration: none !important;
}

.content-filter-product .product-attribute-switch .inner-product-attribute.active,
.content-filter-product .product-attribute-switch li.active a.inner-product-attribute {
background-color: var(--hmo-primary, #005aad) !important;
border-color: var(--hmo-primary, #005aad) !important;
color: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 2px 5px rgba(0, 90, 173, 0.2) !important;
}

/* Triệt tiêu tam giác & icon check cũ từ page.css */
.content-filter-product .product-attribute-switch .inner-product-attribute::before,
.content-filter-product .product-attribute-switch .inner-product-attribute::after,
.content-filter-product .product-attribute-switch li.active a.inner-product-attribute::before,
.content-filter-product .product-attribute-switch li.active a.inner-product-attribute::after {
display: none !important;
}

/* Link Xóa bộ lọc */
.content-filter-product .reset-attribute {
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--hmo-primary, #005aad) !important;
text-decoration: underline !important;
background: rgba(0, 90, 173, 0.07);
padding: 2px 7px;
border-radius: 3px;
line-height: 1.2;
transition: all 0.2s ease;
}

.content-filter-product .reset-attribute:hover {
background: var(--hmo-primary, #005aad);
color: #ffffff !important;
text-decoration: none !important;
}

/* Nút Đặt lại toàn bộ */
.content-filter-product .btn_dat_lai {
margin-top: 10px !important;
margin-bottom: 25px !important;
}

.content-filter-product .btn_dat_lai .btn.btn-submit {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 9px 16px !important;
background-color: var(--hmo-primary, #005aad) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
border-radius: 4px !important;
border: none !important;
transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.content-filter-product .btn_dat_lai .btn.btn-submit:hover {
background-color: var(--hmo-primary-dark, #004680) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 90, 173, 0.25) !important;
text-decoration: none !important;
}

/* --- 7.4 Thanh sắp xếp & Hiển thị --- */
.show-item {
font-size: 13.5px;
color: var(--hmo-text-muted, #718096);
}

.show-item a {
color: var(--hmo-text-dark, #2d3748);
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
transition: all 0.2s ease;
}

.show-item a:hover,
.show-item a.active {
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
}

.sort-by select {
border: 1px solid #e2e8f0;
border-radius: 4px;
padding: 6px 30px 6px 12px;
font-size: 13.5px;
font-weight: 500;
color: var(--hmo-text-dark, #2d3748);
background-color: #ffffff;
cursor: pointer;
transition: border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}

.sort-by select:focus {
border-color: var(--hmo-primary, #005aad);
outline: none;
box-shadow: 0 0 0 3px rgba(0, 90, 173, 0.1);
}

/* --- 7.5 Product Grid trên trang listing --- */
.product-item.hmo-prodcard .hmo-prodcard-thumb {
aspect-ratio: 1 / 1;
margin-bottom: 12px;
margin-top: 10px;
}

/* --- 7.6 Phân trang (Pagination) --- */
.pagination {
gap: 4px;
}

.pagination .page-item .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
color: var(--hmo-text-dark, #2d3748);
background-color: #ffffff;
transition: all 0.2s ease;
}

.pagination .page-item .page-link:hover {
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
border-color: var(--hmo-primary, #005aad);
}

.pagination .page-item.active .page-link {
background-color: var(--hmo-primary, #005aad);
color: #ffffff;
border-color: var(--hmo-primary, #005aad);
}

.pagination .page-item.disabled .page-link {
color: #cbd5e0;
background-color: #f7fafc;
border-color: #e2e8f0;
cursor: not-allowed;
}

/* --- 7.7 Override price styles trên listing --- */
.product-item.hmo-prodcard .price-amount {
color: var(--hmo-primary, #005aad);
font-weight: 800;
font-size: 16px;
}

.product-item.hmo-prodcard .price-amount.old-price {
color: #a0aec0;
font-weight: 500;
font-size: 13px;
margin-left: 8px;
}

.product-item.hmo-prodcard .price-amount.old-price::after {
background-color: #a0aec0;
}

/* --- 7.8 Override product-title trên listing --- */
.product-item.hmo-prodcard .product-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 8px;
}

.product-item.hmo-prodcard .product-title a {
color: #1a202c;
}

.product-item.hmo-prodcard .product-title a:hover {
color: var(--hmo-primary, #005aad);
}

/* --- 7.9 Product count total trên listing header --- */
.total-product {
font-size: 14px;
color: var(--hmo-text-muted, #718096);
font-weight: 500;
}

.total-product strong {
color: var(--hmo-text-dark, #2d3748);
font-weight: 700;
}

/* 6. Responsive Styles gom ở cuối file theo thứ tự giảm dần */

/* Màn hình Tablet lớn / Laptop nhỏ (< 1280px) */
@media (max-width: 1280px) {
.hmo-header-hotline {
padding: 6px 12px;
font-size: 13.5px;
margin-right: 10px;
}

.hmo-header-action {
margin-left: 10px;
}

.hmo-nav-link {
padding: 10px 10px;
font-size: 11.5px;
}
}

/* Màn hình Tablet (< 1024px) */
@media (max-width: 1024px) {
.main-title{
font-size: 22px;
}
.hmo-topbar-link {
font-size: 10.5px;
}

.hmo-topbar-item+.hmo-topbar-item::before {
margin: 0 6px;
}

.hmo-header-search {
max-width: 360px;
}

.hmo-header-actiontext {
font-size: 10.5px;
}

.hmo-prodgrid-col {
flex: 0 0 25%;
max-width: 25%;
}
}

/* Màn hình Di động & Tablet dọc (< 992px - Mobile Header) */
@media (max-width: 991.98px) {
.hmo-topbar-nav {
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap !important;
overflow-x: auto;
white-space: nowrap;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}

.hmo-header {
position: relative;
}

.hmo-topbar-item {
flex-shrink: 0;
}

/* Header mobile: [MENU] - [Logo giữa] - [Giỏ hàng], ô tìm kiếm ở hàng dưới */
.hmo-header-row {
padding-top: 8px !important;
padding-bottom: 0 !important;
}

.hmo-header>.d-flex {
display: grid !important;
grid-template-columns: 60px minmax(0, 1fr) 60px;
align-items: center;
gap: 8px 6px;
}

.hmo-header-menubtn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: start;
min-width: 44px;
min-height: 44px;
color: var(--hmo-text-dark, #2d3748);
}

.hmo-header-menubtn:hover {
color: var(--hmo-primary, #005aad);
}

.hmo-header-menubtn:focus-visible {
outline: 2px solid var(--hmo-primary, #005aad);
outline-offset: 2px;
}

.hmo-header-menubtn i {
font-size: 26px;
line-height: 1;
}

.hmo-header-menutext {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
margin-top: 4px;
}

.hmo-header-left {
min-width: 0;
text-align: center;
}

.hmo-header-logo img {
object-fit: contain;
z-index: 999;
width: 300px;
height: 50px;
}
.hmo-header-actions {
justify-content: flex-end;
justify-self: end;
}

.hmo-header-hotline,
.hmo-header-action:not(.hmo-header-cart) {
display: none !important;
}

.hmo-header-action {
margin-left: 0;
}

.hmo-header-actionicon {
width: 32px;
height: 32px;
font-size: 14px;
}

.hmo-header-actiontext {
display: block;
font-size: 11px;
font-weight: 700;
margin-top: 4px;
}

.hmo-header-search {
order: 4;
grid-column: 1 / -1;
width: auto;
max-width: none;
margin: 2px -15px 0 !important;
padding: 10px 15px;
background-color: #f2f2f2;
}

.hmo-header-input {
border-color: #e5e5e5;
border-radius: 6px;
}

/* Header cố định khi cuộn xuống: [MENU] - [Tìm kiếm] - [Giỏ hàng] (class do custom.js gắn) */
.hmo-header-row.hmo-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding-top: 6px !important;
padding-bottom: 6px !important;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
animation: hmoHeaderSlideDown 0.25s ease-out;
}

.hmo-header-fixed .hmo-header>.d-flex {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
}

.hmo-header-fixed .hmo-header-left {
display: none;
}

.hmo-header-fixed .hmo-header-search {
order: 0;
grid-column: auto;
margin: 0 !important;
padding: 0;
background-color: transparent;
}

@keyframes hmoHeaderSlideDown {
from {
transform: translateY(-100%);
}

to {
transform: translateY(0);
}
}

/* Menu Sidebar Offcanvas trên Mobile (mở bằng nút MENU ở header) */
.hmo-nav-row {
padding: 0;
border: none !important;
background-color: transparent;
}

.hmo-category-menu .btn-menu-mobile {
display: none;
}

.hmo-nav .hmo-nav-bar {
position: fixed;
top: 0;
left: -300px;
width: 290px;
height: 100%;
background-color: #ffffff;
z-index: 9999;
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
overflow-y: auto;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hmo-nav .hmo-nav-bar.open {
left: 0;
}

.hmo-nav-list {
flex-direction: column;
}

.hmo-nav-item {
width: 100%;
border-bottom: 1px solid #f1f5f9;
}

.hmo-nav-link {
padding: 12px 18px;
justify-content: space-between;
font-size: 13px;
}

.hmo-nav-sub {
position: static;
box-shadow: none;
border-top: none;
background-color: #f8f9fa;
padding: 0;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}

.hmo-nav-sub.open,
.hmo-nav-sub.active {
display: block;
}

.hmo-nav-sublink {
padding: 10px 24px;
}

.hmo-nav-backdrop.open {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
}

/* Block tiện ích & sản phẩm trên Tablet dọc */
.hmo-policy {
padding: 12px 0;
}

.hmo-policy-col {
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 8px;
}

.hmo-policy-col:nth-child(2n+1)::before {
display: none;
}

.hmo-prodblock-header {
align-items: flex-start !important;
}

.hmo-prodblock-tabs {
flex-basis: 100%;
width: 100%;
}

.hmo-prodgrid-col {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}

/* Màn hình Di động nhỏ (< 768px) */
@media (max-width: 767.98px) {
.hmo-header-logo img {
max-width: min(230px, 100%);
}

.hmo-topbar-right {
display: none !important;
}

/* Block chính sách & sản phẩm trên Mobile */
.hmo-policy-col {
flex: 0 0 50%;
max-width: 50%;
}

.hmo-policy-item {
padding: 6px 4px;
}

.hmo-policy-icon {
font-size: 26px;
margin-bottom: 4px;
}

.hmo-policy-title {
font-size: 12.5px;
}

.hmo-policy-desc {
font-size: 11px;
}

.hmo-prodgrid-col {
flex: 0 0 50%;
max-width: 50%;
padding: 4px;
}

.hmo-prodcard {
padding: 10px 8px 12px;
}

.hmo-prodcard-name {
font-size: 13px;
height: 50px;
line-height: 1.35;
}

.hmo-prodcard-price {
font-size: 14.5px;
}

.hmo-prodcard-buybtn {
font-size: 12.5px;
padding: 6px 8px;
}

.hmo-prodcard-tooltip {
display: none !important;
}

/* Footer Mobile */
.hmo-footer {
padding-top: 35px;
padding-bottom: 20px;
}

.hmo-footcompany {
margin-bottom: 25px;
}

.hmo-footmenu {
margin-bottom: 22px;
}

.hmo-footmenu-title {
font-size: 14.5px;
}

.hmo-footmenu-link {
font-size: 13px;
}

/* Tin tức & Đối tác Mobile */
.hmo-newsblock-title {
font-size: 16.5px;
}

.hmo-article-title {
font-size: 14.5px;
}

.hmo-article-desc {
font-size: 13px;
}

.hmo-article-date {
font-size: 12px;
}

.hmo-dualslider-row {
margin-bottom: 16px !important;
}

.hmo-dualslider-row>div:first-child {
margin-bottom: 12px;
}

.hmo-partnerblock-title {
font-size: 16px;
}

.hmo-partner-link {
height: 52px;
}

.hmo-partner-logo {
max-height: 38px;
max-width: 110px;
}

/* Listing page Mobile */
.title-section {
font-size: 14px;
}

.pagination .page-item .page-link {
min-width: 32px;
height: 32px;
font-size: 12.5px;
}
}

/* Màn hình Di động rất nhỏ (< 390px) */
@media (max-width: 390px) {
.hmo-header-logo img {
max-height: 34px;
}

.hmo-header-action {
margin-left: 5px;
}

.hmo-header-actionicon {
width: 28px;
height: 28px;
font-size: 12px;
}

.hmo-prodcard-name {
font-size: 12px;
}

.hmo-prodcard-price {
font-size: 13.5px;
}
}

/* Product detail: CMS rows and independent detail blocks. */
.hmo-detail-top {
margin: 28px 0 32px;
}

.hmo-detail-content {
margin-bottom: 32px;
}

.hmo-product-detail {
color: #222;
}

.hmo-product-detail .product-image-detail-top {
border: 1px solid #ddd;
background: #fff;
}

.hmo-product-detail .product-image-detail-top .inner-image {
aspect-ratio: 1;
padding-top: 0;
display: flex;
align-items: center;
justify-content: center;
}

.hmo-product-detail .product-image-detail-top .inner-image img {
width: 100%;
height: 100%;
object-fit: contain;
}

.hmo-product-detail .product-image-detail-top .swiper {
margin-bottom: 0 !important;
}

.hmo-product-detail .swiper-button-next,
.hmo-product-detail .swiper-button-prev {
width: 32px;
height: 48px;
border-radius: 4px;
background: #005aad;
color: #fff;
}

.hmo-product-detail .swiper-button-next {
right: 0;
}

.hmo-product-detail .swiper-button-prev {
left: 0;
}

.hmo-product-detail [nh-slider-thumbs] {
margin-top: 12px;
}

.hmo-product-detail [nh-slider-thumbs] .swiper-slide {
border: 1px solid transparent;
opacity: .65;
cursor: pointer;
}

.hmo-product-detail [nh-slider-thumbs] .swiper-slide-thumb-active {
border-color: #ccc;
opacity: 1;
}

.hmo-product-detail [nh-slider-thumbs] img {
object-fit: contain;
}

.hmo-product-detail .product-title-detail {
font-size: 25px;
line-height: 1.3;
font-weight: 700;
color: #555;
}

.hmo-product-detail .product-rating {
font-size: 13px;
}

.hmo-product-detail .price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}

.hmo-product-detail .price .price-amount {
color: #f05a00;
font-size: 30px;
font-weight: 700;
line-height: 1.25;
}

.hmo-product-detail .price .old-price {
order: -1;
font-size: 15px;
color: #999;
font-weight: 400;
margin-left: 0;
}

.hmo-detail-attributes {
padding: 6px 0;
margin-bottom: 15px;
}

.hmo-detail-attribute {
display: flex;
flex-wrap: wrap;
column-gap: 4px;
margin-bottom: 9px;
font-size: 15px;
line-height: 1.5;
}

.hmo-detail-attribute dt {
font-weight: 700;
}

.hmo-detail-attribute dd {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}

.hmo-detail-attribute dd p:last-child {
margin-bottom: 0;
}

.hmo-attribute-image {
max-width: 120px;
max-height: 90px;
object-fit: contain;
}

.hmo-product-detail .code,
.hmo-product-detail .brand,
.hmo-product-detail .product-category {
font-size: 13px;
color: #666;
}

.hmo-detail-buy-row {
gap: 12px;
align-items: stretch;
margin-top: 16px;
}

.hmo-detail-buy-row .btn-cart-buy {
flex: 1;
min-width: 0;
}

.hmo-product-detail .hmo-detail-buy-row .add-to-cart {
width: 100%;
margin: 0 !important;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
background: #005aad;
color: #fff;
font-weight: 700;
text-transform: uppercase;
border: 1px solid #005aad;
border-radius: 4px;
}

.hmo-product-detail .product-action-detail {
margin-top: 12px;
}

.hmo-detail-quote {
display: block;
width: 100%;
border: 1px solid #005aad;
color: #005aad;
background: #fff;
border-radius: 4px;
padding: 13px 10px;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}

.hmo-detail-quote:hover {
color: #fff;
background: #005aad;
}

.hmo-detail-panel,
.hmo-detail-promotion {
background: #f5f5f5;
border: 1px solid #eee;
margin-bottom: 24px;
overflow-wrap: anywhere;
}

.hmo-detail-heading {
font-size: 21px;
font-weight: 700;
color: #005aad;
text-transform: uppercase;
padding: 13px 16px;
margin: 0;
border-bottom: 1px solid #005aad;
}

.hmo-detail-panel-body {
padding: 22px 24px;
line-height: 1.7;
overflow-x: auto;
}

.hmo-detail-panel-body img,
.hmo-detail-panel-body iframe {
max-width: 100%;
}

.hmo-detail-panel-body img {
height: auto;
}

.hmo-detail-panel-body table {
width: 100% !important;
max-width: 100%;
margin: 18px 0 26px !important;
border: 1px solid #dfe4e8;
border-collapse: separate !important;
border-spacing: 0;
background: #fff;
font-size: 15px;
line-height: 1.55;
}

.hmo-detail-panel-body table tr[style*="font-weight"] td,
.hmo-detail-panel-body table thead th {
padding: 12px 14px !important;
border-color: #005aad !important;
background: #005aad;
color: #fff;
font-weight: 700;
}

.hmo-detail-panel-body table td,
.hmo-detail-panel-body table th {
height: auto !important;
padding: 11px 14px !important;
border: 0 !important;
border-right: 1px solid #e5e9ec !important;
border-bottom: 1px solid #e5e9ec !important;
vertical-align: top !important;
overflow-wrap: anywhere;
}

.hmo-detail-panel-body table tr:last-child td,
.hmo-detail-panel-body table tr:last-child th {
border-bottom: 0 !important;
}

.hmo-detail-panel-body table td:last-child,
.hmo-detail-panel-body table th:last-child {
border-right: 0 !important;
}

.hmo-detail-panel-body table tbody tr:nth-child(even) {
background: #f7f9fa;
}

.hmo-detail-panel-body table tbody tr:hover {
background: #eef5fb;
}

.hmo-detail-panel-body table td:first-child,
.hmo-detail-panel-body table th:first-child {
width: 28% !important;
min-width: 155px;
font-weight: 600;
color: #20262d;
}

.hmo-detail-panel-body table tr[style*="font-weight"] td:first-child,
.hmo-detail-panel-body table thead th:first-child {
color: #fff;
}

.hmo-detail-panel-body table td p:last-child,
.hmo-detail-panel-body table td ul:last-child {
margin-bottom: 0;
}

.hmo-detail-panel-body table td h2,
.hmo-detail-panel-body table td h3,
.hmo-detail-panel-body table td h4 {
margin: 0;
color: inherit;
font: inherit;
line-height: inherit;
}

.hmo-detail-panel-body table td a {
color: #005aad;
font-weight: 600;
}

.hmo-detail-panel-body table td ul {
padding-left: 18px;
}

.hmo-detail-panel-body table figure {
margin-bottom: 12px;
}

.hmo-detail-promotion {
margin-top: 20px;
}

.hmo-detail-promotion h2 {
font-size: 18px;
padding: 12px 16px;
margin: 0;
border-bottom: 1px solid #ddd;
}

.hmo-detail-promotion>div {
padding: 16px;
}

.hmo-detail-commitment {
padding: 16px;
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 18px;
}

.hmo-detail-commitment h2,
.hmo-detail-related>h2 {
font-size: 19px;
line-height: 1.4;
font-weight: 700;
margin: 0 0 14px;
}

.hmo-detail-commitment ul {
margin: 0;
padding: 0;
list-style: none;
}

.hmo-detail-commitment li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 12px;
line-height: 1.5;
}

.hmo-detail-commitment li i {
color: #4e8bc7;
font-size: 19px;
margin-top: 3px;
}

.hmo-detail-commitment li a {
color: #005aad;
font-style: italic;
}

.hmo-detail-related>h2 {
text-align: center;
text-transform: uppercase;
}

.hmo-detail-related-item {
display: flex;
align-items: center;
gap: 14px;
border: 1px dashed #005aad;
padding: 14px 12px;
margin-bottom: 10px;
color: #111;
}

.hmo-detail-related-item:hover {
border-color: #005aad;
}

.hmo-detail-related-image {
flex: 0 0 34%;
min-width: 0;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}

.hmo-detail-related-image img {
width: 100%;
height: 100%;
object-fit: contain;
}

.hmo-detail-related-info {
min-width: 0;
}

.hmo-detail-related-info h3 {
font-size: 14px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 6px;
overflow-wrap: anywhere;
}

.hmo-detail-related-price {
color: #f05a00;
font-size: 16px;
font-weight: 700;
}

.hmo-detail-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
margin-bottom: 20px;
}

.hmo-detail-tags a {
background: #eee;
border-radius: 3px;
padding: 2px 8px;
}

.hmo-detail-no-image {
color: #888;
font-size: 14px;
text-align: center;
}

.hmo-quote-modal .modal-title {
color: #005aad;
font-weight: 700;
}

.hmo-quote-modal .btn-submit {
background: #005aad;
color: #fff;
width: 100%;
}

@media (max-width: 1199.98px) and (min-width: 768px) {
.main-title {font-size: 30px;}
.hmo-detail-top>.container>.row>.col-md-9 {
flex: 0 0 100%;
max-width: 100%;
}

.hmo-detail-top>.container>.row>.col-md-3 {
flex: 0 0 100%;
max-width: 100%;
margin-top: 24px;
}

.hmo-detail-related {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.hmo-detail-related>h2 {
grid-column: 1 / -1;
}
}

@media (max-width: 767.98px) {
.hmo-detail-top {
margin-top: 18px;
margin-bottom: 24px;
}

.hmo-product-detail .product-title-detail {
font-size: 22px;
}

.hmo-product-detail .price .price-amount {
font-size: 27px;
}

.hmo-product-detail .price .old-price {
font-size: 14px;
}

.hmo-detail-quote {
font-size: 15px;
}

.hmo-detail-panel-body {
padding: 18px 15px;
}

.hmo-detail-panel-body table {
min-width: 620px;
margin-top: 14px !important;
font-size: 14px;
}

.hmo-detail-panel-body table td,
.hmo-detail-panel-body table th {
padding: 9px 11px !important;
}

.hmo-detail-heading {
font-size: 19px;
}

.hmo-detail-commitment,
.hmo-detail-related {
margin-top: 20px;
}
}

/* ==========================================================================
   Khối Vật Tư Liên Quan (.hmo-related)
   ========================================================================== */
.hmo-related {
width: 100%;
}

.hmo-related-heading {
border-bottom: 1px solid #7ea8d6;
margin-bottom: 24px;
padding-bottom: 8px;
}

.hmo-related-title {
font-size: 20px;
font-weight: 700;
color: #005aad;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}

.hmo-related-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 22px 20px;
display: flex;
align-items: center;
gap: 22px;
height: 100%;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.hmo-related-card:hover {
border-color: #cbd5e0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.hmo-related-thumb {
flex: 0 0 150px;
max-width: 150px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.hmo-related-thumb a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.hmo-related-thumb img {
max-width: 100%;
max-height: 190px;
object-fit: contain;
transition: transform 0.3s ease;
}

.hmo-related-thumb:hover img {
transform: scale(1.06);
}

.hmo-related-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}

.hmo-related-name {
font-size: 15px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
color: #111111;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hmo-related-name a {
color: #111111;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-related-name a:hover {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.hmo-related-pricing {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}

.hmo-related-oldprice {
font-size: 13.5px;
color: #999999;
text-decoration: line-through;
}

.hmo-related-badge {
color: #e53e3e;
font-size: 11px;
font-weight: 700;
border: 1px solid #fed7d7;
background: #eef6ff;
border-radius: 3px;
padding: 1px 5px;
line-height: 1.2;
}

.hmo-related-price {
font-size: 19px;
font-weight: 800;
color: #005aad;
line-height: 1.2;
}

.hmo-related-buywrap {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}

.hmo-related-qty {
display: inline-flex;
align-items: center;
border: 1px solid #005aad;
border-radius: 2px;
height: 34px;
background: #ffffff;
}

.hmo-related-qtybtn {
width: 28px;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #333333;
font-size: 15px;
user-select: none;
background: transparent;
transition: background 0.15s ease, color 0.15s ease;
}

.hmo-related-qtybtn:hover {
background: #f8f9fa;
color: #005aad;
}

.hmo-related-qtyinput {
width: 36px;
height: 100%;
border: none;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: center;
font-size: 13.5px;
font-weight: 600;
color: #2d3748;
outline: none;
padding: 0;
}

.hmo-related-buybtn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #005aad;
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0 24px;
height: 34px;
border-radius: 2px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}

.hmo-related-buybtn:hover {
background-color: #004680;
color: #ffffff;
text-decoration: none;
}

/* ==========================================================================
   Khối Sản Phẩm Đã Xem (.hmo-viewed)
   ========================================================================== */
.hmo-viewed {
width: 100%;
}

.hmo-viewed-heading {
border-bottom: 1px solid #7ea8d6;
margin-bottom: 24px;
padding-bottom: 8px;
}

.hmo-viewed-title {
font-size: 20px;
font-weight: 700;
color: #005aad;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
}

.hmo-viewed-grid {
display: flex;
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}

.hmo-viewed-col {
flex: 0 0 20%;
max-width: 20%;
padding: 6px;
box-sizing: border-box;
}

.hmo-viewed-card {
position: relative;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 6px;
padding: 14px 12px 16px;
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.hmo-viewed-card:hover {
border-color: #cbd5e0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hmo-viewed-top {
position: absolute;
top: 0;
left: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
z-index: 2;
}

.hmo-viewed-badge {
background-color: #005aad;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 3px 6px;
border-radius: 0 0 3px 3px;
line-height: 1.2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hmo-viewed-wish {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: #ff9800;
color: #ffffff;
font-size: 11px;
border-radius: 3px;
text-decoration: none;
margin-top: 2px;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.hmo-viewed-wish:hover {
background-color: #f57c00;
color: #ffffff;
transform: scale(1.1);
}

.hmo-viewed-thumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.85;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 12px;
overflow: hidden;
}

.hmo-viewed-thumb a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.hmo-viewed-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}

.hmo-viewed-thumb:hover img {
transform: scale(1.05);
}

.hmo-viewed-body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}

.hmo-viewed-name {
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
text-transform: uppercase;
height: 38px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 8px;
}

.hmo-viewed-name a {
color: #111111;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-viewed-name a:hover {
color: var(--hmo-primary, #005aad);
text-decoration: none;
}

.hmo-viewed-pricing {
margin-bottom: 12px;
}

.hmo-viewed-oldprice {
font-size: 12.5px;
color: #999999;
text-decoration: line-through;
min-height: 18px;
line-height: 1.2;
}

.hmo-viewed-oldprice-empty {
text-decoration: none !important;
visibility: hidden;
}

.hmo-viewed-price {
font-size: 16px;
font-weight: 800;
color: #005aad;
line-height: 1.2;
margin-top: 2px;
}

.hmo-viewed-action {
margin-top: auto;
}

.hmo-viewed-buybtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #005aad;
color: #ffffff;
font-size: 13px;
font-weight: 700;
padding: 7px 14px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.2s ease;
}

.hmo-viewed-buybtn:hover {
background-color: #004680;
color: #ffffff;
text-decoration: none;
}

/* Swiper Slider cho Khối Sản Phẩm Đã Xem */
.hmo-viewed-slider-wrap {
position: relative;
padding: 0 4px;
}

.hmo-viewed-slider {
width: 100%;
padding: 6px 2px 12px;
overflow: hidden;
}

.hmo-viewed-slide {
height: auto;
display: flex;
flex-direction: column;
}

.hmo-viewed-slide .hmo-viewed-card {
height: 100%;
width: 100%;
}

.hmo-viewed-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
background: #ffffff;
border: 1px solid #dcdfe6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #444444;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
}

.hmo-viewed-nav:hover {
background: #005aad;
color: #ffffff;
border-color: #005aad;
box-shadow: 0 4px 12px rgba(0, 90, 173, 0.25);
}

.hmo-viewed-prev {
left: -18px;
}

.hmo-viewed-next {
right: -18px;
}

.hmo-viewed-nav.swiper-button-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}

/* ==========================================================================
   Khối Tab Sản Phẩm Trang Chủ (.hmo-tab)
   ========================================================================== */
.hmo-tab {
position: relative;
padding-top: 20px;
margin-bottom: 35px;
}

.hmo-tab-header {
border-bottom: 1px solid #e0e0e0;
margin-bottom: 24px;
position: relative;
}

.hmo-tab-nav {
display: flex;
justify-content: center;
align-items: center;
border-bottom: none;
margin-bottom: 0;
padding: 0;
list-style: none;
}

.hmo-tab-item {
margin: 0 10px;
}

.hmo-tab-link {
display: inline-block;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
color: #222222;
padding: 10px 18px;
border: none !important;
background: transparent !important;
position: relative;
letter-spacing: 0.5px;
transition: color 0.2s ease;
text-decoration: none !important;
}

.hmo-tab-link:hover {
color: #a71d2a;
}

.hmo-tab-link.active {
color: #000000 !important;
font-weight: 800;
}

.hmo-tab-link.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 3px;
background-color: #a71d2a;
border-radius: 2px 2px 0 0;
}

.hmo-tab-content {
position: relative;
}

/* Slider trong Tab */
.hmo-tab-slider-wrap {
position: relative;
}

.hmo-tab-slider {
overflow: hidden;
}

.hmo-tab-slide {
height: auto;
display: flex;
}

.hmo-tab-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 42px;
background: #ffffff;
border: 1px solid #d1d5db;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #4b5563;
cursor: pointer;
z-index: 10;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
}

.hmo-tab-nav-btn:hover {
background: #ffffff;
border-color: #a71d2a;
color: #a71d2a;
box-shadow: 0 2px 8px rgba(167, 29, 42, 0.18);
}

.hmo-tab-prev {
left: -14px;
}

.hmo-tab-next {
right: -14px;
}

.hmo-tab-nav-btn.swiper-button-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}

/* Card Sản Phẩm trong Tab */
.hmo-tab-card {
position: relative;
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 12px 10px 14px;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.hmo-tab-card:hover {
border-color: #cbd5e0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.hmo-tab-card-top {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
}

.hmo-tab-card-badge {
background-color: #a71d2a;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
line-height: 1.2;
}

.hmo-tab-card-wish {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: #f59e0b;
color: #ffffff;
font-size: 11px;
border-radius: 3px;
text-decoration: none;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.hmo-tab-card-wish:hover {
background-color: #d97706;
color: #ffffff;
transform: scale(1.1);
}

.hmo-tab-card-thumb {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.85;
display: flex;
align-items: center;
justify-content: center;
margin-top: 8px;
margin-bottom: 12px;
overflow: hidden;
}

.hmo-tab-card-thumb a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.hmo-tab-card-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}

.hmo-tab-card-thumb:hover img {
transform: scale(1.05);
}

.hmo-tab-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
text-align: center;
}

.hmo-tab-card-name {
font-size: 13.5px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.4;
height: 38px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 8px;
text-align: center;
}

.hmo-tab-card-name a {
color: #1a202c;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-tab-card-name a:hover {
color: #a71d2a;
}

.hmo-tab-card-pricing {
margin-bottom: 10px;
text-align: center;
}

.hmo-tab-card-oldprice {
font-size: 12.5px;
color: #a0aec0;
text-decoration: line-through;
min-height: 18px;
line-height: 1.2;
text-align: center;
}

.hmo-tab-card-oldprice-empty {
text-decoration: none !important;
visibility: hidden;
}

.hmo-tab-card-price {
font-size: 16.5px;
font-weight: 800;
color: #a71d2a;
line-height: 1.2;
margin-top: 2px;
text-align: center;
}

.hmo-tab-card-action {
margin-top: auto;
}

.hmo-tab-card-buybtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #a71d2a;
color: #ffffff;
font-size: 13px;
font-weight: 700;
padding: 7px 12px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.15s ease;
}

.hmo-tab-card-buybtn:hover {
background-color: #8b1820;
color: #ffffff;
text-decoration: none;
}

/* ==========================================================================
   Khối Giới Thiệu 3CElectric (.hmo-about)
   ========================================================================== */
.hmo-about {
position: relative;
padding: 35px 0 25px;
}

.hmo-about-bar {
width: 5px;
height: 32px;
background-color: #f15a24;
border-radius: 2px;
margin-right: 14px;
flex-shrink: 0;
}

.hmo-about-title {
font-size: 32px;
font-weight: bold;
color:#2c378f;
text-transform: none;
}

.hmo-about-title sup {
font-size: 16px;
top: -12px;
}

.hmo-about-desc {
font-size: 16px;
line-height: 1.65;
color: #374151;
margin-bottom: 12px;
}

.hmo-about-certwrap {
margin-top: 18px;
}

.hmo-about-certimg img {
max-height: 44px;
width: auto;
object-fit: contain;
}

.hmo-about-btnmore {
line-height:43px;
display: inline-flex;
align-items: center;
border: 1.5px solid #005aad;
color: #005aad;
padding: 0 18px;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.25s ease;
background: #ffffff;
}

.hmo-about-btnmore:hover {
background: #005aad;
color: #ffffff;
border-color: #005aad;
transform: translateX(3px);
text-decoration: none;
}

.hmo-about-stats {
margin-top: 25px;
padding-top: 20px;
border-top: 1px dashed #e5e7eb;
}

.hmo-about-stat-item {
margin-bottom: 15px;
}

.hmo-about-stat-icon {
width: 32px;
height: 32px;
margin-right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.hmo-about-stat-icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.hmo-about-stat-num {
font-size: 26px;
font-weight: 800;
color: #0f2d6b;
line-height: 1.1;
}

.hmo-about-stat-lbl {
font-size: 13px;
color: #4b5563;
line-height: 1.35;
margin-top: 6px;
}

.hmo-about-slider-box {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 47, 108, 0.12);
border: 1px solid #f0f3f8;
background: #ffffff;
}

.hmo-about-slide {
position: relative;
overflow: hidden;
box-shadow: 0 .25rem 1rem .25rem rgb(0 0 0 / 30%);
}

.hmo-about-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 .25rem 1rem .25rem rgb(0 0 0 / 30%);

}

.hmo-about-pagination {
position: absolute;
bottom: 12px !important;
text-align: center;
}

.hmo-about-pagination .swiper-pagination-bullet {
background: #ffffff;
opacity: 0.7;
width: 8px;
height: 8px;
margin: 0 4px;
transition: all 0.2s;
}

.hmo-about-pagination .swiper-pagination-bullet-active {
background: #005aad;
opacity: 1;
width: 22px;
border-radius: 4px;
}

/* ==========================================================================
   Khối Nút Liên Hệ Sườn Phải Cố Định (.hmo-fixbar)
   ========================================================================== */
.hmo-fixbar {
    position: fixed;
    right: 0;
    left: auto;
    bottom:180px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: -2px 4px 18px rgb(0 0 0 / 18%);
    border-radius: 10px 0 0 10px;
    padding: 6px 0;
    border-right: none;
}
.hmo-fixbar-item {
position: relative;
width: 60px;
}

.hmo-fixbar-item:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 1px;
background-color: #f0f0f0;
}

.hmo-fixbar-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:5px 0;
text-decoration: none !important;
color: #222222;
transition: background-color 0.2s ease;
}

.hmo-fixbar-btn:hover {
background-color: #f8fafc;
}

.hmo-fixbar-icon {
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
}

.hmo-fixbar-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* Icon Hotline có nền tròn màu đỏ làm nổi bật ống nghe trắng */
.hmo-fixbar-item-hotline .hmo-fixbar-icon {
background-color: #e52b2b;
}

.hmo-fixbar-item-hotline .hmo-fixbar-icon img {
width: 20px;
height: 20px;
}

.hmo-fixbar-lbl {
font-size: 11px;
font-weight: 700;
color: #222222;
line-height: 1.2;
margin-top: 4px;
text-align: center;
letter-spacing: -0.2px;
}

/* Xung nhịp Pulse cho Zalo & Hotline */
.hmo-fixbar-pulse {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid #0068ff;
opacity: 0;
pointer-events: none;
animation: hmoPulse 2s infinite ease-out;
}

.hmo-fixbar-item-hotline .hmo-fixbar-pulse {
border-color: #e52b2b;
animation-delay: 0.6s;
}

@keyframes hmoPulse {
0% {
transform: scale(0.95);
opacity: 0.8;
}

70% {
transform: scale(1.35);
opacity: 0;
}

100% {
transform: scale(1.4);
opacity: 0;
}
}

/* Popup mở rộng viên thuốc (Pill) khi hover */
.hmo-fixbar-sub {
position: absolute;
right: 100%;
left: auto;
top: 50%;
transform: translateY(-50%) translateX(8px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
padding-right: 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s ease;
white-space: nowrap;
z-index: 100;
}

.hmo-fixbar-item:hover .hmo-fixbar-sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}

.hmo-fixbar-pill {
display: inline-flex;
align-items: center;
background: #ffffff;
border-radius: 40px;
padding: 6px 8px 6px 18px;
flex-direction: row-reverse;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
border: 1px solid rgba(0, 0, 0, 0.05);
text-decoration: none !important;
min-height: 48px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hmo-fixbar-pill:hover {
transform: scale(1.02);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}

.hmo-fixbar-pill-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
margin-left: 12px;
font-size: 17px;
}

/* Màu icon từng viên thuốc */
.hmo-fixbar-pill-sales .hmo-fixbar-pill-icon {
background-color: #38d128;
}

.hmo-fixbar-pill-service .hmo-fixbar-pill-icon {
background-color: #e52b2b;
}

.hmo-fixbar-pill-zalo .hmo-fixbar-pill-icon {
background-color: #0068ff;
}

.hmo-fixbar-pill-contact .hmo-fixbar-pill-icon {
background-color: #f39c12;
}

.hmo-fixbar-zalo-txt {
font-size: 13px;
font-weight: 800;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.3px;
}

.hmo-fixbar-pill-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
text-align: right;
}

.hmo-fixbar-pill-title {
font-size: 12px;
font-weight: 500;
color: #666666;
line-height: 1.25;
}

.hmo-fixbar-pill-phone {
font-size: 16px;
font-weight: 800;
color: #222222;
line-height: 1.2;
letter-spacing: 0.3px;
margin-top: 2px;
}

.hmo-fixbar-pill-zalo .hmo-fixbar-pill-title,
.hmo-fixbar-pill-contact .hmo-fixbar-pill-title {
font-size: 14.5px;
font-weight: 600;
color: #222222;
line-height: 1.3;
}

/* Mobile: chuyển thành thanh liên hệ cố định dưới đáy, Zalo nổi ở giữa */
@media (max-width: 991.98px) {
body:has(.hmo-fixbar) {
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.hmo-fixbar {
top: auto;
right: 0;
bottom: 0;
left: 0;
transform: none;
z-index: 1010;
flex-direction: row;
align-items: flex-end;
justify-content: space-around;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px 14px 0 0;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.hmo-fixbar-item {
flex: 1 1 0;
width: auto;
min-width: 0;
}

.hmo-fixbar-item:not(:last-child)::after,
.hmo-fixbar-sub {
display: none;
}

.hmo-fixbar-btn {
padding: 2px;
}

.hmo-fixbar-btn:hover {
background-color: transparent;
}

.hmo-fixbar-icon {
width: 42px;
height: 42px;
}

.hmo-fixbar-item-hotline .hmo-fixbar-icon img {
width: 22px;
height: 22px;
}

.hmo-fixbar-lbl {
max-width: 100%;
font-size: 12px;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Nút Zalo to, nhô lên khỏi thanh với vòng sáng xanh */
.hmo-fixbar-item-zalo .hmo-fixbar-btn {
transform: translateY(-22px);
}

.hmo-fixbar-item-zalo .hmo-fixbar-icon {
width: 62px;
height: 62px;
padding: 4px;
background-color: #ffffff;
box-shadow: 0 0 0 7px rgba(0, 174, 239, 0.22), 0 4px 12px rgba(0, 104, 255, 0.25);
}

.hmo-fixbar-item-zalo .hmo-fixbar-pulse {
inset: -8px;
border-color: #00aeef;
}

.hmo-fixbar-item-zalo .hmo-fixbar-lbl {
display: none;
}
}

@media (max-width: 360px) {
.hmo-fixbar-icon {
width: 36px;
height: 36px;
}

.hmo-fixbar-lbl {
font-size: 11px;
}

.hmo-fixbar-item-zalo .hmo-fixbar-icon {
width: 54px;
height: 54px;
}
}

/* ==========================================================================
   Responsive cho Khối Vật Tư & Sản Phẩm Đã Xem & Tab Sản Phẩm & Giới Thiệu
   ========================================================================== */
@media (max-width: 1024px) {
.hmo-viewed-col {
flex: 0 0 25%;
max-width: 25%;
}
}

@media (max-width: 991.98px) {
.hmo-viewed-col {
flex: 0 0 33.333%;
max-width: 33.333%;
}

.hmo-related-thumb {
flex: 0 0 120px;
max-width: 120px;
}
}

@media (max-width: 767.98px) {
.hmo-related-card {
padding: 16px 14px;
gap: 14px;
}

.hmo-related-thumb {
flex: 0 0 100px;
max-width: 100px;
}

.hmo-related-name {
font-size: 13.5px;
}

.hmo-related-price {
font-size: 17px;
}

.hmo-related-buywrap {
flex-wrap: wrap;
}

.hmo-viewed-col {
flex: 0 0 50%;
max-width: 50%;
padding: 4px;
}

.hmo-viewed-card {
padding: 10px 8px 12px;
}

.hmo-viewed-name {
font-size: 12.5px;
height: 34px;
}

.hmo-viewed-price {
font-size: 14.5px;
}

.hmo-viewed-buybtn {
font-size: 12px;
padding: 6px 8px;
}

.hmo-viewed-nav {
width: 30px;
height: 30px;
font-size: 13px;
}

.hmo-viewed-prev {
left: -8px;
}

.hmo-viewed-next {
right: -8px;
}

.hmo-tab-header {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 16px;
}

.hmo-tab-nav {
flex-wrap: nowrap;
justify-content: flex-start !important;
min-width: max-content;
padding-bottom: 4px;
}

.hmo-tab-link {
font-size: 13.5px;
padding: 8px 14px;
white-space: nowrap;
}

.hmo-tab-nav-btn {
display: none;
}

.hmo-tab-card-name {
font-size: 12px;
height: 34px;
}

.hmo-tab-card-price {
font-size: 14.5px;
}

.hmo-tab-card-buybtn {
font-size: 12px;
padding: 6px 8px;
}

.hmo-about {
padding: 25px 0 15px;
}

.hmo-about-title {
font-size: 24px;
}

.hmo-about-bar {
height: 24px;
width: 4px;
margin-right: 10px;
}

.hmo-about-desc {
font-size: 13.5px;
}

.hmo-about-stat-num {
font-size: 22px;
}

.hmo-about-stat-lbl {
font-size: 12px;
}
}

@media (max-width: 390px) {
.hmo-related-card {
flex-direction: column;
text-align: center;
}

.hmo-related-thumb {
flex: 0 0 auto;
width: 100%;
max-width: 130px;
margin-bottom: 8px;
}

.hmo-related-pricing {
justify-content: center;
}

.hmo-related-buywrap {
justify-content: center;
}
}
/* ==========================================================================
   Khối Hệ Thống Chi Nhánh / Showroom Chân Trang (.hmo-branch)
   ========================================================================== */
.hmo-branch-row {
background-color: #F5F5F5;
padding: 40px 0 34px;
}

.hmo-branch {
--hmo-branch-accent:#F91E26;
--hmo-branch-accent-soft:#044BB5;
--hmo-branch-title: #b01e2d;
--hmo-branch-text: #1d1d20;
--hmo-branch-mail: #5b6ab5;
width: 100%;
}

.hmo-branch-headbar {
display: inline-block;
flex-shrink: 0;
width: 4px;
height: 22px;
background-color: var(--hmo-branch-accent);
margin-right: 10px;
border-radius: 2px;
}

.hmo-branch-headtitle {
font-size: 24px;
font-weight: 700;
color: #1a202c;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.25;
}

.hmo-branch-list {
margin-left: -12px;
margin-right: -12px;
}

.hmo-branch-col {
padding-left: 12px;
padding-right: 12px;
margin-bottom: 26px;
}

.hmo-branch-card {
height: 100%;
}

.hmo-branch-cardhead {
background-color:#0f3e84;
border-radius: 3px;
margin-bottom: 14px;
overflow: hidden;
}

.hmo-branch-no {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: stretch;
min-width: 34px;
padding: 8px 6px;
background-color: var(--hmo-branch-accent);
color: #ffffff;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}

.hmo-branch-name {
padding: 8px 14px;
font-size: 14.5px;
font-weight: 700;
color:#fff;
text-transform: uppercase;
letter-spacing: 0.2px;
line-height: 1.35;
overflow-wrap: anywhere;
}

.hmo-branch-line {
align-items: flex-start;
margin-bottom: 9px;
}

.hmo-branch-line:last-child {
margin-bottom: 0;
}

.hmo-branch-icon {
flex-shrink: 0;
width: 20px;
margin-top: 3px;
margin-right: 8px;
font-size: 14px;
color: #9aa0a8;
text-align: center;
}

.hmo-branch-text {
min-width: 0;
font-size: 14px;
line-height: 1.5;
color: var(--hmo-branch-text);
overflow-wrap: anywhere;
}

.hmo-branch-label {
margin-right: 4px;
}

.hmo-branch-map {
color: var(--hmo-branch-title);
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-branch-map:hover {
color: var(--hmo-branch-accent);
text-decoration: underline;
}

.hmo-branch-phone {
color: #d0303c;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-branch-phone:hover {
color: var(--hmo-branch-accent);
text-decoration: underline;
}

.hmo-branch-mail {
color: var(--hmo-branch-mail);
text-decoration: none;
transition: color 0.2s ease;
}

.hmo-branch-mail:hover {
color: var(--hmo-branch-accent);
text-decoration: underline;
}

@media (max-width: 767.98px) {
.hmo-branch-row {
padding: 26px 0 18px;
}

.hmo-branch-headtitle {
font-size: 19px;
}

.hmo-branch-col {
margin-bottom: 20px;
}

.hmo-branch-name {
font-size: 13.5px;
padding: 7px 12px;
}

.hmo-branch-text {
font-size: 13.5px;
}
}

.hmo-hero-slider, .hmo-hero-slide, .hmo-hero-link { height: 100%; }
.hmo-hero-slide {
background-size: cover;
background-position: center;
position: relative;
}
.hmo-hero-link img { display: none; }

.hmo-hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
pointer-events: none;
z-index: 1;
}

.hmo-hero-slide .caption {
position: absolute;
left: 8%;
bottom: 15%;
max-width: 480px;
z-index: 2;
color: #fff;
opacity: 0;
transform: translateY(30px);
transition: all .6s ease;
}
.hmo-hero-slide .caption.active {
opacity: 1;
transform: translateY(0);
}
.caption-title {
font-size: clamp(22px, 3vw, 40px);
font-weight: 700;
line-height: 1.25;
margin: 0 0 8px;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}

.caption.active .caption-title {
animation: hero-caption-color-shift 1.2s ease forwards;
}
.caption-desc {
font-size: clamp(14px, 1.4vw, 18px);
color: rgba(255,255,255,.92);
text-shadow: 0 1px 6px rgba(0,0,0,.5);
margin: 0;
transition: color .3s ease;
}
@keyframes hero-caption-color-shift {
0%   { color: #ffffff; }
100% { color: #ffe9a8; }
}

@media (prefers-reduced-motion: reduce) {
.caption.active .caption-title {
animation: none;
color: #ffe9a8;
}
}


.hmo-hero-link:hover .caption {
transform: translateY(-4px);
}

.hmo-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 0, 0, .35);
border: 1.5px solid rgba(255, 255, 255, .7);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
font-size: 18px;
backdrop-filter: blur(2px);
transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.hmo-hero-nav i { color: #fff; }
.hmo-hero-nav:hover {
background: #005aad; 
border-color: #005aad;
transform: translateY(-50%) scale(1.08);
}
.hmo-hero-nav.swiper-button-disabled {
opacity: .35;
cursor: default;
pointer-events: none;
}
.hmo-hero-prev { left: 20px; }
.hmo-hero-next { right: 20px; }

@media (max-width: 767px) {
.hmo-hero-nav { width: 36px; height: 36px; font-size: 14px; }
.hmo-hero-prev { left: 10px; }
.hmo-hero-next { right: 10px; }
.hmo-hero-slide .caption { left: 6%; bottom: 12%; max-width: 90%; }
}

.hmo-newsblock-slider-wrap { position: relative; }

.hmo-news-slider .swiper-slide > [class*="col-"] {
width: 100%;
max-width: 100%;
flex: none;
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}

.hmo-news-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--hmo-primary, #005aad);
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hmo-news-nav:hover {
background: var(--hmo-primary, #005aad);
color: #fff;
}
.hmo-news-prev { left: -20px; }
.hmo-news-next { right: -20px; }
.hmo-news-nav.swiper-button-disabled {
opacity: .35;
pointer-events: none;
}

@media (max-width: 991.98px) {
.hmo-news-prev { left: -8px; }
.hmo-news-next { right: -8px; }
}

[nh-block="5467gv3"] .row > [class*="col-"] {
margin-bottom: 20px;
}
.info-category .content-category {
position: relative;
max-height: 350px;
overflow: hidden;
}

.info-category .content-category::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 85%);
pointer-events: none;
}

.info-category.is-expanded .content-category {
max-height: none;
}

.info-category.is-expanded .content-category::after {
display: none;
}

.info-category .btn-a {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--hmo-primary, #005aad);
font-weight: 600;
}
.info-category .btn-a:hover { text-decoration: underline; }

.info-category .btn-h { display: none; }
.info-category.is-expanded .btn-s { display: none; }
.info-category.is-expanded .btn-h { display: inline-flex; }
.info-category .content-category-empty {
padding: 24px 0;
text-align: center;
color: #8a8a8a;
font-style: italic;
}