mega-menu-sanpham / index.html
tatht's picture
undefined - Initial Deployment
3986511 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MITEK-style Product Menu</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*body {*/
/* background-color: #f5f5f5;*/
/* padding: 0px;*/
/* min-height: 90px;*/
/* display: flex;*/
/* flex-direction: column;*/
/* background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);*/
/*}*/
.padding-left {
padding-left: 15px;
}
.container-a {
max-width: 1250px;
margin: 0 auto;
background-color: white;
border-radius: 5px !important;
margin-top: 0px !important;
flex: 1;
position: relative;
overflow: hidden;
box-shadow: 0 4px 5px rgba(0, 105, 177, 0.3);
}
.container-a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 40%;
background: radial-gradient(circle at 20% 50%, rgba(0, 161, 225, 0.03) 0%, transparent 30%);
z-index: 0;
}
.categories-container-a {
display: flex;
gap: 1px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.category-section-a {
flex: 1 1 24%;
min-width: 280px;
}
.background-custom {
background-color: rgba(244, 245, 247, 0.5);
/* padding: 10px; */
}
.background-custom .dropdown-item-a {
min-height:40px;
padding: 12px;
margin-bottom: 8px;
border-radius: 4px;
background-color: rgba(244, 245, 247, 0.5); /* Match background-custom color */
}
.background-custom .dropdown-item-a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 105, 177, 0.15);
border: 1px solid rgba(0, 105, 177, 0.2);
background: white; /* White on hover for contrast */
color: #0165b1;
}
.background-custom .dropdown-item-a:hover .dropdown-item-title-a,
.background-custom .dropdown-item-a:hover .description-line-bold-a,
color: #0165b1;
}
.background-custom .dropdown-item-a:hover .description-line-light-a {
color: #000000; /* Changed to black for MiFSM and MiDebtCollection */
}
.background-custom .dropdown-item-content-a {
width: 100%;
display: flex;
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
}
.background-custom .dropdown-item-title-a {
font-size: 15px important;
margin-bottom: 2px !important;
text-align: center; /* Center text horizontally */
width: 100%; /* Ensure title takes full width for centering */
}
.MuiBox-root.css-8x6a44 {
flex: 1 1 24%;
min-width: 280px !important;
padding: 15px;
}
.MuiTypography-root.MuiTypography-t16.css-7wv2us {
margin-bottom: 5px;
text-transform: none !important;
font-weight: 700;
font-size:18px !important;
color: #6a6a6a !important;
letter-spacing: 0.9px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
position: relative;
}
.MuiBox-root.css-8x6a44:hover .MuiTypography-root.MuiTypography-t16.css-7wv2us::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0165b1, #00a0e1);
transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.MuiList-root.MuiList-padding.css-198iqtk,
.MuiList-root.MuiList-padding.css-2apqrh {
list-style: none;
padding: 0;
margin: 0;
}
.MuiListItem-root {
padding: 0;
}
.MuiList-root.css-198iqtk .MuiListItem-root a.MuiTypography-root {
text-decoration: none !important;
color: #333;
display: flex;
align-items: flex-start;
padding: 12px;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.MuiList-root.css-198iqtk .MuiListItem-root a.MuiTypography-root::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
}
.MuiList-root.css-198iqtk .MuiListItem-root a.MuiTypography-root:hover::before {
height: 100%;
}
.MuiList-root.css-198iqtk .MuiListItem-root a.MuiTypography-root p.MuiTypography-root {
font-weight: 700;
font-size: 18px;
margin-bottom: 5px;
color: #000000;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s ease;
position: relative;
z-index: 1;
margin-top: 0;
}
.MuiList-root.css-198iqtk .MuiListItem-root a.MuiTypography-root:hover p.MuiTypography-root {
color: #0165b1;
}
.MuiList-root.css-2apqrh {
margin-top: 20px;
}
.MuiList-root.css-2apqrh .MuiListItem-root a.MuiTypography-root {
text-decoration: none;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
transition: color 0.3s ease;
}
.MuiList-root.css-2apqrh .MuiListItem-root a.MuiTypography-root:hover {
color: #0165b1;
}
.MuiList-root.css-2apqrh .MuiListItem-root h3.MuiTypography-root {
font-size: 16px;
font-weight: 600;
margin: 0;
color: inherit;
transition: color 0.3s ease;
}
.MuiList-root.css-2apqrh .MuiListItem-root a.MuiTypography-root:hover h3.MuiTypography-root {
color: #0165b1;
}
.MuiList-root.css-2apqrh .MuiSvgIcon-root {
width: 20px;
height: 20px;
fill: #666;
transition: fill 0.3s ease, transform 0.3s ease;
}
.MuiList-root.css-2apqrh .MuiListItem-root a.MuiTypography-root:hover .MuiSvgIcon-root {
fill: #0165b1;
transform: translateX(5px);
}
.category-group-a {
margin-right: 10px;
margin-bottom: 5px;
}
.category-group-a:last-child {
margin-bottom: 0;
}
.category-title-a {
padding: 10px 15px;
margin-bottom: 5px;
font-size: 18px !important;
text-transform: none !important;
font-weight: 700;
color: #6a6a6a !important;
letter-spacing: 0.5px;
border-bottom: 1px solid #eee;
position: relative;
}
.category-title-a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(to right, #0165b1, #00a0e1);
transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.category-group-a:hover>.category-title-a::after {
width: 100%;
}
.dropdown-item-a {
text-decoration: none !important;
/* color: #333; */
display: flex;
align-items: flex-start;
padding: 12px;
border-radius: 5px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
margin-bottom: 8px;
position: relative;
overflow: hidden;
background-color: white;
min-height: 110px;
animation: fadeIn 0.1s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.dropdown-item-a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 105, 177, 0.15);
border-color: rgba(0, 105, 177, 0.2);
border: 1px solid #0069B133;
}
.dropdown-item-a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(to bottom, #0165b1, #00a0e1);
transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.dropdown-item-a:hover::before {
height: 100%;
}
.dropdown-item-icon-a {
display: flex;
align-items: center;
justify-content: center;
width: 38px !important;
height: 38px !important;
background-color: rgba(49, 130, 206, 0.1);
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
z-index: 1;
margin-top: 0px;
}
.dropdown-item-a:hover .dropdown-item-icon-a {
transform: translateY(-3px) scale(1.05);
}
.dropdown-item-icon-a img {
width: 30px !important;
height: 30px !important;
object-fit: contain;
}
.dropdown-item-content-a {
display: flex;
flex-direction: column;
width: calc(100% - 40px);
}
.dropdown-item-title-a {
font-weight: 700;
font-size: 15px !important;
margin-bottom: 5px;
color: #000000;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s ease;
position: relative;
z-index: 1;
}
.dropdown-item-a:hover .dropdown-item-title-a {
color: #0165b1;
}
.dropdown-item-description-a {
font-size: 13px;
color: #666;
line-height: 1.4;
}
.description-line-a {
margin: 1px 0;
}
.description-line-bold-a {
color: #000000;
font-weight: 400;
font-size: 13px;
transition: color 0.3s ease;
}
.dropdown-item-a:hover .description-line-bold-a {
color: #0165b1;
}
.description-line-light-a {
color: #7B7B7B;
font-size: 9px;
line-height: 1.4;
transition: color 0.3s ease;
}
.dropdown-item-a:hover .description-line-light-a {
color: #5a5a5a;
}
.first-item {
margin-top: 6px;
}
.last-item {
margin-top: 15px;
}
.product-tag-popular-a {
background: #af2317;
color: #fff;
font-size: 8px;
display: inline-flex;
align-items: center;
padding: 0px 5px;
border-radius: 5px;
gap: 3px;
font-weight: 500;
text-transform: none;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.product-tag-new-a {
background: #eba131;
color: #fff;
font-size: 8px;
display: inline-flex;
align-items: center;
padding: 0px 5px;
border-radius: 5px;
gap: 3px;
font-weight: 500;
text-transform: none;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, inter);
}
.dropdown-item-a:hover .product-tag-popular-a,
.dropdown-item-a:hover .product-tag-new-a {
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.MuiBox-root .dropdown-item-a{
background:transparent;
}
.product-tag-popular-a i,
.product-tag-new-a i {
font-size: 8px;
}
.fab-a {
position: fixed;
bottom: 20px;
right: 30px;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #1a2a6c 0%, #2a52be 100%);
color: white;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100;
border: none;
outline: none;
}
.fab-a:hover {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.fab-a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.fab-a:hover::before {
opacity: 1;
}
.fab-a i {
font-size: 24px;
transition: transform 0.3s ease;
}
.fab-a:hover i {
transform: scale(1.1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item-a:nth-child(1) {
animation-delay: 0.1s;
}
.dropdown-item-a:nth-child(2) {
animation-delay: 0.2s;
}
.dropdown-item-a:nth-child(3) {
animation-delay: 0.2s;
}
.dropdown-item-a:nth-child(4) {
animation-delay: 0.2s;
}
.dropdown-item-a:nth-child(5) {
animation-delay: 0.2s;
}
@media (max-width: 1440px) { /* Adjust based on exact 14-inch screen resolution */
.category-section-a,
.MuiBox-root.css-8x6a44 {
min-width: 23px; /* Reduced min-width */
}
/* Tiêu đề chính của từng phần (Sales Service, Customer Service, Marketing) */
.category-title-a,
.MuiTypography-root.MuiTypography-t16.css-7wv2us {
font-size: 18px; /* Ví dụ: Giảm từ 18px xuống 16px */
}
/* Tiêu đề của từng sản phẩm (MiDesk, MiCX, MiBlast, v.v.) */
.dropdown-item-title-a {
font-size: 12px; /* Ví dụ: Giảm từ 16px xuống 14px */
}
/* Tiêu đề của các sản phẩm cụ thể theo ngành (MiFSM, MiDebtCollection) */
.background-custom .dropdown-item-title-a {
font-size: 12px; /* Giảm nhỏ hơn nữa cho phù hợp */
}
}
</style>
</head>
<body>
<div class="container-a">
<div class="categories-container-a">
<div class="category-section-a padding-left">
<div class="category-group-a">
<div class="category-title-a">Sales Service</div>
<a href="https://micrm.vn/phan-mem-midesk-omnichannel/" class="dropdown-item-a first-item">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/midesk.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiDesk
<span class="product-tag-popular-a"><i class="fas fa-star"></i> Được dùng nhiều</span>
</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Omni-Channel Contact Center</div>
<div class="description-line-a description-line-light-a">Phần mềm CSKH, quản lý tương tác liền mạch với
khách hàng trên tất cả các kênh như Facebook, Zalo, Livechat,…</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-micx/" class="dropdown-item-a">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiCXM-1.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiCX
<span class="product-tag-popular-a"><i class="fas fa-star"></i> Được dùng nhiều</span>
</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">VoC, CX Management</div>
<div class="description-line-a description-line-light-a">Giải pháp giúp Doanh nghiệp nâng cao năng suất
đội ngũ Telesales & cải thiện trải nghiệm Khách hàng hiệu quả</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-misell/" class="dropdown-item-a">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiSell-1.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiSell</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Sales Calls Assistant</div>
<div class="description-line-a description-line-light-a">Hệ thống Tổng đài dành cho cuộc gọi Bán hàng,
giúp đội ngũ Kinh doanh tối ưu hiệu suất & quy trình CSKH</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-micall/" class="dropdown-item-a last-item">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/micall.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiCall</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Cloud Phone System</div>
<div class="description-line-a description-line-light-a">Hệ thống liên lạc thông minh, triển khai tổng
đài nhanh chóng mà không cần phải đầu tư thiết bị tổng đài</div>
</div>
</div>
</a>
</div>
</div>
<div class="category-section-a">
<div class="category-group-a">
<div class="category-title-a">Customer Service</div>
<a href="https://micrm.vn/phan-mem-michat/" class="dropdown-item-a first-item">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiChat-1.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiChat</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">A.I ChatBot for Business</div>
<div class="description-line-a description-line-light-a">Phần mềm giúp tự động hóa CSKH, tối ưu quy
trình hỗ trợ & nâng cao trải nghiệm giao tiếp chuyên nghiệp</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-micrm/" class="dropdown-item-a">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiCRM-2.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiCRM</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Cloud Phone System</div>
<div class="description-line-a description-line-light-a">Giải pháp giúp Doanh nghiệp tối ưu quy trình Bán hàng, quản lý & nâng cao trải nghiệm Khách hàng hiệu quả</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-misurvey/" class="dropdown-item-a">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiSurvey-1.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiSurvey
<span class="product-tag-popular-a product-tag-new-a"><i class="fas fa-star"></i> New</span>
</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Insights that Matter</div>
<div class="description-line-a description-line-light-a">Giải pháp cung cấp các dữ liệu quan trọng để tối ưu chiến lược Chăm sóc Khách hàng & hoạt động Bán hàng</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-miqa/" class="dropdown-item-a last-item">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiQA-3.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiQA</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">AI VoiceBot</div>
<div class="description-line-a description-line-light-a">Giải pháp giúp Doanh nghiệp hỗ trợ Khách hàng nhanh chóng, nâng cao trải nghiệm và tối ưu hiệu suất vận hành</div>
</div>
</div>
</a>
</div>
</div>
<div class="category-section-a">
<div class="category-group-a">
<div class="category-title-a">Marketing</div>
<a href="https://micrm.vn/phan-mem-miblast/" class="dropdown-item-a first-item">
<div class="dropdown-item-icon-a">
<img src="https://micrm.vn/wp-content/uploads/2025/03/MiBlast-1.png" alt="icon">
</div>
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiBlast</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Outbound Marketing Tool</div>
<div class="description-line-a description-line-light-a">Phần mềm giúp tự động hóa chiến dịch tiếp cận
Khách hàng, tối ưu hiệu suất & nâng cao hiệu quả tiếp thị</div>
</div>
</div>
</a>
</div>
</div>
<div class="category-section-a background-custom">
<div class="MuiBox-root css-8x6a44">
<div class="MuiBox-root css-0">
<p class="MuiTypography-root MuiTypography-t16 css-7wv2us">Industry - Specific Products</p>
<a href="https://micrm.vn/phan-mem-miblast/" class="dropdown-item-a first-item">
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiFSM</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Field Service Management</div>
<div class="description-line-a description-line-light-a">Phần mềm quản lý đội ngũ kỹ thuật hiệu quả, sắp xếp công việc linh hoạt & nâng cao chất lượng Dịch vụ Khách hàng</div>
</div>
</div>
</a>
<a href="https://micrm.vn/phan-mem-midebtcollection/" class="dropdown-item-a">
<div class="dropdown-item-content-a">
<div class="dropdown-item-title-a">MiDebtCollection</div>
<div class="dropdown-item-description-a">
<div class="description-line-a description-line-bold-a">Smart Debt Recovery</div>
<div class="description-line-a description-line-light-a">Phần mềm giúp Doanh nghiệp tối ưu hiệu suất xử lý và nâng cao tỷ lệ thu hồi nợ một cách hiệu quả, chuyên nghiệp</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tatht/mega-menu-sanpham" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>