/* =====================================================================
Modern refresh (2025) — lớp phủ trên theme Crumina.
Nạp SAU main.min.css + custome.css để ghi đè. Không sửa file theme gốc.
Gỡ file này trong master.blade.php là quay lại nguyên trạng.
Brand: xanh #00a651
===================================================================== */
:root {
--mh-primary: #00a651;
--mh-primary-2: #00c060;
--mh-ink: #16231c;
--mh-shadow: 0 10px 30px -12px rgba(16, 40, 28, .18);
--mh-shadow-lg: 0 22px 48px -18px rgba(16, 40, 28, .28);
--mh-radius: 16px;
/* Ghi đè accent tím gốc của theme (#5F0FFF) → xanh brand, áp dụng toàn trang */
--primary-accent-color: #00a651;
}
/* ---- Nhịp chữ & khử răng cưa ---- */
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.main-content-wrapper h2 {
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
}
.main-content-wrapper p { line-height: 1.7; }
/* ================= NÚT ================= */
.crumina-button {
border-radius: 10px !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
box-shadow: 0 6px 16px -8px rgba(16, 40, 28, .28);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
border: none !important;
}
/* Gọn lại các cỡ nút của theme (đang quá lớn) */
.crumina-button.button--l { padding: 12px 24px !important; font-size: 14px !important; }
.crumina-button.button--m { padding: 10px 20px !important; font-size: 14px !important; }
.crumina-button.button--xs { padding: 7px 14px !important; font-size: 13px !important; }
.crumina-button:hover {
transform: translateY(-2px);
box-shadow: var(--mh-shadow-lg);
filter: saturate(1.05);
}
.crumina-button:active { transform: translateY(0); }
/* Primary/lime → gradient xanh brand thống nhất */
.crumina-button.button--primary,
.crumina-button.button--lime,
.crumina-button.button--green {
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
}
.crumina-button.button--dark {
background-image: linear-gradient(135deg, #1f2a24, #2f4139) !important;
color: #fff !important;
}
/* ===== Khối giới thiệu "Đăng ký tên miền" — tiêu đề gradient + gạch chân mềm ===== */
.mh-domain-intro .fs-30 {
position: relative;
display: inline-block;
font-weight: 800;
letter-spacing: -.01em;
background: linear-gradient(120deg, var(--mh-primary), #0a8f6b 60%, #0e7c9c);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 18px;
padding-bottom: 12px;
}
.mh-domain-intro .fs-30::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 52px; height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
}
.mh-domain-intro .fs-24 {
color: #5b6b63;
font-weight: 500;
line-height: 1.6;
}
/* ================= Ô TÌM TÊN MIỀN ================= */
/* Một khối bo góc: icon kính lúp bên trái + nút đặc gọn bên phải */
.input-btn--inline {
position: relative;
display: flex;
align-items: center;
gap: 8px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
background: #fff;
border: 1px solid #e3ece7;
border-radius: 14px;
box-shadow: 0 8px 24px -14px rgba(16, 40, 28, .22);
padding: 6px 6px 6px 18px;
transition: border-color .18s ease, box-shadow .18s ease;
}
/* Bỏ kính lúp bên trái input */
.input-btn--inline::before { display: none; }
.input-btn--inline:focus-within {
border-color: var(--mh-primary);
box-shadow: 0 0 0 4px rgba(0, 166, 81, .12), 0 8px 24px -14px rgba(16, 40, 28, .22);
}
.input-btn--inline .input--white {
flex: 1 1 auto;
min-width: 0; /* cho phép co lại để nút không bị đẩy ra ngoài */
border: none !important;
border-radius: 0 !important;
padding: 8px 4px !important;
height: auto !important;
background: transparent !important;
font-size: 15px;
color: #16231c;
}
.input-btn--inline .input--white::placeholder { color: #9aa8a1; }
.input-btn--inline .input--white:focus { outline: none; box-shadow: none; }
.input-btn--inline .crumina-button {
position: relative !important; /* huỷ position:absolute của theme → nằm gọn trong khung */
right: auto !important;
top: auto !important;
bottom: auto !important;
max-height: none !important;
border-radius: 10px !important;
padding: 0 !important;
width: 48px;
align-self: stretch; /* giãn bằng chiều cao ô → không lệch */
min-height: 40px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0 !important; /* ẩn chữ "Kiểm Tra" (vẫn còn cho screen-reader) */
white-space: nowrap;
box-shadow: 0 8px 18px -8px rgba(0, 166, 81, .55);
flex: none;
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
}
/* Icon kính lúp trong nút */
.input-btn--inline .crumina-button::before {
content: "";
width: 19px; height: 19px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
}
.input-btn--inline .crumina-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
/* ================= THẺ (cards) chung ================= */
.crumina-info-box,
.crumina-pricing-tables-item,
.post.post-standard,
.crumina-testimonial-item {
background: #fff;
border-radius: var(--mh-radius);
box-shadow: var(--mh-shadow);
transition: transform .22s ease, box-shadow .22s ease;
overflow: hidden;
}
.crumina-info-box:hover,
.crumina-pricing-tables-item:hover,
.post.post-standard:hover,
.crumina-testimonial-item:hover {
transform: translateY(-6px);
box-shadow: var(--mh-shadow-lg);
}
/* Ưu điểm — icon (badge tròn) → tiêu đề → mô tả */
.crumina-info-box.info-box--icon-scaled {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 28px;
height: 100%;
border: 1px solid #eef3f0;
position: relative;
}
/* Đường viền trên gradient hiện khi hover */
.crumina-info-box.info-box--icon-scaled::before {
content: "";
position: absolute;
left: 24px; right: 24px; top: 0;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
opacity: 0;
transition: opacity .25s ease;
}
.crumina-info-box.info-box--icon-scaled:hover::before { opacity: 1; }
/* Icon lên đầu, gói trong badge tròn nền tint */
.crumina-info-box .info-box-thumb {
order: -1;
width: 96px;
height: 96px;
margin: 0 0 22px;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, rgba(0,166,81,.16), rgba(0,166,81,.06));
display: flex;
align-items: center;
justify-content: center;
transition: transform .3s ease, box-shadow .3s ease;
}
.crumina-info-box:hover .info-box-thumb {
transform: translateY(-4px);
box-shadow: 0 12px 26px -12px rgba(0,166,81,.45);
}
.crumina-info-box .info-box-thumb img {
max-width: 56px;
max-height: 56px;
transition: transform .3s ease;
}
.crumina-info-box:hover .info-box-thumb img { transform: scale(1.06); }
.crumina-info-box .info-box-title {
order: 1;
font-weight: 700;
font-size: 19px;
color: var(--mh-ink);
margin-bottom: 12px;
}
.crumina-info-box .info-box-content { order: 2; }
.crumina-info-box .info-box-text { color: #5b6b63; line-height: 1.65; margin: 0; }
/* Bỏ dấu chấm bullet trong danh sách mô tả (khối có ul/li) */
.crumina-info-box .info-box-content ul,
.crumina-info-box .info-box-text ul {
list-style: none;
margin: 0;
padding: 0;
}
.crumina-info-box .info-box-content li,
.crumina-info-box .info-box-text li {
color: #5b6b63;
line-height: 1.7;
}
/* ================= Khối THIẾT KẾ WEBSITE ================= */
.mh-website { position: relative; }
/* Ảnh: khung mềm nổi + glow xanh phía sau */
.mh-website-media { position: relative; }
.mh-website-media::before {
content: "";
position: absolute;
inset: 8% 12%;
background: radial-gradient(closest-side, rgba(0,166,81,.16), transparent 75%);
filter: blur(10px);
z-index: 0;
}
.mh-website-media img {
position: relative;
z-index: 1;
border-radius: 20px !important;
background: #fff;
box-shadow: 0 24px 50px -22px rgba(16,40,28,.30);
}
/* Tiêu đề + gạch chân ngắn */
.mh-website h2 {
position: relative;
display: inline-block;
padding-bottom: 14px;
margin-bottom: 6px;
}
.mh-website h2::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 56px; height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
}
/* Checklist: dấu tick → badge tròn xanh, item thoáng */
.mh-website .list--standard { margin: 0; padding: 0; list-style: none; }
.mh-website .list--standard li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 0;
margin: 0;
color: #40504a;
font-size: 15px;
line-height: 1.5;
}
.mh-website .list--standard li .crumina-icon {
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
padding: 4px;
border-radius: 50%;
background: var(--mh-primary);
fill: #fff !important;
stroke: #fff !important;
color: #fff !important;
box-shadow: 0 4px 10px -4px rgba(0,166,81,.6);
}
/* Nút XEM MẪU — căn giữa dưới nội dung cho cân */
.mh-website .universal-btn-wrapper {
margin-top: 30px;
text-align: center;
display: flex !important;
justify-content: center !important;
}
/* Mobile: thẻ ưu điểm nằm NGANG (icon trái, chữ phải) cho gọn, đỡ dài */
@media (max-width: 767px) {
.crumina-info-box.info-box--icon-scaled {
display: grid;
grid-template-columns: 64px 1fr;
grid-template-areas: "icon title" "icon text";
column-gap: 16px;
row-gap: 2px;
align-items: center;
text-align: left;
padding: 18px 20px;
}
.crumina-info-box.info-box--icon-scaled::before { display: none; }
.crumina-info-box .info-box-thumb {
grid-area: icon;
width: 64px; height: 64px;
margin: 0;
align-self: center;
}
.crumina-info-box .info-box-thumb img { max-width: 36px; max-height: 36px; }
.crumina-info-box .info-box-title {
grid-area: title;
align-self: end;
font-size: 16px;
margin-bottom: 2px;
}
.crumina-info-box .info-box-content { grid-area: text; align-self: start; }
.crumina-info-box .info-box-text,
.crumina-info-box .info-box-content li { font-size: 14px; line-height: 1.55; }
}
/* Bảng giá dịch vụ nổi bật → dạng card */
/* Gộp heading + cards vào CHUNG một dải nền để thấy rõ là một khối */
.mh-featured {
background: var(--grey-themes, #eef4fb);
padding-top: 44px;
padding-bottom: 44px;
}
.mh-featured .row.mb-5 { margin-bottom: 26px !important; }
.pricing-tables-border-bottom-wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 8px 15px 0;
background: transparent !important;
}
.pricing-tables-border-bottom-wrap > :nth-child(odd) { background: #fff !important; }
.crumina-pricing-tables-item.pricing-tables-item-border-bottom {
flex: 1 1 200px;
max-width: 240px;
border-bottom: none !important;
padding: 28px 14px !important;
text-align: center;
}
.crumina-pricing-tables-item .pricing-title { font-weight: 700; margin: 10px 0 6px; }
.crumina-pricing-tables-item .rate { font-size: 14px; white-space: nowrap; }
.crumina-pricing-tables-item .rate .price {
display: block;
color: var(--mh-primary);
font-weight: 800;
font-size: 20px;
white-space: nowrap;
margin-top: 2px;
line-height: 1.8;
}
/* Mobile/tablet: 2 thẻ/hàng cho đỡ dài (thay vì 1 thẻ/hàng = 6 hàng) */
@media (max-width: 767px) {
.pricing-tables-border-bottom-wrap { gap: 14px; padding: 6px 14px 0; }
.crumina-pricing-tables-item.pricing-tables-item-border-bottom {
flex: 1 1 calc(50% - 7px);
max-width: calc(50% - 7px);
min-width: 0;
padding: 22px 10px !important;
}
.crumina-pricing-tables-item .pricing-thumb img { max-height: 58px; }
.crumina-pricing-tables-item .pricing-title { font-size: 15px; }
.crumina-pricing-tables-item .rate { font-size: 13px; }
.crumina-pricing-tables-item .rate .price { font-size: 16px; line-height: 1.5; }
}
.crumina-pricing-tables-item .pricing-link {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; margin-top: 14px;
border-radius: 50%;
background: rgba(0,166,81,.10);
transition: background .2s ease, transform .2s ease;
}
/* Mũi tên: xanh mặc định → trắng khi hover (bỏ màu tím theme) */
.crumina-pricing-tables-item .pricing-link .crumina-icon {
fill: var(--mh-primary) !important;
color: var(--mh-primary) !important;
transition: fill .2s ease, color .2s ease;
}
.crumina-pricing-tables-item:hover .pricing-link { background: var(--mh-primary); transform: translateX(4px); }
.crumina-pricing-tables-item:hover .pricing-link .crumina-icon { fill: #fff !important; color: #fff !important; }
/* Thanh accent dưới thẻ: tím → gradient xanh brand */
.crumina-pricing-tables-item .bg-layer,
.crumina-pricing-tables-item.pricing-primary .bg-layer {
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2)) !important;
}
/* Viền thẻ + thanh xanh dưới cố định (độc lập với .bg-layer) */
.crumina-pricing-tables-item.pricing-tables-item-border-bottom {
border: 1px solid #eef3f0 !important;
border-bottom: 3px solid var(--mh-primary) !important;
}
.crumina-pricing-tables-item.pricing-tables-item-border-bottom:hover {
border-color: rgba(0,166,81,.35) !important;
border-bottom-color: var(--mh-primary) !important;
}
/* Giữ thẻ TRẮNG khi hover — tắt lớp phủ nền xanh của theme (tránh chữ trùng màu nền) */
.crumina-pricing-tables-item .bg-layer,
.crumina-pricing-tables-item:hover .bg-layer {
opacity: 0 !important;
background: transparent !important;
}
/* Ghim màu chữ khi hover để luôn đọc được */
.crumina-pricing-tables-item:hover .pricing-title { color: var(--mh-ink) !important; }
.crumina-pricing-tables-item:hover .rate { color: #5b6b63 !important; }
.crumina-pricing-tables-item:hover .rate .price { color: var(--mh-primary) !important; }
/* Blog — hàng flex để cột cao bằng nhau (theme là Bootstrap 3 float) */
.mh-blog-row {
display: flex;
flex-wrap: wrap;
}
.mh-blog-row > [class*="col-"] { display: flex; }
.mh-blog-row .post.post-standard { width: 100%; }
/* Blog — card cao bằng nhau, đáy thẳng hàng dù tiêu đề dài ngắn khác nhau */
.post.post-standard {
display: flex;
flex-direction: column;
height: 100%;
}
.post.post-standard .post-thumb { flex: none; }
.post.post-standard .post-thumb img {
width: 100%; height: 210px; object-fit: cover;
transition: transform .4s ease;
}
.post.post-standard:hover .post-thumb img { transform: scale(1.05); }
.post.post-standard .post-content {
flex: 1 1 auto;
padding: 22px;
}
.post.post-standard .post-title { font-weight: 700; }
/* Giữ chỗ vùng category để tiêu đề luôn thẳng hàng dù bài không có category */
.mh-blog-row .post-category-wrap {
min-height: 20px;
margin-bottom: 8px;
line-height: 20px;
}
/* ================= Testimonial — nền gradient xanh, card sạch ================= */
.mh-testi {
position: relative;
background:
radial-gradient(90% 70% at 50% 0%, rgba(0,166,81,.06), transparent 60%),
linear-gradient(180deg, #f6faf8 0%, #eef4f1 100%) !important;
overflow: hidden;
}
.mh-testi .container { position: relative; z-index: 1; }
.mh-testi h2 { color: var(--mh-ink) !important; }
.mh-testi h3 { color: #5b6b63 !important; font-weight: 500; }
/* Slide cao bằng nhau để card đều */
.mh-testi .swiper-wrapper { align-items: stretch; }
.mh-testi .swiper-slide { height: auto !important; display: flex; }
/* Card trắng sạch, bỏ bong bóng + đuôi — flex column để ghim tác giả xuống đáy */
.mh-testi .crumina-testimonial-item.testimonial--author-bottom {
display: flex;
flex-direction: column;
width: 100%;
background: #fff;
border-radius: 18px;
padding: 30px 30px 26px;
margin: 18px 15px !important;
border: 1px solid #e8efeb;
box-shadow: 0 16px 36px -22px rgba(16, 40, 28, .28);
position: relative;
overflow: hidden;
}
/* Đoạn review co giãn → đẩy cụm tác giả xuống đáy (mọi card thẳng hàng) */
.mh-testi .testimonial-content { flex: 1 1 auto; }
/* Ngoặc kép ôm sát câu — to, mềm, màu xanh nhạt; có mở đầu & đóng cuối */
.mh-testi .testimonial-text p::before {
content: "\201C";
color: rgba(0, 166, 81, .28);
font: 700 46px/0 Georgia, "Times New Roman", serif;
margin-right: 6px;
vertical-align: -20px;
}
.mh-testi .testimonial-text p::after {
content: "\201D";
color: rgba(0, 166, 81, .28);
font: 700 46px/0 Georgia, "Times New Roman", serif;
margin-left: 5px;
vertical-align: -20px;
}
.mh-testi .testimonial-content,
.mh-testi .testimonial-content::before,
.mh-testi .testimonial-content::after {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.mh-testi .testimonial-content::before,
.mh-testi .testimonial-content::after { display: none !important; }
.mh-testi .testimonial-content { padding: 0 !important; margin-bottom: 0 !important; }
.mh-testi .testimonial-text {
color: #40504a;
font-size: 15px;
line-height: 1.75;
margin: 0;
position: relative;
z-index: 1;
}
/* Tác giả: avatar + tên xếp hàng ngang, CĂN TRÁI, full-width dưới đường kẻ */
.mh-testi .author-content-wrap {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 14px;
width: 100% !important;
margin: 20px 0 0 !important;
padding-top: 18px;
border-top: 1px solid #eef3f0;
position: static !important;
}
.mh-testi .author-content-wrap .avatar { margin: 0 !important; flex: none; }
.mh-testi .author-content-wrap .avatar img {
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
object-fit: cover;
border: 2px solid #eafaf1;
box-shadow: 0 4px 12px -4px rgba(0, 166, 81, .5);
}
.mh-testi .author-content { text-align: left; }
.mh-testi .author-name.h6 { color: var(--mh-ink) !important; font-weight: 700; display: block; }
.mh-testi .author-company { color: var(--mh-primary); font-size: 13px; font-weight: 600; }
/* Nút prev/next → nút tròn kính mờ */
.mh-testi .swiper-btn-prev,
.mh-testi .swiper-btn-next {
width: 46px !important;
height: 46px !important;
bottom: -14px !important; /* hạ xuống để tâm nút thẳng hàng với chấm */
border-radius: 50%;
background: #fff;
border: 1px solid #dbe6e0;
box-shadow: 0 6px 16px -8px rgba(16, 40, 28, .25);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mh-testi .swiper-btn-prev:hover,
.mh-testi .swiper-btn-next:hover {
background: var(--mh-primary);
border-color: var(--mh-primary);
transform: translateY(-2px);
box-shadow: 0 10px 22px -8px rgba(0, 166, 81, .5);
}
.mh-testi .swiper-btn-prev .crumina-icon,
.mh-testi .swiper-btn-next .crumina-icon {
width: 18px; height: 18px;
fill: var(--mh-primary) !important;
stroke: var(--mh-primary) !important;
color: var(--mh-primary) !important;
transition: fill .2s ease, stroke .2s ease, color .2s ease;
}
.mh-testi .swiper-btn-prev:hover .crumina-icon,
.mh-testi .swiper-btn-next:hover .crumina-icon {
fill: #fff !important;
stroke: #fff !important;
color: #fff !important;
}
/* Chấm phân trang → pill hiện đại (xám → xanh) */
.mh-testi .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #cdd8d2 !important;
opacity: 1 !important;
transition: width .25s ease, background .25s ease;
}
.mh-testi .swiper-pagination-bullet-active {
width: 24px;
border-radius: 5px;
background: var(--mh-primary) !important;
}
/* ================= Logo khách hàng — panel trắng gom logo, căn giữa ================= */
.mh-clients-head h2 {
position: relative;
display: inline-block;
padding-bottom: 14px;
margin-bottom: 12px;
}
.mh-clients-head h2::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: 56px; height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
}
.mh-clients-head p { color: #5b6b63; }
/* Marquee: logo trôi liên tục, mờ dần ở 2 mép, dừng khi rê chuột */
.mh-clients .client-items-wrapper {
display: block !important;
overflow: hidden;
padding: 14px 0;
background: transparent;
border: none;
box-shadow: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mh-clients .mh-marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: mh-marquee 30s linear infinite;
}
.mh-clients .client-items-wrapper:hover .mh-marquee-track { animation-play-state: paused; }
@keyframes mh-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.mh-clients .clients-item {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: none;
width: auto !important;
min-width: 0 !important;
height: auto;
margin: 0 60px 0 0 !important; /* khoảng cách đều để -50% chạy liền mạch */
padding: 0;
background: transparent;
border: none;
box-shadow: none;
opacity: 1 !important; /* giữ màu gốc */
filter: none !important; /* ghi đè grayscale của theme */
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mh-clients .clients-item:hover {
transform: scale(1.14); /* hover = phóng to nhẹ (nảy) */
}
.mh-clients .clients-item img {
max-height: 48px;
width: auto !important;
object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.mh-clients .mh-marquee-track { animation: none; }
}
@media (max-width: 575px) {
.mh-clients .clients-item { margin-right: 40px !important; }
.mh-clients .clients-item img { max-height: 38px; }
}
/* ================= Nền section mềm hơn ================= */
.bg-grey { background: #f5f9f7 !important; }
/* Dải màu hero (Domains/Website/...) → pill bo tròn thanh lịch */
.slider-slides .slides-item {
border-radius: 12px 12px 0 0;
transition: transform .2s ease, filter .2s ease;
}
.slider-slides .slides-item:hover { transform: translateY(-3px); filter: brightness(1.05); }
/* Tiêu đề hero to & thoáng hơn */
.slider-content-title {
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
}
/* CTA cuối trang → gradient */
.bg-accent-primary {
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
border-radius: 20px;
margin: 0 15px 40px;
}
/* ================= CTA khuyến mãi cuối trang — card sáng, không nền xanh ================= */
.mh-cta {
background: #fff !important;
background-image: none !important;
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
padding: 10px 0 56px !important;
}
.mh-cta::before { display: none; }
/* Biến hàng thành 1 card nền xanh nhạt, bo góc, viền + bóng mềm */
.mh-cta .row {
position: relative;
overflow: hidden;
margin: 0 !important;
padding: 30px 40px;
border-radius: 22px;
background: linear-gradient(135deg, #ecfdf5 0%, #eafff6 55%, #e6faf3 100%);
border: 1px solid #cdeede;
box-shadow: 0 24px 50px -30px rgba(0, 166, 81, .5);
}
/* vệt tròn trang trí mờ */
.mh-cta .row::after {
content: "";
position: absolute;
right: -70px; top: -70px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,166,81,.10), transparent 65%);
pointer-events: none;
}
.mh-cta-text,
.mh-cta-text * {
color: var(--mh-ink) !important;
margin-bottom: 0;
}
.mh-cta-text {
font-size: 21px;
font-weight: 700;
line-height: 1.45;
}
.mh-cta-action { text-align: right; position: relative; z-index: 1; }
.mh-cta-btn.crumina-button {
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
font-weight: 700 !important;
padding: 13px 32px !important;
border-radius: 999px !important;
box-shadow: 0 12px 26px -10px rgba(0, 166, 81, .6);
}
.mh-cta-btn.crumina-button:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
@media (max-width: 767px) {
.mh-cta .row { padding: 26px 22px; text-align: center; }
.mh-cta-text { font-size: 18px; text-align: center; margin-bottom: 18px; }
.mh-cta-action { text-align: center; }
}
/* Ảnh minh hoạ bo góc mềm */
.large-section-padding img { border-radius: 14px; }
/* Section review nền tối → chữ rõ */
.section-bg2 .author-name.h6 { color: #fff; }
/* =====================================================================
FOOTER — hiện đại hoá (áp dụng site-wide)
===================================================================== */
#site-footer.footer {
position: relative;
background: linear-gradient(180deg, #0f261d 0%, #0a1b15 100%) !important;
}
/* Vạch gradient xanh trên đỉnh footer */
#site-footer.footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
}
#site-footer .footer-content {
padding-top: 58px;
padding-bottom: 42px;
}
/* Tiêu đề cột */
#site-footer .widget .fs-24 {
font-size: 16px !important;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff !important;
margin-bottom: 16px;
padding-bottom: 12px;
position: relative;
}
#site-footer .widget .fs-24::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 34px; height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
}
/* Danh sách link */
#site-footer .widget_links ul { margin: 0; padding: 0; list-style: none; }
#site-footer .widget_links ul li { margin: 0; }
#site-footer .widget_links ul li a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 0;
color: rgba(255, 255, 255, .60);
font-size: 15px;
transition: color .2s ease, transform .2s ease;
}
#site-footer .widget_links ul li a:hover {
color: #fff;
transform: translateX(4px);
}
#site-footer .widget_links ul li a .crumina-icon {
width: 9px; height: 9px;
fill: var(--mh-primary);
opacity: 0;
transition: opacity .2s ease;
}
#site-footer .widget_links ul li a:hover .crumina-icon { opacity: 1; }
/* Cột thông tin + logo */
#site-footer .w-info p {
color: rgba(255, 255, 255, .58);
line-height: 1.7;
margin: 16px 0 20px;
}
#site-footer .w-info .site-logo img { max-width: 190px; height: auto; }
/* Mạng xã hội → nút tròn */
#site-footer .socials { display: flex; gap: 10px; padding: 0; margin: 0; list-style: none; }
#site-footer .socials li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
transition: background .2s ease, transform .2s ease;
}
#site-footer .socials li a:hover {
background: var(--mh-primary);
transform: translateY(-3px);
}
#site-footer .socials li a img { width: 18px; height: 18px; }
/* Sub-footer / copyright */
#site-footer .sub-footer {
background: rgba(0, 0, 0, .28) !important;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, .06);
}
#site-footer .copyright span { color: rgba(255, 255, 255, .55); font-size: 14px; }
#site-footer .copyright a { color: var(--mh-primary); font-weight: 600; }
#site-footer .copyright a:hover { color: var(--mh-primary-2); }
/* Nút back-to-top */
.back-to-top {
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
border-radius: 50% !important;
box-shadow: 0 10px 24px -8px rgba(0, 166, 81, .6) !important;
transition: transform .2s ease !important;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top .crumina-icon { fill: #fff !important; }
/* =====================================================================
HEADER khi scroll (.header--fixed) — hiện đại hoá
===================================================================== */
#navigation.site-header {
transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
/* Trạng thái ở đỉnh: lớp phủ tối mờ dần (scrim) — tách nhẹ khỏi hero, KHÔNG blur hero */
background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 100%);
border-bottom: none;
padding: 13px 0 !important; /* gọn lại (theme để 25px) */
}
/* Vạch ảnh gradient cũ trên đỉnh → vạch xanh brand mảnh */
#navigation.site-header::before {
background-image: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2)) !important;
background-size: auto !important;
height: 3px !important;
}
/* Trạng thái đã cuộn: nền xanh đậm kính mờ + bóng + gọn lại */
#navigation.site-header.header--fixed {
background: linear-gradient(135deg, rgba(10, 38, 29, .92) 0%, rgba(9, 25, 19, .94) 100%) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .55) !important;
border-bottom-color: transparent !important;
padding: 0 !important;
}
#navigation.site-header {
padding: 0 !important;
}
/* Logo thu nhỏ mượt khi cuộn */
#navigation .navigation-header img,
#navigation .navigation-logo img {
transition: max-height .3s ease, transform .3s ease;
max-height: 36px;
width: auto;
}
#navigation.header--fixed .navigation-header img,
#navigation.header--fixed .navigation-logo img {
max-height: 36px;
}
/* Link menu: hover mượt + gạch chân xanh cho item đang chọn */
#navigation .navigation-menu > .navigation-item > .navigation-link {
position: relative;
transition: color .2s ease;
}
#navigation .navigation-menu > .navigation-item > .navigation-link::after {
content: "";
position: absolute;
left: 0; right: 100%; bottom: -4px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--mh-primary), var(--mh-primary-2));
transition: right .25s ease;
}
#navigation .navigation-menu > .navigation-item:hover > .navigation-link::after,
#navigation .navigation-menu > .navigation-item.mh-current > .navigation-link::after {
right: 0;
}
/* Nút giỏ hàng: badge số lượng nổi bật hơn */
#navigation .count-pro-cart {
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
box-shadow: 0 3px 8px -2px rgba(0, 166, 81, .7);
}
/* Icon đăng nhập */
#navigation .nav-login-icon {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .2s ease, opacity .2s ease;
}
#navigation .nav-login-icon::after { display: none !important; }
#navigation .nav-login-icon:hover { transform: translateY(-2px); opacity: .85; }
#navigation .nav-login-icon svg { display: block; }
/* =====================================================================
HERO domain-registrar style (hardcode) — brand xanh
===================================================================== */
.mh-hero {
position: relative;
overflow: hidden;
padding: 150px 0 72px;
text-align: center;
color: #fff;
background:
radial-gradient(1100px 560px at 15% -12%, rgba(0, 210, 120, .30), transparent 60%),
radial-gradient(950px 560px at 112% 118%, rgba(6, 165, 140, .38), transparent 55%),
linear-gradient(160deg, #052c1d 0%, #074b34 48%, #05433c 100%);
}
/* Lưới chấm mờ phủ toàn nền */
.mh-hero::before {
content: "";
position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
opacity: .5;
pointer-events: none;
}
/* Vệt sáng loang dưới đáy */
.mh-hero::after {
content: "";
position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
width: 130%; height: 260px; z-index: 0;
background: radial-gradient(ellipse at center bottom, rgba(0, 210, 120, .40), transparent 70%);
pointer-events: none;
}
.mh-hero-inner { position: relative; z-index: 2; }
/* Quầng sáng trôi nhẹ */
.mh-hero-dot {
position: absolute; z-index: 1; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
pointer-events: none;
animation: mh-hero-float 7s ease-in-out infinite;
}
.mh-hero-dot--1 { width: 10px; height: 10px; top: 24%; left: 12%; animation-delay: 0s; animation-duration: 7s; }
.mh-hero-dot--2 { width: 14px; height: 14px; top: 30%; right: 13%; animation-delay: 1.4s; animation-duration: 8s; }
.mh-hero-dot--3 { width: 7px; height: 7px; bottom: 26%; left: 26%; animation-delay: 2.6s; animation-duration: 6.5s; }
.mh-hero-dot--4 { width: 6px; height: 6px; top: 18%; left: 32%; animation-delay: .8s; animation-duration: 9s; }
.mh-hero-dot--5 { width: 9px; height: 9px; top: 40%; left: 6%; animation-delay: 2s; animation-duration: 7.5s; }
.mh-hero-dot--6 { width: 5px; height: 5px; top: 15%; right: 28%; animation-delay: 3.2s; animation-duration: 6s; }
.mh-hero-dot--7 { width: 11px; height: 11px; bottom: 30%; right: 8%; animation-delay: 1s; animation-duration: 8.5s; }
.mh-hero-dot--8 { width: 5px; height: 5px; bottom: 18%; right: 30%; animation-delay: 2.4s; animation-duration: 7s; }
.mh-hero-dot--9 { width: 8px; height: 8px; top: 55%; right: 20%; animation-delay: .4s; animation-duration: 9.5s; }
.mh-hero-dot--10 { width: 6px; height: 6px; top: 60%; left: 18%; animation-delay: 3s; animation-duration: 7.2s; }
.mh-hero-dot--11 { width: 4px; height: 4px; top: 12%; left: 50%; animation-delay: 1.8s; animation-duration: 6.8s; }
.mh-hero-dot--12 { width: 7px; height: 7px; bottom: 14%; left: 42%; animation-delay: 2.8s; animation-duration: 8.2s; }
.mh-hero-dot--13 { width: 5px; height: 5px; top: 20%; left: 68%; animation-delay: .6s; animation-duration: 7.8s; }
.mh-hero-dot--14 { width: 9px; height: 9px; top: 45%; right: 6%; animation-delay: 2.2s; animation-duration: 9.2s; }
.mh-hero-dot--15 { width: 4px; height: 4px; bottom: 34%; left: 40%; animation-delay: 1.2s; animation-duration: 6.4s; }
.mh-hero-dot--16 { width: 8px; height: 8px; top: 34%; left: 44%; animation-delay: 3.4s; animation-duration: 8.8s; }
.mh-hero-dot--17 { width: 6px; height: 6px; top: 66%; right: 34%; animation-delay: .2s; animation-duration: 7.6s; }
.mh-hero-dot--18 { width: 5px; height: 5px; top: 50%; left: 55%; animation-delay: 2.6s; animation-duration: 6.9s; }
@keyframes mh-hero-float {
0%, 100% { transform: translateY(0); opacity: .7; }
50% { transform: translateY(-16px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.mh-hero-dot { animation: none; }
}
/* Badge */
.mh-hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 18px; margin-bottom: 22px;
border-radius: 999px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
color: #eafff5; font-size: 14px; font-weight: 600;
}
.mh-hero-badge i { color: #ffd15c; font-size: 16px; }
/* Tiêu đề */
.mh-hero-title {
font-size: clamp(34px, 5.2vw, 60px);
font-weight: 800; letter-spacing: -.01em; line-height: 1.08;
text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.mh-hero-title span {
background: linear-gradient(90deg, #ffd15c, #ffb020);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Màn < 400px: ép "GIÁ SIÊU TỐT" xuống dòng riêng và giữ nguyên 1 dòng (không co kéo giữa cụm) */
@media (max-width: 400px) {
.mh-hero-title { font-size: 32px; }
.mh-hero-title span { display: block; white-space: nowrap; }
}
.mh-hero-sub { font-size: 16px; color: rgba(255,255,255,.82); margin: 0 0 26px; }
/* Màn < 425px: đưa "Gợi ý bằng AI" xuống dòng riêng (ẩn dấu · dẫn đầu) */
@media (max-width: 425px) {
.mh-hero-sub .mh-sub-ai { display: block; }
.mh-hero-sub .mh-sub-ai .mh-sub-sep { display: none; }
}
/* Tabs */
.mh-hero-tabs {
display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 20px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
}
.mh-hero-tab {
border: none; background: transparent; cursor: pointer; text-decoration: none;
padding: 9px 22px; border-radius: 999px;
color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; transition: .2s;
}
.mh-hero-tab.active { background: #fff; color: var(--mh-primary); box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.mh-hero-tab:not(.active):hover { color: #fff; }
/* Ô tìm kiếm */
.mh-hero-search {
display: flex; align-items: center;
max-width: 720px; margin: 0 auto 32px;
background: #fff; border-radius: 16px;
padding: 8px 8px 8px 22px;
box-shadow: 0 26px 54px -22px rgba(0,0,0,.5);
}
.mh-hero-search input {
flex: 1; border: none !important; outline: none;
background: transparent !important; color: #16231c; font-size: 16px;
padding: 12px 0 !important; height: auto !important;
}
.mh-hero-search input::placeholder { color: #9aa8a1; }
.mh-hero-search button {
flex: none; width: 52px; height: 52px; border: none; cursor: pointer; border-radius: 12px;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 10px 20px -6px rgba(0,166,81,.7); transition: transform .2s ease;
}
.mh-hero-search button:hover { transform: translateY(-2px); }
/* Thẻ giá TLD */
/* Marquee: hàng TLD tự trôi nhẹ liên tục, rê chuột thì dừng */
.mh-hero-tlds {
overflow: hidden;
padding: 6px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mh-tld-track {
display: flex;
align-items: stretch;
width: max-content;
animation: mh-tld-marquee 40s linear infinite;
}
.mh-hero-tlds:hover .mh-tld-track { animation-play-state: paused; }
@keyframes mh-tld-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.mh-hero-tlds .mh-tld {
flex: none;
margin-right: 12px; /* khoảng cách đều để -50% chạy liền mạch */
}
@media (prefers-reduced-motion: reduce) {
.mh-tld-track { animation: none; }
}
.mh-tld {
position: relative;
display: flex; flex-direction: column; align-items: flex-start;
min-width: 108px; padding: 16px 18px 14px;
border-radius: 14px; text-decoration: none; color: #fff;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.15);
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.mh-tld:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.32);
}
.mh-tld-name { font-size: 22px; font-weight: 800; line-height: 1; margin-bottom: 6px; color: #fff; }
.mh-tld-price { font-size: 13px; color: rgba(255,255,255,.85); }
.mh-tld-price del { color: rgba(255,255,255,.45); margin-right: 5px; font-size: 12px; }
.mh-tld-price b { color: #ffd15c; font-size: 15px; }
.mh-tld-badge {
position: absolute; top: -8px; right: 10px;
font-size: 10px; font-weight: 700; color: #fff;
padding: 2px 8px; border-radius: 999px; letter-spacing: .03em;
}
.mh-tld-badge.hot { background: #ef4444; }
.mh-tld-badge.sale { background: var(--mh-primary); }
@media (max-width: 767px) {
.mh-hero { padding: 116px 0 48px; }
.mh-hero-search { margin-left: 15px; margin-right: 15px; }
}
/* =====================================================================
TRANG CON: hero (.crumina-stunning-header) + breadcrumbs — hiện đại hoá
===================================================================== */
.crumina-stunning-header {
position: relative;
overflow: hidden;
padding-top: 128px !important;
background:
radial-gradient(900px 460px at 15% -14%, rgba(0, 210, 120, .28), transparent 60%),
radial-gradient(820px 460px at 112% 122%, rgba(6, 165, 140, .34), transparent 55%),
linear-gradient(160deg, #052c1d 0%, #074b34 48%, #05433c 100%) !important;
}
.crumina-stunning-header::before {
content: "";
position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.6px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 55%, transparent 100%);
opacity: .45; pointer-events: none;
}
/* Đốm trắng trôi nhẹ (starfield) — giống hero trang chủ */
.crumina-stunning-header::after {
content: "";
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(5px 5px at 12% 26%, rgba(255,255,255,.95), transparent 62%),
radial-gradient(1.5px 1.5px at 24% 62%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(3px 3px at 38% 34%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 48% 70%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(4px 4px at 58% 22%, rgba(255,255,255,.9), transparent 62%),
radial-gradient(2px 2px at 68% 55%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1.5px 1.5px at 78% 32%, rgba(255,255,255,.75), transparent 62%),
radial-gradient(5px 5px at 86% 68%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,.55), transparent 62%),
radial-gradient(3px 3px at 72% 80%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(2px 2px at 92% 45%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(1.5px 1.5px at 8% 52%, rgba(255,255,255,.65), transparent 62%),
radial-gradient(4px 4px at 33% 78%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(2.5px 2.5px at 64% 30%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1.5px 1.5px at 96% 20%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(3.5px 3.5px at 5% 34%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 30% 18%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(2px 2px at 44% 52%, rgba(255,255,255,.75), transparent 62%),
radial-gradient(4.5px 4.5px at 54% 84%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1.5px 1.5px at 66% 14%, rgba(255,255,255,.65), transparent 62%),
radial-gradient(2.5px 2.5px at 82% 48%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(3px 3px at 26% 44%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(2px 2px at 15% 68%, rgba(255,255,255,.7), transparent 62%);
animation: mh-hero-drift 8s ease-in-out infinite alternate;
}
@keyframes mh-hero-drift {
from { transform: translateY(0); opacity: .8; }
to { transform: translateY(-14px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.crumina-stunning-header::after { animation: none; }
}
.crumina-stunning-header > .container { position: relative; z-index: 2; }
.crumina-stunning-header .page-title {
font-weight: 800; letter-spacing: -.01em;
font-size: clamp(28px, 4vw, 46px); line-height: 1.12;
margin-bottom: 12px;
}
.crumina-stunning-header .page-text {
color: rgba(255, 255, 255, .85) !important;
font-size: 16px; line-height: 1.6;
}
/* Breadcrumbs sạch, mảnh */
.crumina-breadcrumbs {
background: #f5f9f7 !important;
padding: 13px 0 !important;
border-bottom: 1px solid #eef3f0;
}
.crumina-breadcrumbs::before,
.crumina-breadcrumbs::after { display: none !important; }
.crumina-breadcrumbs .breadcrumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 0; padding: 0; list-style: none;
}
.crumina-breadcrumbs .breadcrumbs-item {
display: inline-flex; align-items: center; font-size: 14px;
margin: 0 !important; padding: 0 !important;
}
.crumina-breadcrumbs .breadcrumbs-item::before,
.crumina-breadcrumbs .breadcrumbs-item::after { content: none !important; }
.crumina-breadcrumbs .breadcrumbs-item + .breadcrumbs-item::before {
content: "\203A" !important;
color: #9aa8a1; margin-right: 8px; font-size: 15px;
display: inline !important;
}
.crumina-breadcrumbs .breadcrumbs-item a { color: #5b6b63; transition: color .2s ease; }
.crumina-breadcrumbs .breadcrumbs-item a:hover { color: var(--mh-primary); }
.crumina-breadcrumbs .breadcrumbs-item.active span,
.crumina-breadcrumbs .breadcrumbs-item span { color: var(--mh-ink); font-weight: 600; }
/* =====================================================================
TRANG TÊN MIỀN — các khối dưới (panel / FAQ / tips) hiện đại hoá
===================================================================== */
/* Panel kết quả (Những tên miền có thể đăng ký / Tên miền tương tự) */
.status-page-description {
background: #fff;
border: 1px solid #eef3f0;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--mh-shadow);
}
.status-page-title.bg-orange-themes,
.status-page-description .status-page-title {
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
border-radius: 0;
}
.status-page-description .status-page-title .title {
color: #fff !important;
font-weight: 700;
padding: 14px 20px;
font-size: 16px;
}
.status-page-description .table--style3 td,
.status-page-description .table--style3 th {
padding: 12px 18px !important;
border-color: #eef3f0 !important;
vertical-align: middle;
}
.status-page-description .spinner-border { color: var(--mh-primary) !important; }
/* FAQ blocks */
.crumina-faqs-block {
background: #fff;
border: 1px solid #eef3f0;
border-radius: 16px;
padding: 26px 24px;
margin-bottom: 24px;
box-shadow: var(--mh-shadow);
transition: transform .22s ease, box-shadow .22s ease;
height: calc(100% - 24px);
}
.crumina-faqs-block:hover { transform: translateY(-5px); box-shadow: var(--mh-shadow-lg); }
.crumina-faqs-block h6 {
position: relative;
font-weight: 700;
color: var(--mh-ink);
margin-bottom: 12px;
padding-left: 14px;
}
.crumina-faqs-block h6::before {
content: "";
position: absolute; left: 0; top: 2px; bottom: 2px;
width: 4px; border-radius: 999px;
background: linear-gradient(180deg, var(--mh-primary), var(--mh-primary-2));
}
.crumina-faqs-block p,
.crumina-faqs-block div { color: #5b6b63; line-height: 1.65; margin: 0; }
/* Tips đánh số — thẻ ngang, số căn đầu dòng, cao bằng nhau */
.mh-tips-row { display: flex; flex-wrap: wrap; }
.mh-tips-row > [class*="col-"] { display: flex; margin-bottom: 26px; }
.crumina-info-box.info-box--with-number {
display: flex;
align-items: flex-start;
gap: 18px;
width: 100%;
text-align: left;
background: #fff;
border: 1px solid #eef3f0;
border-radius: 18px;
padding: 26px 24px;
box-shadow: var(--mh-shadow);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.crumina-info-box.info-box--with-number:hover {
transform: translateY(-5px);
box-shadow: var(--mh-shadow-lg);
border-color: rgba(0, 166, 81, .3);
}
.info-box--with-number .info-box-title {
flex: none;
width: 46px; height: 46px; margin: 0;
border-radius: 14px;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
color: #fff; font-weight: 800; font-size: 19px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 18px -6px rgba(0, 166, 81, .55);
}
.info-box--with-number .info-box-content { flex: 1; }
.info-box--with-number .info-box-text { color: #5b6b63; line-height: 1.7; margin: 0; font-size: 15px; }
/* Card kết quả tra cứu (dòng đầu trang tên miền) */
.table--style3 tr.row {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px;
background: #fff;
border: 1px solid #eef3f0;
border-radius: 16px;
box-shadow: var(--mh-shadow);
padding: 18px 26px;
margin: 0 !important;
}
.table--style3 tr.row > td {
border: none !important;
background: transparent !important;
padding: 6px 10px !important;
}
.table--style3 tr.row .heading-title {
font-size: 22px; font-weight: 800; color: var(--mh-ink); margin: 0; line-height: 1.2;
}
.table--style3 tr.row .unavailable {
color: #ef4444 !important; font-weight: 600; margin: 0; font-size: 15px;
}
.table--style3 tr.row .available.goc,
.table--style3 tr.row .goc { color: var(--mh-primary); font-weight: 700; margin: 0; }
.table--style3 tr.row .sale.available { color: #9aa8a1; text-decoration: line-through; font-size: 13px; }
/* Nút trong card kết quả: ép nền xanh đặc + chữ trắng (bỏ kiểu bordered chữ xanh mất hút) */
.table--style3 tr.row .crumina-button,
.table--style3 tr.row .crumina-button.button--bordered {
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 8px 18px -8px rgba(0, 166, 81, .5) !important;
}
/* Ẩn vạch lime trang trí ở ô đầu (card kết quả) */
.table--style3 tr.row > td:first-child::before { display: none !important; }
/* ============ Mobile: bảng panel tên miền gọn lại ============ */
@media (max-width: 575px) {
.status-page-description .table--style3 > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid #eef3f0;
}
.status-page-description .table--style3 > tbody > tr > td {
border: none !important;
padding: 3px 4px !important;
}
.status-page-description .table--style3 > tbody > tr > td:first-child {
flex: 1 1 100%;
font-weight: 700 !important;
color: var(--mh-ink);
font-size: 15px !important;
}
.status-page-description .table--style3 > tbody > tr > td:first-child::before { display: none !important; }
.status-page-description .table--style3 > tbody > tr > td:nth-child(2) { flex: 1; text-align: left; }
.status-page-description .table--style3 > tbody > tr > td:last-child { flex: none; margin-left: auto; }
.status-page-description .table--style3 .crumina-button { width: auto !important; padding: 8px 16px !important; }
/* Card kết quả dòng đầu: căn giữa gọn */
.table--style3 tr.row { justify-content: center; text-align: center; padding: 18px; }
.table--style3 tr.row .heading-title { font-size: 19px; }
/* Hero trang con thấp lại chút */
.crumina-stunning-header { padding-top: 96px !important; }
}
/* Mobile: tips đánh số → xếp dọc (số trên, chữ dưới) cho gọn, không trôi số */
@media (max-width: 767px) {
.crumina-info-box.info-box--with-number {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.info-box--with-number .info-box-title { align-self: flex-start; }
}
/* Mobile: khối tin tức → slider vuốt, mỗi lần đúng 1 bài (không cần thư viện) */
@media (max-width: 575px) {
.mh-blog-row {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: ẩn thanh cuộn */
}
.mh-blog-row::-webkit-scrollbar { display: none; } /* Chrome/Safari: ẩn thanh cuộn */
.mh-blog-row > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
scroll-snap-align: center;
margin-bottom: 0;
padding: 0 6px;
}
}
/* Dots cho slider tin tức (mobile) */
.mh-blog-dots { display: none; }
.mh-blog-dot {
width: 8px; height: 8px; padding: 0; border: none; cursor: pointer;
border-radius: 999px; background: #cdd8d2;
transition: width .25s ease, background .25s ease;
}
.mh-blog-dot.active { width: 22px; background: var(--mh-primary); }
@media (max-width: 575px) {
.mh-blog-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
}
/* ============ Mobile: footer — giữ nhóm theo cột, 2 cột/hàng ============ */
@media (max-width: 767px) {
#site-footer .footer-content { padding: 40px 0 22px; }
#site-footer .footer-content > .container > .row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0;
}
/* Cột nhóm link: 50%, căn trái (Server vẫn nằm cùng Tên miền) */
#site-footer .footer-content > .container > .row > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
box-sizing: border-box;
padding: 0 12px;
margin-bottom: 24px;
text-align: left !important;
}
#site-footer .footer-content .widget { margin-bottom: 16px; }
#site-footer .widget .fs-24 { font-size: 15px !important; text-align: left; }
#site-footer .widget .fs-24::after { left: 0; transform: none; }
#site-footer .widget_links ul li a { font-size: 14px; justify-content: flex-start; }
/* Khối logo + mô tả + mạng xã hội: FULL-WIDTH riêng 1 hàng cuối, căn giữa */
#site-footer .footer-content > .container > .row > .mh-footer-info {
flex: 0 0 100% !important;
max-width: 100% !important;
order: 9;
text-align: center !important;
margin-top: 6px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
#site-footer .w-info { text-align: center; }
#site-footer .w-info .site-logo img { max-width: 180px; }
#site-footer .w-info .socials { justify-content: center; flex-wrap: wrap; }
#site-footer .sub-footer { padding: 14px 0; }
#site-footer .copyright { text-align: center; }
}
/* =====================================================================
GIỎ HÀNG — hiện đại hoá
===================================================================== */
/* Danh sách giỏ hàng → card + bảng sạch */
.cart .content-cart {
background: #fff;
border: 1px solid #eef3f0;
border-radius: 18px;
box-shadow: var(--mh-shadow);
padding: 6px 22px;
}
.cart .table--style2 { margin: 0; width: 100%; }
.cart .table--style2 thead th {
text-transform: uppercase;
font-size: 12px;
letter-spacing: .04em;
color: #8a978f;
font-weight: 700;
padding: 16px 12px;
border-bottom: 1px solid #eef3f0;
}
.cart .table--style2 tbody td {
padding: 18px 12px;
border-bottom: 1px solid #f2f6f4;
vertical-align: middle;
}
.cart .table--style2 tbody tr:last-child td { border-bottom: none; }
.cart .table--style2 tbody td:first-child { font-weight: 700; color: var(--mh-ink); font-size: 16px; }
.cart .price-old { color: #9aa8a1 !important; text-decoration: line-through; font-size: 12px; }
.cart .btn-remove svg { cursor: pointer; opacity: .55; transition: opacity .2s ease, transform .2s ease; }
.cart .btn-remove svg:hover { opacity: 1; transform: scale(1.15); }
.cart .btn-remove svg path { fill: #ef4444; fill-opacity: 1; }
/* Box "Tổng tiền" — bỏ viền cầu vồng, dùng card sạch */
.cart .block-border-linear-gradient { display: none !important; }
.cart .side-bar .cart-bar {
background: #fff;
border: 1px solid #eef3f0;
border-radius: 18px;
box-shadow: var(--mh-shadow);
padding: 24px !important;
}
.cart .cart-bar h4 { font-weight: 800; color: var(--mh-ink); margin-bottom: 18px; }
.cart .cart-bar .list--standard li { color: #5b6b63; padding: 10px 0; }
.cart .cart-bar .list--standard strong { color: var(--mh-ink); }
.cart .cart-bar .crumina-icon { fill: var(--mh-primary); }
.cart .btn-process { margin-top: 6px; }
.cart .btn-process .crumina-button {
background-image: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
border: none !important;
padding: 12px 42px !important;
border-radius: 12px !important;
box-shadow: 0 10px 22px -8px rgba(0, 166, 81, .5) !important;
}
/* Ô mã khuyến mãi */
.cart .box-wrap {
margin-top: 20px;
background: #fff;
border: 1px solid #eef3f0;
border-radius: 18px;
box-shadow: var(--mh-shadow);
padding: 20px;
}
/* Ô nhập mã + nút — ép flex 1 hàng (theme dùng .input-group-btn của BS3, BS4 không style) */
#coupon .frm-coupon .input-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch;
width: 100% !important;
}
#coupon .frm-coupon .form-control {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important; /* cho phép co lại, không đẩy nút ra ngoài */
border: 1px solid #e3ece7 !important;
border-right: none !important;
border-radius: 12px 0 0 12px !important;
padding: 11px 14px !important;
height: auto !important;
margin: 0 !important;
}
#coupon .frm-coupon .input-group-btn {
flex: 0 0 auto !important;
display: flex !important;
width: auto !important;
margin: 0 !important;
position: static !important;
}
#coupon .frm-coupon .btn.bg-green {
position: static !important;
display: inline-flex !important;
align-items: center;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important;
border: none !important;
border-radius: 0 12px 12px 0 !important;
padding: 0 20px !important;
font-weight: 600;
white-space: nowrap;
margin: 0 !important;
}
.cart .views-coupon-list { font-weight: 700; color: var(--mh-ink); margin: 20px 0 12px; font-size: 15px; }
/* Danh sách mã KM → thẻ dashed sạch */
.cart .coupons-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cart .coupons-list .list-item { margin: 0; }
.cart .coupons-list .list-item a {
display: flex;
align-items: stretch;
overflow: hidden;
border: 1px dashed #cdeede;
border-radius: 12px;
background: #f4fbf7;
text-decoration: none;
transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cart .coupons-list .list-item a:hover { border-color: var(--mh-primary); background: #eafaf1; transform: translateY(-2px); }
.cart .coupons-list .label {
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
color: #fff !important;
font-weight: 800; font-size: 13px;
padding: 12px 14px;
display: flex; align-items: center; justify-content: center;
white-space: nowrap; letter-spacing: .02em;
min-width: 78px;
}
.cart .coupons-list .txt { color: #40504a; font-size: 13px; padding: 10px 14px; line-height: 1.5; }
@media (max-width: 767px) {
.cart .content-cart { padding: 4px 12px; margin-bottom: 20px; }
}
/* Panel danh sách tên miền — hàng đẹp hơn */
.status-page-description .table--style3 tbody tr { transition: background .15s ease; }
.status-page-description .table--style3 tbody tr:hover td { background: #f7fbf9; }
.status-page-description .table--style3 tbody td:first-child {
font-weight: 700; color: var(--mh-ink); font-size: 15px;
}
.status-page-description .table--style3 tbody td:first-child::before { display: none !important; }
.status-page-description .table--style3 tbody td:nth-child(2) {
font-weight: 700; color: var(--mh-ink); font-size: 15px; white-space: nowrap;
}
.status-page-description .table--style3 .sale {
display: block;
color: #9aa8a1;
text-decoration: line-through;
font-size: 12px;
font-weight: 400;
margin-bottom: 2px;
}
/* Cart: bỏ viền bao tbody của theme (đã có card .content-cart) → hàng thẳng với header */
.cart .table--style2 tbody { border: none !important; }
.cart .table--style2 thead th,
.cart .table--style2 tbody td { padding-left: 12px !important; padding-right: 12px !important; }
.cart .table--style2 thead th:first-child,
.cart .table--style2 tbody td:first-child { padding-left: 4px !important; }
/* Cart list: chỉ .content-cart là card — dọn mọi viền/bóng/nền của phần tử con bên trong */
.cart .content-cart .scr-mb,
.cart .content-cart table,
.cart .content-cart thead,
.cart .content-cart tbody,
.cart .content-cart tbody tr,
.cart .content-cart thead tr {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
outline: none !important;
}
/* giữ đường kẻ mảnh phân dòng */
.cart .content-cart tbody td { border-bottom: 1px solid #f2f6f4 !important; }
.cart .content-cart tbody tr:last-child td { border-bottom: none !important; }
.cart .content-cart thead th { border-bottom: 1px solid #eef3f0 !important; }
/* Form kiểm tra bản ghi: input | select | nút — 1 hàng gọn (đè custome.css + theme) */
.input-btn--inline.check-domain {
max-width: 680px !important;
padding: 5px 6px 5px 18px !important;
gap: 0 !important;
}
.input-btn--inline.check-domain > .input--white {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
padding: 10px 6px !important;
}
.input-btn--inline.check-domain > select {
flex: 0 0 auto !important;
width: auto !important;
align-self: stretch;
border: none !important;
border-left: 1px solid #e3ece7 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 14px !important;
margin: 0 6px 0 0 !important;
font-size: 14px;
font-weight: 600;
color: var(--mh-ink);
cursor: pointer;
outline: none;
height: auto !important;
}
.input-btn--inline.check-domain > select:focus { outline: none; box-shadow: none; }
.input-btn--inline.check-domain > .crumina-button {
position: relative !important; /* huỷ position:absolute của theme */
right: auto !important;
top: auto !important;
bottom: auto !important;
flex: 0 0 auto !important;
width: 48px !important;
height: auto !important;
min-height: 40px;
align-self: stretch !important;
border-radius: 10px !important;
padding: 0 !important;
}
/* =============== Bảng giá hosting (3/4/5 gói) =============== */
/* Cho badge "Phổ Biến" nhô lên không bị cắt */
.crumina-pricing-tables-item.pricing-tables-item-standard { overflow: visible; position: relative; }
.best-value {
padding: 5px 18px !important;
font-weight: 700 !important;
letter-spacing: .03em;
color: #fff !important;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
box-shadow: 0 8px 16px -4px rgba(0, 166, 81, .55);
z-index: 3;
white-space: nowrap;
}
.pricing--best-value {
border-top: 3px solid var(--mh-primary) !important;
box-shadow: 0 22px 48px -18px rgba(0, 166, 81, .35) !important;
}
/* 5 gói/hàng trên desktop (thay cho hàng bảng ngang cũ) */
@media (min-width: 992px) {
.mh-pricing-5 > [class*="col-lg-"] {
flex: 0 0 20%;
max-width: 20%;
}
.mh-pricing-5 .pricing-tables-item-standard { padding-left: 16px; padding-right: 16px; }
.mh-pricing-5 .pricing-title { font-size: 17px; }
}
/* Tính năng dạng checkmark trong bảng giá (ZeroSSL, Backup, OnePanel, CloudLinux...) */
.pricing-tables-position .mh-feat-check {
color: #2b3648;
font-weight: 500;
}
.pricing-tables-position .mh-feat-check .mh-check {
display: inline-block;
color: var(--mh-primary);
font-weight: 800;
margin-right: 4px;
}
/* FAQ: link trong câu trả lời phải inline (theme ép ul a{display:block}) */
.crumina-accordion .card-body a,
.crumina-accordion .card-body ul li a {
display: inline !important;
color: var(--mh-primary);
font-weight: 600;
}
.crumina-accordion .card-body a:hover {
text-decoration: underline;
}
/* ===== Cloud Hosting: bảng giá dạng table ===== */
.mh-cloud-table-wrap {
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 44px -22px rgba(16, 40, 34, .28);
padding: 8px 10px;
overflow-x: auto;
}
.mh-cloud-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.mh-cloud-table thead th {
text-align: left;
font-size: 13px;
letter-spacing: .04em;
font-weight: 700;
color: #7a8699;
text-transform: uppercase;
padding: 18px 22px;
border-bottom: 1px solid #eef1f5;
}
.mh-cloud-table tbody td {
padding: 20px 22px;
font-size: 15px;
color: #2b3648;
border-bottom: 1px solid #f1f4f8;
vertical-align: middle;
}
.mh-cloud-table tbody tr:last-child td { border-bottom: none; }
.mh-cloud-table tbody tr:hover { background: #f7fbf9; }
.mh-cloud-table .mh-pkg { font-weight: 700; color: #1f2a37; }
.mh-price-cell { white-space: nowrap; }
.mh-price-cell .mh-amount { color: #e01f26; font-weight: 800; font-size: 19px; }
.mh-price-cell .mh-cur { color: #e01f26; font-weight: 800; margin-left: 2px; }
.mh-price-cell .mh-per { color: #8a94a6; font-weight: 500; }
.mh-action { text-align: right; }
.mh-reg-btn {
display: inline-block;
border: none;
cursor: pointer;
padding: 9px 26px;
border-radius: 999px;
color: #fff;
font-weight: 700;
font-size: 14px;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
box-shadow: 0 8px 16px -6px rgba(0, 166, 81, .5);
transition: transform .15s, box-shadow .15s;
}
.mh-reg-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(0, 166, 81, .6); }
/* Badge % giảm trong bộ chọn kỳ hạn */
.checkput-time .mh-disc {
display: inline-block;
margin-left: 4px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 6px;
background: #e9edf2;
color: #8a94a6;
}
.checkput-time .mh-disc-on { background: #ffe4d6; color: #e0561f; }
.checkput-time.active .mh-disc { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 640px) {
.mh-cloud-table { min-width: 0; }
.mh-cloud-table thead { display: none; }
.mh-cloud-table, .mh-cloud-table tbody, .mh-cloud-table tr, .mh-cloud-table td { display: block; width: 100%; }
.mh-cloud-table tbody tr {
border: 1px solid #eef1f5; border-radius: 14px; margin-bottom: 14px; padding: 6px 4px;
}
.mh-cloud-table tbody td {
border: none; display: flex; justify-content: space-between; align-items: center;
padding: 10px 16px; font-size: 14px;
}
.mh-cloud-table tbody td::before {
content: attr(data-label); font-weight: 700; color: #7a8699; font-size: 12px; text-transform: uppercase;
}
.mh-action { justify-content: center !important; }
.mh-action::before { display: none; }
.mh-reg-btn { width: 100%; padding: 12px; }
}
/* Cloud/AMD table: hàng gói Phổ Biến */
.mh-cloud-table tbody tr.mh-row-popular {
background: linear-gradient(90deg, rgba(0,166,81,.10), rgba(0,166,81,.03));
box-shadow: inset 3px 0 0 var(--mh-primary);
}
.mh-cloud-table tbody tr.mh-row-popular:hover { background: rgba(0,166,81,.13); }
.mh-cloud-table .mh-row-badge {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 4px 9px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
box-shadow: 0 4px 10px -3px rgba(0,166,81,.6);
}
@media (max-width: 640px) {
.mh-cloud-table tbody tr.mh-row-popular { box-shadow: none; border: 2px solid var(--mh-primary); }
}
/* Cloud Hosting: kiểu "Phổ Biến" riêng — vàng gold + sao ★ (khác kiểu xanh của AMD) */
.mh-tbl-cloud-hosting tbody tr.mh-row-popular {
background: linear-gradient(90deg, rgba(255,176,32,.14), rgba(255,176,32,.03));
box-shadow: inset 3px 0 0 #ffb020;
}
.mh-tbl-cloud-hosting tbody tr.mh-row-popular:hover { background: rgba(255,176,32,.18); }
.mh-tbl-cloud-hosting .mh-row-badge {
background: linear-gradient(135deg, #ffd15c, #ff9e0b);
color: #5a3d00;
box-shadow: 0 4px 10px -3px rgba(255,158,11,.6);
}
.mh-tbl-cloud-hosting .mh-row-badge::before { content: "★ "; }
.mh-tbl-cloud-hosting tbody tr.mh-row-popular .mh-amount { color: #d98a00; }
@media (max-width: 640px) {
.mh-tbl-cloud-hosting tbody tr.mh-row-popular { box-shadow: none; border: 2px solid #ffb020; }
}
/* ============================================================
BLOG SINGLE — giao dien hien dai (scope .mh-blog-single)
============================================================ */
.mh-blog-single { background: #f4f7f6; }
/* Hero */
.mh-blog-single .mh-article-hero {
position: relative;
padding: 116px 0 120px;
background:
radial-gradient(1100px 380px at 15% -10%, rgba(0,192,96,.28), transparent 60%),
linear-gradient(135deg, #0b3d2e 0%, #0e5a3a 55%, #127a49 100%);
overflow: hidden;
}
.mh-blog-single .mh-article-hero::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
background-size: 26px 26px; opacity: .5; pointer-events: none;
}
.mh-blog-single .mh-article-hero .container { position: relative; z-index: 1; }
.mh-blog-single .mh-article-crumbs { font-size: 13px; margin-bottom: 16px; color: rgba(255,255,255,.7); }
.mh-blog-single .mh-article-crumbs a { color: rgba(255,255,255,.85); }
.mh-blog-single .mh-article-crumbs a:hover { color: #fff; text-decoration: underline; }
.mh-blog-single .mh-article-crumbs span { margin: 0 8px; opacity: .5; }
.mh-blog-single .mh-article-title {
color: #fff; font-weight: 800; letter-spacing: -.01em;
font-size: clamp(26px, 3.4vw, 42px); line-height: 1.18; max-width: 900px; margin: 0 0 18px;
}
.mh-blog-single .mh-article-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-blog-single .mh-meta-chip {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13.5px; color: #eafff3; font-weight: 500;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
padding: 7px 14px; border-radius: 999px;
}
/* Body layout */
.mh-blog-single .mh-article-body { padding-bottom: 60px; }
.mh-blog-single .mh-article-body .row { margin-top: -80px; position: relative; z-index: 2; }
/* Article card */
.mh-blog-single .mh-article-card {
background: #fff; border-radius: 20px; padding: 34px 38px;
box-shadow: 0 24px 60px -30px rgba(11,61,46,.35);
border: 1px solid #edf1ef;
}
/* TOC */
.mh-blog-single .mh-toc {
background: linear-gradient(180deg, #f2fbf6, #eefaf3);
border: 1px solid #cdeeda; border-left: 4px solid var(--mh-primary);
border-radius: 12px; padding: 16px 20px; margin-bottom: 28px;
}
.mh-blog-single .mh-toc-head {
display: flex; align-items: center; gap: 8px;
font-weight: 700; color: #0e5a3a; font-size: 15px; margin-bottom: 8px;
}
.mh-blog-single .mh-toc .toc ul { list-style: none; margin: 0; padding-left: 0; }
.mh-blog-single .mh-toc .toc ul ul { padding-left: 16px; }
.mh-blog-single .mh-toc .toc li { margin: 5px 0; }
.mh-blog-single .mh-toc .toc a { color: #33564a; font-size: 14.5px; display: inline; text-decoration: none; }
.mh-blog-single .mh-toc .toc a:hover { color: var(--mh-primary); text-decoration: underline; }
/* Số thứ tự mục lục: nhỏ hơn chữ, đậm vừa, màu brand — không lấn át tiêu đề */
.mh-blog-single .mh-toc .toc ul > li:before {
font-size: 12.5px;
font-weight: 600;
color: var(--mh-primary);
padding-right: 8px;
white-space: nowrap;
vertical-align: baseline;
}
/* Prose */
.mh-blog-single .mh-prose { color: #2b3a34; font-size: 17px; line-height: 1.85; }
.mh-blog-single .mh-prose > *:first-child { margin-top: 0; }
.mh-blog-single .mh-prose p { margin: 0 0 18px; }
.mh-blog-single .mh-prose h2, .mh-blog-single .mh-prose h3, .mh-blog-single .mh-prose h4 {
color: #143a2c; font-weight: 700; line-height: 1.3; scroll-margin-top: 90px;
}
.mh-blog-single .mh-prose h2 { font-size: 25px; margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e9f2ee; }
.mh-blog-single .mh-prose h3 { font-size: 20px; margin: 26px 0 12px; }
.mh-blog-single .mh-prose h4 { font-size: 18px; margin: 22px 0 10px; }
.mh-blog-single .mh-prose ul, .mh-blog-single .mh-prose ol { margin: 0 0 18px; padding-left: 22px; }
.mh-blog-single .mh-prose li { margin: 7px 0; }
.mh-blog-single .mh-prose ul li::marker { color: var(--mh-primary); }
.mh-blog-single .mh-prose a { color: var(--mh-primary); font-weight: 600; text-decoration: none; display: inline; }
.mh-blog-single .mh-prose a:hover { text-decoration: underline; }
.mh-blog-single .mh-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; box-shadow: 0 12px 30px -16px rgba(0,0,0,.35); }
.mh-blog-single .mh-prose blockquote {
margin: 22px 0; padding: 4px 20px; border-left: 4px solid var(--mh-primary);
background: #f4faf7; border-radius: 0 10px 10px 0; color: #3a4a43; font-style: italic;
}
.mh-blog-single .mh-prose code { background: #eef3f1; color: #0e5a3a; padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.mh-blog-single .mh-prose pre { background: #0f241c; color: #d6f5e5; padding: 16px 18px; border-radius: 12px; overflow-x: auto; margin: 0 0 20px; }
.mh-blog-single .mh-prose pre code { background: none; color: inherit; padding: 0; }
.mh-blog-single .mh-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; overflow: hidden; border-radius: 10px; }
.mh-blog-single .mh-prose th, .mh-blog-single .mh-prose td { border: 1px solid #e5ece9; padding: 10px 14px; text-align: left; }
.mh-blog-single .mh-prose th { background: #f2f7f5; font-weight: 700; color: #143a2c; }
/* Tags */
.mh-blog-single .mh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #eef2f0; }
.mh-blog-single .mh-tags-label { font-weight: 700; color: #143a2c; margin-right: 4px; }
.mh-blog-single .mh-tag { display: inline-block; font-size: 13.5px; font-weight: 600; color: #0e5a3a; background: #eafaf1; border: 1px solid #cdeeda; padding: 5px 13px; border-radius: 999px; transition: .15s; }
.mh-blog-single .mh-tag:hover { background: var(--mh-primary); color: #fff; border-color: var(--mh-primary); }
/* Sidebar */
.mh-blog-single .mh-sidebar { display: flex; flex-direction: column; gap: 20px; }
.mh-blog-single .mh-widget { background: #fff; border: 1px solid #edf1ef; border-radius: 16px; padding: 20px 20px; box-shadow: 0 14px 40px -30px rgba(11,61,46,.3); }
.mh-blog-single .mh-widget-title { position: relative; font-size: 16px; font-weight: 700; color: #143a2c; margin: 0 0 14px; padding-left: 12px; }
.mh-blog-single .mh-widget-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px; background: linear-gradient(var(--mh-primary), var(--mh-primary-2)); }
.mh-blog-single .mh-widget-search { position: relative; }
.mh-blog-single .mh-widget-search input { width: 100%; border: 1px solid #dfe7e3; background: #f7faf9; border-radius: 999px; padding: 11px 46px 11px 16px; font-size: 14.5px; outline: none; transition: .15s; }
.mh-blog-single .mh-widget-search input:focus { border-color: var(--mh-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,166,81,.12); }
.mh-blog-single .mh-widget-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mh-blog-single .mh-widget-cats { list-style: none; margin: 0; padding: 0; }
.mh-blog-single .mh-widget-cats li + li { border-top: 1px solid #f0f4f2; }
.mh-blog-single .mh-widget-cats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; color: #33564a; font-weight: 500; font-size: 14.5px; text-decoration: none; transition: .15s; }
.mh-blog-single .mh-widget-cats a:hover { color: var(--mh-primary); padding-left: 8px; }
.mh-blog-single .mh-widget-cats svg { color: #b9c7c1; flex: 0 0 auto; }
.mh-blog-single .mh-widget-cats a:hover svg { color: var(--mh-primary); }
.mh-blog-single .mh-widget-related { display: flex; flex-direction: column; gap: 6px; }
.mh-blog-single .mh-related-item { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; transition: .15s; }
.mh-blog-single .mh-related-item:hover { background: #f4faf7; }
.mh-blog-single .mh-related-thumb { flex: 0 0 62px; }
.mh-blog-single .mh-related-thumb img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; display: block; }
.mh-blog-single .mh-related-body { display: flex; flex-direction: column; gap: 4px; }
.mh-blog-single .mh-related-title { font-size: 14px; font-weight: 600; color: #1f3a30; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mh-blog-single .mh-related-item:hover .mh-related-title { color: var(--mh-primary); }
.mh-blog-single .mh-related-date { font-size: 12px; color: #93a49c; }
/* Bai viet khac */
.mh-blog-single .mh-article-more { padding: 56px 0 70px; background: #fff; border-top: 1px solid #eef2f0; }
.mh-blog-single .mh-more-head { text-align: center; margin-bottom: 34px; }
.mh-blog-single .mh-more-head h3 { font-weight: 800; color: #143a2c; font-size: 26px; margin: 0 0 6px; }
.mh-blog-single .mh-more-head p { color: #7d8f88; margin: 0; }
.mh-blog-single .mh-more-card { display: block; background: #fff; border: 1px solid #edf1ef; border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 14px 40px -28px rgba(11,61,46,.3); transition: transform .18s, box-shadow .18s; height: 100%; }
.mh-blog-single .mh-more-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(11,61,46,.4); }
.mh-blog-single .mh-more-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: #eef3f1; }
.mh-blog-single .mh-more-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mh-blog-single .mh-more-card:hover .mh-more-thumb img { transform: scale(1.05); }
.mh-blog-single .mh-more-title { display: block; padding: 16px 18px 20px; font-weight: 700; color: #1f3a30; line-height: 1.45; font-size: 15.5px; }
@media (max-width: 767px) {
.mh-blog-single .mh-article-card { padding: 22px 18px; border-radius: 16px; }
.mh-blog-single .mh-article-body .row { margin-top: -70px; }
.mh-blog-single .mh-prose { font-size: 16px; }
}
/* Dong bo dom sang hero blog giong trang con / trang chu (starfield + drift) */
.mh-blog-single .mh-article-hero .container { z-index: 2; }
.mh-blog-single .mh-article-hero::before {
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.6px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 55%, transparent 100%);
opacity: .45;
}
.mh-blog-single .mh-article-hero::after {
content: "";
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background-repeat: no-repeat;
background-image:
radial-gradient(5px 5px at 12% 26%, rgba(255,255,255,.95), transparent 62%),
radial-gradient(1.5px 1.5px at 24% 62%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(3px 3px at 38% 34%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 48% 70%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(4px 4px at 58% 22%, rgba(255,255,255,.9), transparent 62%),
radial-gradient(2px 2px at 68% 55%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1.5px 1.5px at 78% 32%, rgba(255,255,255,.75), transparent 62%),
radial-gradient(5px 5px at 86% 68%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,.55), transparent 62%),
radial-gradient(3px 3px at 72% 80%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(2px 2px at 92% 45%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(1.5px 1.5px at 8% 52%, rgba(255,255,255,.65), transparent 62%),
radial-gradient(4px 4px at 33% 78%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(2.5px 2.5px at 64% 30%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1.5px 1.5px at 96% 20%, rgba(255,255,255,.7), transparent 62%),
radial-gradient(3.5px 3.5px at 5% 34%, rgba(255,255,255,.85), transparent 62%),
radial-gradient(1px 1px at 30% 18%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(2px 2px at 44% 52%, rgba(255,255,255,.75), transparent 62%),
radial-gradient(4.5px 4.5px at 54% 84%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1.5px 1.5px at 66% 14%, rgba(255,255,255,.65), transparent 62%),
radial-gradient(2.5px 2.5px at 82% 48%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,.6), transparent 62%),
radial-gradient(3px 3px at 26% 44%, rgba(255,255,255,.8), transparent 62%),
radial-gradient(2px 2px at 15% 68%, rgba(255,255,255,.7), transparent 62%);
animation: mh-hero-drift 8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.mh-blog-single .mh-article-hero::after { animation: none; }
}
/* Cham phan trang slider "Bai viet khac" (blog) — pill giong trang chu */
.mh-blog-single .related-posts-slider .swiper-pagination { margin-top: 26px; }
.mh-blog-single .swiper-pagination-bullet {
width: 8px; height: 8px;
background: #cdd8d2 !important;
opacity: 1 !important;
border-radius: 5px;
border: none !important;
transition: width .25s ease, background .25s ease;
}
.mh-blog-single .swiper-pagination-bullet-active {
width: 24px;
border-radius: 5px;
background: var(--mh-primary) !important;
}
/* ===== BLOG LIST (/blog) — card bai viet + chuyen muc doc ===== */
.mh-blog-single .mh-post-body { padding: 16px 18px 20px; }
.mh-blog-single .mh-post-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mh-blog-single .mh-post-cats a {
font-size: 12px; font-weight: 700; color: #0e5a3a; text-transform: uppercase; letter-spacing: .02em;
background: #eafaf1; border: 1px solid #cdeeda; padding: 2px 9px; border-radius: 999px; text-decoration: none; display: inline;
}
.mh-blog-single .mh-post-cats a:hover { background: var(--mh-primary); color: #fff; border-color: var(--mh-primary); }
.mh-blog-single .mh-post-title {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
font-weight: 700; color: #1f3a30; line-height: 1.45; font-size: 16px; text-decoration: none;
}
.mh-blog-single .mh-more-card:hover .mh-post-title { color: var(--mh-primary); }
/* Chuyen muc dang chon */
.mh-blog-single .mh-widget-cats a.is-active { color: var(--mh-primary); font-weight: 700; }
.mh-blog-single .mh-widget-cats a.is-active svg { color: var(--mh-primary); }
/* Phan trang */
.mh-blog-single .mh-pagination { margin-top: 10px; }
.mh-blog-single .mh-pagination nav { display: flex; justify-content: center; }
.mh-blog-single .mh-pagination ul,
.mh-blog-single .mh-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
.mh-blog-single .mh-pagination a,
.mh-blog-single .mh-pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 12px;
border-radius: 10px; border: 1px solid #e2eae6; background: #fff; color: #33564a;
font-weight: 600; text-decoration: none; transition: .15s;
}
.mh-blog-single .mh-pagination a:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-blog-single .mh-pagination .active span,
.mh-blog-single .mh-pagination [aria-current] span {
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)); color: #fff; border-color: transparent;
}
.mh-blog-single .mh-pagination .disabled span { opacity: .45; }
/* /blog: reset row long (bai viet) de cot bai va sidebar thang hang */
.mh-blog-single .mh-article-body .sorting-container { margin-top: 0 !important; }
/* /blog mobile (<992px): an khoi Chuyen muc, chi giu Tim kiem + them khoang cach truoc bai */
@media (max-width: 991px) {
.mh-blog-single .mh-widget--cats { display: none; }
.mh-blog-single .mh-article-body .col-lg-4 { margin-bottom: 26px; }
}
/* /blog: sidebar dinh duoi menu khi cuon (desktop) */
@media (min-width: 992px) {
.mh-blog-single .mh-sidebar {
position: -webkit-sticky;
position: sticky;
top: 84px;
align-self: flex-start;
}
}
/* /blog mobile: cho o Tim kiem dinh len khi cuon */
@media (max-width: 991px) {
.mh-blog-single .mh-article-body .col-lg-4 {
position: -webkit-sticky;
position: sticky;
top: 62px;
z-index: 30;
background: #f4f7f6;
padding-top: 10px;
}
.mh-blog-single .mh-article-body .col-lg-4 .mh-widget {
box-shadow: 0 10px 26px -12px rgba(11,61,46,.45);
}
}
/* Menu mobile mo (drawer .navigation-body.is-visible): ep header nen toi dong nhat, KHONG transition -> muot, het vet trang. Bo JS toggle header--fixed. */
#navigation.site-header:has(.navigation-body.is-visible) {
background: linear-gradient(135deg, #0a2a1e 0%, #071b13 100%) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
transition: none !important;
}
/* ============================================================
MENU MOBILE (drawer off-canvas < 992px) — danh sach ro rang
============================================================ */
@media (max-width: 991px) {
/* Nen drawer: toi dac, dong nhat -> tuong phan cao */
#navigation .navigation-body {
background: #0c2019 !important;
box-shadow: 8px 0 40px -10px rgba(0, 0, 0, .55);
}
/* Hang logo + nut dong */
#navigation .navigation-body-header {
padding: 18px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#navigation .navigation-body-close-button {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
color: #fff !important; font-size: 18px;
background: rgba(255, 255, 255, .10);
transition: .18s;
}
#navigation .navigation-body-close-button:hover { background: var(--mh-primary); color: #fff !important; }
/* Danh sach: hang full-width, duong ke ro */
#navigation .navigation-menu { padding: 0 !important; }
#navigation .navigation-menu > .navigation-item {
border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
/* Link cap 1: chu trang ro, dam */
#navigation .navigation-menu > .navigation-item > .navigation-link {
display: flex; align-items: center;
padding: 16px 22px !important;
color: #ffffff !important;
font-weight: 600; font-size: 15px; letter-spacing: .03em;
text-transform: uppercase;
transition: background .15s, color .15s;
}
#navigation .navigation-menu > .navigation-item > .navigation-link::after { display: none !important; }
#navigation .navigation-menu > .navigation-item > .navigation-link:hover {
background: rgba(255, 255, 255, .07) !important;
color: #fff !important;
}
/* Item dang chon: vach xanh + nen tinh te (khong phu xanh choi) */
#navigation .navigation-menu > .navigation-item.is-active > .navigation-link,
#navigation .navigation-menu > .navigation-item.mh-current > .navigation-link {
background: rgba(0, 166, 81, .14) !important;
color: #fff !important;
box-shadow: inset 3px 0 0 var(--mh-primary);
}
/* Submenu con: nen toi hon, thut le, chu sang */
/* Container submenu: KHONG padding/margin -> khi thu gon khong chua khoang trong */
#navigation .navigation-dropdown,
#navigation .navigation-submenu,
#navigation .navigation-megamenu,
#navigation .navigation-megamenu-container,
#navigation .navigation-row,
#navigation .navigation-col {
background: rgba(0, 0, 0, .22) !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
#navigation .navigation-megamenu-container,
#navigation .navigation-row,
#navigation .navigation-col { background: transparent !important; }
/* Link chu (dropdown don gian: Ten mien, SSL, Email...) */
#navigation .navigation-dropdown-link,
#navigation .navigation-list a {
display: block;
padding: 12px 22px 12px 34px !important;
color: rgba(255, 255, 255, .82) !important;
font-size: 14px; font-weight: 500; text-transform: none;
}
/* Mega-menu Hosting: moi muc = 1 hang icon + ten, DEU nhau */
#navigation .navigation-hosting-item {
display: flex !important;
align-items: center; gap: 12px;
padding: 10px 22px !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, .88) !important;
font-size: 14px; font-weight: 500; text-transform: none;
}
#navigation .navigation-hosting-item-img {
flex: 0 0 44px;
width: 44px !important; height: 44px !important;
margin: 0 !important;
border-radius: 9px;
object-fit: contain;
}
#navigation .navigation-dropdown-link:hover,
#navigation .navigation-list a:hover,
#navigation .navigation-hosting-item:hover {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
}
/* Gio hang / dang nhap: CHI ICON, can trai dong nhat, deu nhau */
#navigation .navigation-menu > .navigation-item .shoping-cart,
#navigation .navigation-menu > .navigation-item > .nav-login-icon {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
padding: 16px 22px !important;
}
#navigation .navigation-menu > .navigation-item .shoping-cart a {
display: inline-flex !important; align-items: center;
width: 26px; height: 26px;
}
#navigation .navigation-menu > .navigation-item .shoping-cart svg,
#navigation .navigation-menu > .navigation-item .nav-login-icon svg {
width: 24px !important; height: 24px !important;
opacity: .9;
}
}
/* VPS: 4 goi/hang (8 goi -> 2 hang 4+4) + khoang cach giua cac hang */
@media (min-width: 992px) {
.mh-pricing-4 > [class*="col-lg-"] {
flex: 0 0 25%;
max-width: 25%;
/* !important de thang class mb-lg-0 (bootstrap) dang xoa margin */
margin-bottom: 30px !important;
}
}
.mh-pricing-4 > [class*="col-lg-"] { margin-bottom: 24px !important; } /* mobile/tablet cung co khoang cach */
/* SSL specs: ✓ xanh treo ben trai, text chay tu nhien (khong flex -> khong tach label/value 2 phia) */
.pricing-tables-position .mh-ssl-spec {
display: block;
position: relative;
text-align: left;
padding-left: 24px;
line-height: 1.5;
font-size: 14px;
}
.pricing-tables-position .mh-ssl-spec .mh-check {
position: absolute;
left: 3px;
top: 0;
color: var(--mh-primary);
font-weight: 800;
}
/* ===== Danh sách mã khuyến mãi ở giỏ hàng — đồng đều, gọn ===== */
.mh-coupons { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mh-coupons .list-item { margin: 0; }
.mh-coupons .list-item a {
display: flex; align-items: stretch; gap: 0;
border-radius: 10px; overflow: hidden; text-decoration: none;
box-shadow: 0 2px 8px -4px rgba(16,40,34,.25);
cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.mh-coupons .list-item a:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -6px rgba(0,166,81,.5);
}
/* Cột mã: rộng cố định, gradient xanh, chữ trắng */
.mh-coupons .label.label-default {
flex: 0 0 118px; max-width: 118px;
display: flex; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
color: #fff !important; font-weight: 800; font-size: 12.5px; letter-spacing: .01em;
padding: 10px 8px; margin: 0; border-radius: 0;
white-space: normal; word-break: break-word; line-height: 1.2;
}
/* Cột mô tả: nền xanh nhạt, tối đa 2 dòng rồi "…" */
.mh-coupons .txt {
flex: 1 1 auto; min-width: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
padding: 10px 12px; background: #eafaf1; color: #21463a;
font-size: 13px; line-height: 1.45;
}
/* ===== Ô nhập mã + badge đã áp (giỏ hàng) ===== */
.mh-coupon-input {
display: flex; align-items: stretch;
border: 1px solid #dfe7e3; border-radius: 12px; overflow: hidden;
background: #fff; transition: border-color .15s, box-shadow .15s;
}
.mh-coupon-input:focus-within {
border-color: var(--mh-primary);
box-shadow: 0 0 0 3px rgba(0,166,81,.12);
}
.mh-coupon-input input {
flex: 1 1 auto; min-width: 0;
border: none; outline: none; background: transparent;
padding: 0 14px; height: 46px; font-size: 14px; color: #223;
}
.mh-coupon-input input::placeholder { color: #9aa8a2; }
.mh-coupon-input button {
flex: 0 0 auto; border: none; cursor: pointer;
padding: 0 20px; height: 46px; font-weight: 700; font-size: 14px; color: #fff;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
transition: filter .15s;
}
.mh-coupon-input button:hover { filter: brightness(1.06); }
.mh-applied-coupon {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 10px; padding: 10px 12px;
background: #eafaf1; border: 1px solid #cdeeda; border-radius: 10px;
}
.mh-applied-info {
display: flex; align-items: flex-start; gap: 8px;
color: #0e7a45; font-size: 13px; font-weight: 500; line-height: 1.4; min-width: 0;
}
.mh-applied-info b { font-weight: 800; }
.mh-applied-check {
flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--mh-primary); color: #fff; border-radius: 50%;
font-size: 11px; font-weight: 900;
}
.mh-applied-remove {
flex: 0 0 auto; color: #e01f26; font-size: 12.5px; font-weight: 600; white-space: nowrap;
text-decoration: none;
}
.mh-applied-remove:hover { text-decoration: underline; color: #b3161c; }
/* ===== Trang tìm kiếm ===== */
.mh-blog-single .mh-search-meta {
margin: 10px 0 0; color: rgba(255,255,255,.9); font-size: 15px; position: relative; z-index: 2;
}
.mh-blog-single .mh-search-meta b { color: #fff; }
.mh-blog-single .mh-search-empty {
text-align: center; padding: 54px 26px; background: #fff; border: 1px solid #edf1ef;
border-radius: 18px; box-shadow: 0 14px 40px -30px rgba(11,61,46,.3);
}
.mh-blog-single .mh-search-empty svg { color: var(--mh-primary); opacity: .55; margin-bottom: 14px; }
.mh-blog-single .mh-search-empty h5 { font-weight: 800; color: #1f3a30; margin: 0 0 8px; font-size: 19px; }
.mh-blog-single .mh-search-empty p { color: #6a7c74; font-size: 14.5px; margin: 0 auto 20px; max-width: 420px; line-height: 1.6; }
.mh-blog-single .mh-search-allbtn {
display: inline-block; padding: 11px 24px; border-radius: 999px; text-decoration: none;
color: #fff; font-weight: 700; font-size: 14px;
background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
box-shadow: 0 12px 26px -12px rgba(0,166,81,.6); transition: transform .16s, box-shadow .16s;
}
.mh-blog-single .mh-search-allbtn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(0,166,81,.7); color: #fff; }
/* ===== Trang thanh toán (checkout) ===== */
.mh-checkout { padding: 42px 0 72px; background: #f6f9f8; }
.mh-checkout .mh-co-card { background: #fff; border: 1px solid #edf1ef; border-radius: 16px; box-shadow: 0 14px 40px -30px rgba(11,61,46,.3); overflow: hidden; }
.mh-checkout .mh-co-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #eef3f1; }
.mh-checkout .mh-co-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)); color: #fff; display: grid; place-items: center; }
.mh-checkout .mh-co-ico svg { width: 20px; height: 20px; }
.mh-checkout .mh-co-card-head h4 { margin: 0; font-size: 16px; font-weight: 800; color: #1f3a30; }
.mh-checkout .mh-co-card-head p { margin: 4px 0 0; font-size: 13px; color: #6a7c74; line-height: 1.55; }
.mh-checkout .mh-co-body { padding: 22px; }
.mh-checkout .mh-co-body.p-0 { padding: 0; }
.mh-checkout .mh-co-scroll { overflow-x: auto; }
/* Fields */
.mh-checkout .form-group { margin-bottom: 16px; }
.mh-checkout .form-group:last-child { margin-bottom: 0; }
.mh-checkout .control-label { display: block; font-size: 13px; font-weight: 600; color: #37514a; margin-bottom: 6px; }
.mh-checkout .txt-red { color: #e01f26; }
.mh-checkout .form-control { width: 100%; border: 1px solid #dfe7e3; background: #f7faf9; border-radius: 10px; padding: 11px 14px; font-size: 14px; line-height: 1.4; color: #1f3a30; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; height: auto; }
.mh-checkout .form-control:focus { border-color: var(--mh-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,166,81,.12); }
.mh-checkout select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7c74' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.mh-checkout textarea.form-control { resize: vertical; min-height: 82px; }
.mh-checkout .form-inline { display: flex; gap: 10px; align-items: stretch; }
.mh-checkout .form-inline .sex { max-width: 92px; flex: 0 0 auto; }
/* Bảng đơn hàng */
.mh-checkout .mh-co-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.mh-checkout .mh-co-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa8a2; font-weight: 700; padding: 13px 22px; border-bottom: 1px solid #eef3f1; white-space: nowrap; }
.mh-checkout .mh-co-table thead th:last-child { text-align: right; }
.mh-checkout .mh-co-table tbody td { padding: 14px 22px; font-size: 14px; color: #4a5f57; border-bottom: 1px solid #f2f6f4; vertical-align: top; }
.mh-checkout .mh-co-table tbody tr:last-child td { border-bottom: none; }
.mh-checkout .mh-co-table .mh-co-name { font-weight: 700; color: #1f3a30; }
.mh-checkout .mh-co-table td:last-child { text-align: right; font-weight: 700; color: var(--mh-primary); white-space: nowrap; }
.mh-checkout .mh-co-table .price-old { display: inline-block; margin-top: 2px; font-size: 12px; color: #a8b3ad; text-decoration: line-through; font-weight: 500; }
/* Tóm tắt bên phải */
.mh-checkout .mh-co-summary { position: sticky; top: 90px; background: #fff; border: 1px solid #edf1ef; border-radius: 16px; box-shadow: 0 16px 44px -26px rgba(11,61,46,.4); padding: 22px; }
.mh-checkout .mh-co-summary > h4 { font-size: 17px; font-weight: 800; color: #1f3a30; text-align: center; margin: 0 0 16px; }
.mh-checkout .mh-co-lines { display: flex; flex-direction: column; gap: 11px; padding-bottom: 14px; margin-bottom: 2px; }
.mh-checkout .mh-co-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: #5a6d65; }
.mh-checkout .mh-co-row strong { font-weight: 700; color: #1f3a30; white-space: nowrap; }
.mh-checkout .mh-co-row--minus strong { color: #e01f26; }
.mh-checkout .mh-co-total { padding-top: 14px; border-top: 1px dashed #dbe6e1; font-size: 15px; }
.mh-checkout .mh-co-total span { font-weight: 700; color: #1f3a30; }
.mh-checkout .mh-co-total strong { font-size: 21px; color: var(--mh-primary); }
/* Toggle VAT */
.mh-checkout .mh-vat-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #37514a; cursor: pointer; margin: 16px 0 14px; user-select: none; }
.mh-checkout .mh-vat-toggle input { width: 18px; height: 18px; accent-color: var(--mh-primary); cursor: pointer; }
.mh-checkout .mh-co-vatbox { padding: 14px; margin-bottom: 14px; background: #f7faf9; border: 1px solid #eef3f1; border-radius: 12px; }
/* Nút thanh toán */
.mh-checkout .mh-co-pay { width: 100%; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)); color: #fff; font-weight: 700; font-size: 15px; padding: 13px 20px; border-radius: 12px; box-shadow: 0 14px 28px -12px rgba(0,166,81,.6); transition: transform .16s, box-shadow .16s; cursor: pointer; }
.mh-checkout .mh-co-pay:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -12px rgba(0,166,81,.72); color: #fff; }
.mh-checkout .mh-co-pay svg { width: 18px; height: 18px; }
.mh-checkout .mh-co-back { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #6a7c74; text-decoration: none; }
.mh-checkout .mh-co-back:hover { color: var(--mh-primary); }
@media (max-width: 991px) { .mh-checkout .mh-co-summary { position: static; } }
/* ===== Mẫu giao diện demo (trang chủ) ===== */
.mh-templates-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.mh-templates-head h2 { font-weight: 800; color: #1f3a30; margin: 0 0 10px; }
.mh-templates-head p { color: #6a7c74; font-size: 15.5px; margin: 0; line-height: 1.6; }
.mh-templates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mh-tpl-card { background: #fff; border: 1px solid #edf1ef; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px -30px rgba(11,61,46,.35); transition: transform .18s, box-shadow .18s; }
.mh-tpl-card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -26px rgba(11,61,46,.45); }
.mh-tpl-thumb { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #eef3f1; }
.mh-tpl-thumb img { width: 100%; transition: transform .4s ease; }
.mh-tpl-card:hover .mh-tpl-thumb img { transform: scale(1.04); }
.mh-tpl-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11,61,46,.55); opacity: 0; transition: opacity .2s; text-decoration: none; }
.mh-tpl-card:hover .mh-tpl-overlay { opacity: 1; }
.mh-tpl-overlay span { background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 999px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.4); }
.mh-tpl-body { padding: 16px 18px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-tpl-body h3 { font-size: 15.5px; font-weight: 700; color: #1f3a30; margin: 0; line-height: 1.4; }
.mh-tpl-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--mh-primary); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.mh-tpl-link:hover { color: #0a8f4a; }
@media (max-width: 991px) { .mh-templates-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 575px) { .mh-templates-grid { grid-template-columns: 1fr; } }
/* ===== Chọn OS trong giỏ (VPS/Cloud) ===== */
.mh-cart-os { margin-top: 10px; max-width: 340px; }
.mh-cart-os label { display: block; font-size: 12.5px; font-weight: 600; color: #37514a; margin-bottom: 5px; }
.mh-cart-os label .req { color: #e01f26; }
.mh-cart-os .cart-os-select {
width: 100%; border: 1px solid #dfe7e3; background: #f7faf9; border-radius: 10px;
padding: 9px 12px; font-size: 13.5px; color: #1f3a30; outline: none; cursor: pointer;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.mh-cart-os .cart-os-select:focus { border-color: var(--mh-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,166,81,.12); }
.mh-cart-os .cart-os-select.is-invalid { border-color: #e01f26; background: #fff5f5; box-shadow: 0 0 0 3px rgba(224,31,38,.1); }
.mh-os-warning { margin-top: 10px; font-size: 13px; color: #e01f26; font-weight: 600; }
/* Nhãn OS đã chọn (checkout) */
.mh-co-os { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: #eef7f1; color: #0a8f4a; font-size: 12px; font-weight: 600; }
.mh-co-os svg { width: 12px; height: 12px; }
/* ============ FAQ accordion dạng (SSL/product) — thay accordion Bootstrap hay lệch ============ */
.mh-faq2 { max-width: 100%; }
.mh-faq2-item { border-bottom: 1px solid #eef3f0; }
.mh-faq2-item:first-child { border-top: 1px solid #eef3f0; }
.mh-faq2-sum {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
padding: 20px 6px; font-weight: 700; font-size: 16px; color: #16231c;
transition: color .18s ease;
}
.mh-faq2-sum::-webkit-details-marker { display: none; }
.mh-faq2-sum::before {
content: "+"; flex: 0 0 24px; text-align: center; font-size: 24px; font-weight: 400;
line-height: 1; color: #9aa8a1; transition: transform .2s ease, color .2s ease;
}
.mh-faq2-item[open] > .mh-faq2-sum { color: var(--mh-primary); }
.mh-faq2-item[open] > .mh-faq2-sum::before { content: "\2212"; color: var(--mh-primary); } /* − */
.mh-faq2-sum:hover { color: var(--mh-primary); }
.mh-faq2-body {
padding: 0 6px 22px 46px; color: #33453c; font-size: 15px; line-height: 1.8;
}
.mh-faq2-body p { margin: 0 0 10px; }
.mh-faq2-body p:last-child { margin-bottom: 0; }
.mh-faq2-body a { color: var(--mh-primary); word-break: break-word; display: inline !important; float: none !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.mh-faq2-body ul, .mh-faq2-body ol { margin: 0 0 12px; padding-left: 20px; }
.mh-faq2-body li { margin-bottom: 6px; }
@media (max-width: 600px) {
.mh-faq2-sum { font-size: 15px; gap: 12px; padding: 16px 4px; }
.mh-faq2-body { padding-left: 40px; }
}