/* Mind Decor - custom overrides. Không sửa main.css gốc, mọi tuỳ biến để ở đây.
   Ghi chú: khối mini-cart giỏ hàng KHÔNG dùng CSS riêng ở đây nữa - đã chuyển
   sang dùng đúng class .side_bar/.cartmini__* có sẵn trong main.css gốc của
   theme (khớp 100% với thiết kế "Shopping cart" chuẩn của Printnow), tránh
   trùng lặp/xung đột CSS tự viết. */

/* z-index gốc của .side_bar (9999) bằng đúng z-index của header, khiến header
   che khuất nút đóng khi mini-cart mở (đã xác nhận bằng test tự động) - tăng
   z-index riêng cho .side_bar để luôn nổi trên header, không sửa main.css gốc. */
.side_bar {
    z-index: 100000;
}

/* Fix: theme Printnow hard-codes a fake cart badge "3" with ::before.
   The real cart count is already rendered by PHP in header.php, so only
   disable the fake CSS badge and leave the working cart logic untouched. */
.header-1 .header-right .menu-cart .cart-icon::before,
.header-2 .header-right .menu-cart .cart-icon::before {
    content: none !important;
    display: none !important;
}

/* =========================================================================
   TRANG SẢN PHẨM /san-pham - bố cục sidebar trái (Printnow shop-leftsidebar).
   Chỉ bổ sung phần main.css CHƯA có; tái dùng tối đa class theme sẵn có
   (.shop-main-sidebar, .single-sidebar-widget, .wid-title, .filter-size,
    .checkbox-single, .range__barcustom, .woocommerce-notices-wrapper,
    .shop-items, .product-icon, .price-list, .page-nav-wrap, .theme-btn...).
   ========================================================================= */

/* --- Ảnh sản phẩm đồng đều, không méo (tỉ lệ cố định) --- */
.md-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f4f5f8;
}
.md-thumb > a { display: block; width: 100%; height: 100%; }
.md-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.shop-items:hover .md-thumb img { transform: scale(1.05); }

/* --- Tên sản phẩm tối đa 2 dòng --- */
.shop-items .shop-content h5 {
    line-height: 1.4;
}
.shop-items .shop-content h5 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.shop-items .shop-content .price-list li { font-size: 16px; }

/* --- Nút thêm giỏ nhanh trong product-icon (dạng form/button) trông như <a> --- */
.md-quick-add { margin: 0; line-height: 1; }
.md-quick-add button {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    width: 40px; height: 40px; line-height: 40px;
}
.md-quick-add button i { color: var(--white); font-size: 16px; }

/* --- Ô tìm kiếm sidebar (theme chưa có .search-widget) --- */
.md-search-widget { position: relative; }
.md-search-widget input {
    width: 100%; height: 52px; padding: 0 50px 0 18px;
    border: 1px solid #E7EAF3; background: #F7F8FB; border-radius: 4px;
    font-size: 15px; color: var(--header); outline: none;
}
.md-search-widget input:focus { border-color: var(--theme); background: #fff; }
.md-search-widget button {
    position: absolute; top: 0; right: 0; width: 50px; height: 52px;
    border: 0; background: transparent; cursor: pointer; color: var(--theme);
}

/* --- Số lượng nhỏ cạnh nhãn --- */
.md-count { color: #9a9a9a; font-weight: 400; font-size: 14px; }

/* --- Danh mục đang chọn --- */
.shop-main-sidebar .single-sidebar-widget .shop-catagory-items ul li.md-cat-active a { color: var(--theme); font-weight: 600; }
.shop-main-sidebar .single-sidebar-widget .shop-catagory-items ul li.md-cat-active a::before { color: var(--theme); }

/* --- Khoảng cách checkbox facet + gợi ý giá --- */
.shop-main-sidebar .single-sidebar-widget .filter-size .checkbox-single { align-items: center; }
.md-price-input { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.md-price-input .field {
    width: 100%; border: 1px solid #E7EAF3; border-radius: 4px;
    padding: 8px 12px; background: #F7F8FB;
}
.md-price-input .field input { width: 100%; }
.md-price-hint { margin-top: 12px; font-size: 13px; color: #9a9a9a; }

/* --- Nút áp dụng/xoá bộ lọc --- */
.md-filter-actions { padding-top: 25px !important; padding-bottom: 25px !important; }
.md-filter-actions .theme-btn { justify-content: center; }

/* --- Nút mở bộ lọc mobile --- */
.md-filter-toggle { margin-bottom: 25px; }
.md-filter-toggle i { margin-right: 6px; }

/* --- Toolbar (tái dùng .woocommerce-notices-wrapper) --- */
.md-toolbar { min-height: 64px; margin-bottom: 25px; }

/* --- Chip bộ lọc đang áp dụng --- */
.md-active-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.md-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #F1F3F8; color: var(--header); font-size: 14px; font-weight: 500;
    padding: 7px 14px; border-radius: 30px; line-height: 1;
}
.md-chip a { color: #8a8f9c; display: inline-flex; }
.md-chip a:hover { color: var(--theme); }
.md-chip-clear { background: var(--theme); color: var(--white); text-transform: none; }
.md-chip-clear:hover { opacity: .9; color: var(--white); }

/* --- Trạng thái rỗng --- */
.md-empty { padding: 70px 20px; }
.md-empty i { font-size: 60px; color: #cfd3dd; margin-bottom: 20px; display: inline-block; }
.md-empty h4 { margin-bottom: 10px; }
.md-empty p { color: #77787B; margin-bottom: 24px; }

/* --- Phân trang: nút prev/next dùng chung .page-numbers --- */
.page-nav-wrap ul li { display: inline-block; margin: 0 4px; }

/* =========================================================================
   DRAWER BỘ LỌC TRÊN MOBILE
   ========================================================================= */
.md-filter-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: .3s; z-index: 100050;
}
body.md-drawer-open .md-filter-overlay { opacity: 1; visibility: visible; }

@media (max-width: 991px) {
    .md-filter-drawer {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 320px; max-width: 88vw; background: var(--bg, #fff);
        z-index: 100060; overflow-y: auto; padding: 20px;
        transform: translateX(-100%); transition: transform .3s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.15);
    }
    body.md-drawer-open .md-filter-drawer { transform: translateX(0); }
    .md-filter-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee;
    }
    .md-filter-close {
        border: 0; background: #F1F3F8; width: 38px; height: 38px;
        border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--header);
    }
    .md-filter-drawer .single-sidebar-widget { padding: 22px 18px; box-shadow: none; border: 1px solid #eef0f4; }
}
@media (min-width: 992px) {
    .md-filter-toggle, .md-filter-drawer-head { display: none; }
}

/* Khoá cuộn nền khi drawer mở */
body.md-drawer-open { overflow: hidden; }

/* --- Điện thoại nhỏ: 1 cột; đảm bảo tên & giá không bị chật --- */
@media (max-width: 575px) {
    .md-toolbar { flex-wrap: wrap; gap: 12px; padding: 15px; justify-content: space-between; }
    .shop-items .shop-content h5 { font-size: 17px; }
}

/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM
   ============================================================ */
/* Sao đánh giá */
.md-stars { color:#f5a623; letter-spacing:1px; }
.md-rating-summary { display:flex; align-items:center; gap:8px; font-size:14px; }
.md-rating-summary .md-rating-count { color:#666; text-decoration:none; }
.md-rating-summary .md-rating-count:hover { text-decoration:underline; }
.md-rating-big { display:flex; align-items:center; gap:10px; }
.md-rating-number { font-size:28px; font-weight:800; line-height:1; }

/* Thông báo */
.md-alert { padding:10px 14px; border-radius:8px; font-size:14px; margin:12px 0; }
.md-alert-success { background:#e7f6ec; color:#1b7a3d; border:1px solid #bfe6cd; }
.md-alert-error { background:#fdecec; color:#b02a2a; border:1px solid #f3c4c4; }

/* Bộ đếm số lượng */
.md-qty-row { display:flex; align-items:center; }
.md-qty-stepper { display:inline-flex; align-items:center; border:1px solid #ddd; border-radius:8px; overflow:hidden; }
.md-qty-btn { width:40px; height:42px; border:none; background:#f5f5f5; font-size:20px; line-height:1; cursor:pointer; color:#333; }
.md-qty-btn:hover { background:#ececec; }
.md-qty-input { width:60px; height:42px; text-align:center; border:none; border-left:1px solid #eee; border-right:1px solid #eee; -moz-appearance:textfield; }
.md-qty-input::-webkit-outer-spin-button, .md-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.md-stock-info { font-size:14px; color:#1b7a3d; margin-bottom:8px; }

/* Nút mua */
.md-buy-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* Danh sách thông tin phụ */
.md-meta-list { list-style:none; padding:0; margin:0; font-size:15px; }
.md-meta-list li { padding:4px 0; }
.md-meta-list li span { font-weight:700; margin-right:6px; }
.md-meta-list a { color:var(--theme,#f4511e); text-decoration:none; }
.md-meta-list a:hover { text-decoration:underline; }

/* Chia sẻ */
.md-share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.md-share > span { font-weight:700; }
.md-share-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #ddd; border-radius:6px; background:#fff; color:#444; cursor:pointer; text-decoration:none; font-size:13px; }
.md-share-btn:hover { background:#f5f5f5; color:var(--theme,#f4511e); }

/* Tabs chi tiết */
.md-detail-tabs { border-bottom:2px solid #eee; gap:6px; }
.md-detail-tabs .nav-link { border:none; color:#666; font-weight:600; padding:12px 18px; background:transparent; }
.md-detail-tabs .nav-link.active { color:var(--theme,#f4511e); border-bottom:3px solid var(--theme,#f4511e); background:transparent; }
.md-tab-content { padding:24px 4px; }

/* Bảng thông số */
.md-spec-table { width:100%; border-collapse:collapse; }
.md-spec-table th, .md-spec-table td { text-align:left; padding:10px 14px; border:1px solid #eee; vertical-align:top; }
.md-spec-table th { width:220px; background:#fafafa; font-weight:700; }

/* Danh sách đánh giá */
.md-review-list { list-style:none; padding:0; margin:0; }
.md-review-item { padding:14px 0; border-bottom:1px solid #eee; }
.md-review-head { display:flex; align-items:center; gap:10px; }
.md-review-date { font-size:13px; margin:2px 0 6px; }
.md-review-content { margin:0; }

/* Honeypot ẩn */
.md-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* Chọn sao khi viết đánh giá (radio đảo chiều để hover tô từ trái) */
.md-star-input { display:inline-flex; flex-direction:row-reverse; gap:4px; font-size:26px; }
.md-star-input input { display:none; }
.md-star-input label { color:#ddd; cursor:pointer; transition:color .15s; }
.md-star-input input:checked ~ label,
.md-star-input label:hover,
.md-star-input label:hover ~ label { color:#f5a623; }

@media (max-width:575px) {
    .md-buy-actions { flex-direction:column; }
    .md-buy-actions .theme-btn { width:100%; text-align:center; }
    .md-spec-table th { width:130px; }
}

/* Từ khóa sản phẩm (trang chi tiết) */
.md-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.md-tags > span { font-weight:700; }
.md-tag { display:inline-block; padding:4px 12px; border:1px solid #e0e0e0; border-radius:20px; background:#fafafa; color:#555; text-decoration:none; font-size:13px; }
.md-tag:hover { background:var(--theme,#f4511e); border-color:var(--theme,#f4511e); color:#fff; }

/* Widget thẻ phổ biến (sidebar) */
.md-tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.md-tag-cloud .md-tag { margin:0; }
.md-tag-active { background:var(--theme,#f4511e) !important; border-color:var(--theme,#f4511e) !important; color:#fff !important; }

/* Sản phẩm liên quan */
.related-products-section h3 { font-weight:700; }

/* ============================================================
   TRANG CHỦ - Khối danh mục: ép thumbnail đồng đều (tránh ảnh
   kích thước lệch nhau làm tràn/đè vỡ layout). Bo tròn bám mẫu.
   ============================================================ */
.catagory-product-slider .swiper-slide { height: auto; }
.shop-catagories-item .thumb {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #eef3f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-catagories-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-catagories-item .content h3 { line-height: 1.35; }
@media (max-width: 575px) {
    .shop-catagories-item .thumb { max-width: 160px; }
}

/* ============================================================
   SECTION DỊCH VỤ (gộp card + khối "nhanh & chất lượng")
   ============================================================ */
.md-service-card {
    background: #fff;
    border-radius: 16px;
    padding: 34px 28px;
    box-shadow: 0 18px 40px -24px rgba(20, 10, 60, 0.35);
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}
.md-service-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(112, 0, 254, 0.4); }
.md-service-icon {
    width: 84px; height: 84px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ff4b8b 0%, #7000fe 100%);
    margin-bottom: 22px;
}
.md-service-icon i { color: #fff; font-size: 32px; }
.md-service-icon img { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }
.md-service-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.md-service-card h3 a { color: var(--header, #09052F); text-decoration: none; }
.md-service-card h3 a:hover { color: var(--theme, #7000fe); }
.md-service-card p { color: #6b6b7b; margin: 0; font-size: 15px; line-height: 1.65; }

/* So le 2 cột như mẫu */
@media (min-width: 576px) {
    .md-service-grid .md-service-col:nth-child(2n) { margin-top: 46px; }
}

/* Khối feature bên phải */
.md-service-feature { padding-left: 10px; }
.md-service-feature .md-feature-list { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.md-feature-item { display: flex; align-items: center; gap: 14px; }
.md-feature-icon {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(112, 0, 254, 0.1);
    color: var(--theme, #7000fe);
    font-size: 22px;
}
.md-feature-text h4 { margin: 0; font-size: 17px; font-weight: 700; }
@media (max-width: 991px) {
    .md-service-feature { padding-left: 0; margin-top: 30px; }
    .md-service-grid .md-service-col:nth-child(2n) { margin-top: 0; }
}

/* ============================================================
   LỌC GIÁ (sidebar shop) - gọn như mẫu
   ============================================================ */
.md-price-input-hidden { display: none !important; }
.md-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.md-price-range {
    font-size: 15px;
    font-weight: 600;
    color: var(--header, #09052F);
    white-space: nowrap;
}
.md-price-filter-btn {
    border: none;
    background: var(--theme, #7000fe);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity .2s ease;
}
.md-price-filter-btn:hover { opacity: .9; }

/* ============================================================
   THẺ TAG (sidebar + widget phổ biến) - chữ to, rõ như mẫu
   ============================================================ */
.md-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.md-tag {
    display: inline-block;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid #e2e2ea;
    border-radius: 8px;
    background: #fff;
    color: #4a4a5a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: all .2s ease;
}
.md-tag:hover,
.md-tag-active {
    background: var(--theme, #7000fe);
    border-color: var(--theme, #7000fe);
    color: #fff !important;
}

/* ============================================================
   TAB LỌC DANH MỤC - "Sản phẩm bán chạy" trang chủ (như mẫu)
   ============================================================ */
.md-product-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}
.md-product-tab {
    border: 1px solid #e2e2ea;
    background: #fff;
    color: var(--header, #09052F);
    font-weight: 600;
    font-size: 15px;
    padding: 11px 26px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 20px -14px rgba(20, 10, 60, 0.25);
    transition: all .2s ease;
}
.md-product-tab:hover { border-color: var(--theme, #7000fe); color: var(--theme, #7000fe); }
.md-product-tab.active {
    background: var(--theme, #7000fe);
    border-color: var(--theme, #7000fe);
    color: #fff;
}
@media (max-width: 575px) {
    .md-product-tab { padding: 9px 18px; font-size: 14px; }
}

/* ============================================================
   BADGE KHUYẾN MÃI + GIÁ GẠCH
   ============================================================ */
.md-sale-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: #ff2f6e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    line-height: 1;
}
.md-sale-badge-inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}
.md-old-price {
    color: #b0b0b0;
    font-weight: 400;
    margin-left: 6px;
    font-size: 0.88em;
}

/* ============================================================
   TRANG GIỚI THIỆU - avatar chuyên viên + collage
   ============================================================ */
.md-expert { display: flex; align-items: center; gap: 14px; }
.md-expert-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(112, 0, 254, 0.15);
}
.md-expert-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ff4b8b, #7000fe);
    color: #fff; font-size: 24px;
}
.md-about-collage img { border-radius: 12px; width: 100%; }

/* ============================================================
   BANNER "SỐ LƯỢNG LỚN" (trang Giới thiệu) - FULL-BLEED như mẫu
   Nền phủ toàn màn hình; 2 ảnh trang trí neo sát 2 mép (left:0/right:0);
   chỉ chữ + nút bị giới hạn width và căn giữa. clamp() cho responsive.
   ============================================================ */
.md-bulk-section {
    position: relative;
    width: 100%;
    overflow: hidden;                 /* chặn thanh cuộn ngang do ảnh trang trí */
    background: #f4f3fb;
    background-image: radial-gradient(120% 120% at 50% 0%, #f7f5fc 0%, #efecf8 100%);
    padding: clamp(48px, 8vw, 96px) clamp(16px, 5vw, 60px);
    text-align: center;
    margin: 10px 0 40px;
}
.md-bulk-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
}
.md-bulk-content h2 {
    color: var(--header, #09052F);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 46px);
    line-height: 1.2;
    margin: 0 0 clamp(18px, 2.6vw, 30px);
}
.md-bulk-btn {
    display: inline-block;
    background: var(--theme, #7000fe);
    color: #fff;
    font-weight: 600;
    font-size: clamp(14px, 1.4vw, 16px);
    padding: clamp(11px, 1.4vw, 15px) clamp(24px, 3vw, 36px);
    border-radius: 10px;
    text-decoration: none;
    transition: opacity .2s ease;
}
.md-bulk-btn:hover { opacity: .9; color: #fff; }

/* Ảnh trang trí neo 2 mép viewport */
.md-bulk-art {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 0;
}
.md-bulk-art img {
    display: block;
    width: clamp(180px, 24vw, 380px);
    height: auto;
}
.md-bulk-art-left  { left: 0; }
.md-bulk-art-right { right: 0; }

/* Tablet: thu nhỏ ảnh, chừa chỗ cho nội dung */
@media (max-width: 991px) {
    .md-bulk-art img { width: clamp(120px, 22vw, 220px); opacity: .8; }
}
/* Mobile: ảnh nhỏ + mờ + đẩy ra mép để không che chữ; không dùng px cứng */
@media (max-width: 575px) {
    .md-bulk-section { padding: 44px 20px; }
    .md-bulk-content { max-width: 100%; }
    .md-bulk-art img { width: 40vw; opacity: .28; }
    .md-bulk-art-left  { left: -10vw; }
    .md-bulk-art-right { right: -10vw; }
}

/* Trang kết quả tìm kiếm */
.md-search-group-title { font-weight: 700; margin: 8px 0 18px; padding-bottom: 8px; border-bottom: 2px solid #eee; }
.md-search-list { list-style: none; padding: 0; margin: 0; }
.md-search-list li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.md-search-list li a { font-weight: 600; color: var(--header, #09052F); text-decoration: none; font-size: 16px; }
.md-search-list li a:hover { color: var(--theme, #7000fe); }
.md-search-list li p { margin: 4px 0 0; color: #777; font-size: 14px; }
.md-search-page-form .md-search-widget { position: relative; }
.search-field-holder { position: relative; }
.main-search-submit {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    font-size: 22px; color: #fff; padding: 8px 12px;
}
.main-search-submit:hover { opacity: .8; }

/* ============================================================
   YÊU THÍCH + SO SÁNH
   ============================================================ */
/* Nút icon (button) khớp với icon link tròn của theme */
.product-icon li button { background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
    width: 40px; height: 40px; line-height: 40px; display: block; color: #fff; }
.product-icon li button i { color: #fff; font-size: 16px; }
.product-icon li .md-wish-btn.active i { color: #ff5a7a; }
.product-icon li .md-compare-btn.active i { color: #ffd85a; }

/* Thanh nổi truy cập nhanh */
#md-float-bar { position: fixed; right: 16px; bottom: 84px; z-index: 900; display: none;
    flex-direction: column; gap: 10px; }
.md-float-item { position: relative; width: 46px; height: 46px; border-radius: 50%;
    background: var(--theme, #7000fe); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(112,0,254,.5); text-decoration: none; font-size: 18px; }
.md-float-item:hover { color: #fff; opacity: .92; }
.md-float-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; line-height: 20px;
    background: #ff2f6e; color: #fff; border-radius: 20px; font-size: 12px; font-weight: 700; text-align: center; padding: 0 5px; }

/* Toast */
#md-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    background: #09052F; color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 500;
    opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 1200; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
#md-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Trang so sánh */
.md-compare-table { width: 100%; border-collapse: collapse; }
.md-compare-table th, .md-compare-table td { border: 1px solid #eee; padding: 16px; text-align: center; vertical-align: middle; }
.md-compare-table th { background: #faf9ff; font-weight: 700; width: 120px; text-align: left; }
.md-compare-img { max-width: 160px; max-height: 160px; object-fit: contain; }
.md-remove-item { background: #fff; border: 1px solid #eee; color: #d33; width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; font-size: 18px; line-height: 1; position: absolute; top: 8px; right: 8px; z-index: 3; }
.shop-image { position: relative; }
.md-empty-list { text-align: center; color: #888; padding: 40px 0; }

/* ============================================================
   BẢN ĐỒ LIÊN HỆ (facade click-to-load)
   ============================================================ */
.md-map-section { padding: 0 0 60px; }
.md-map { position: relative; width: 100%; aspect-ratio: 16/7; border-radius: 12px;
    overflow: hidden; cursor: pointer; background: #e9eaf0; line-height: 0; }
@supports not (aspect-ratio: 1) { .md-map { height: 0; padding-bottom: 43.75%; } }
.md-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease, filter .3s ease; }
.md-map:hover .md-map__img { transform: scale(1.03); filter: brightness(.92); }
.md-map__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 60px; color: #b7b9c9; background: linear-gradient(135deg, #eef0f7, #e3e5f0); }
.md-map__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px; background: var(--theme, #7000fe); color: #fff;
    font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 40px; white-space: nowrap;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.md-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 575px) {
    .md-map { aspect-ratio: 4/3; }
    @supports not (aspect-ratio: 1) { .md-map { padding-bottom: 75%; } }
    .md-map__btn { font-size: 13px; padding: 11px 16px; }
}

/* Gallery ảnh sản phẩm (trang chi tiết) */
.md-gallery-thumb { border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color .2s ease, opacity .2s ease; opacity: .8; }
.md-gallery-thumb:hover { opacity: 1; }
.md-gallery-thumb.active { border-color: var(--theme, #7000fe); opacity: 1; }

/* ============================================================
   TRỢ LÝ AI (chat widget)
   ============================================================ */
#mdChat { position: fixed; right: 18px; bottom: 18px; z-index: 1100; }
#mdChatToggle {
    position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--theme, #7000fe); color: #fff; font-size: 24px;
    box-shadow: 0 10px 26px -8px rgba(112, 0, 254, .65);
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    transition: transform .2s ease;
}
#mdChatToggle:hover { transform: scale(1.06); }
.md-chat-badge {
    position: absolute; top: -3px; right: -3px; background: #ff2f6e; color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 20px; line-height: 1.3;
}
#mdChat.is-open #mdChatToggle { display: none; }

#mdChatBox {
    width: 350px; max-width: calc(100vw - 32px); height: 500px; max-height: calc(100vh - 100px);
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .4);
    display: flex; flex-direction: column;
}
.md-chat-head {
    background: var(--theme, #7000fe); color: #fff; padding: 13px 16px;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.md-chat-head strong { display: block; font-size: 15px; }
.md-chat-head small { font-size: 11px; opacity: .85; }
#mdChatClose { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }

.md-chat-body { flex: 1; overflow-y: auto; padding: 14px; background: #f7f7fb; }
.md-chat-msg {
    max-width: 84%; padding: 10px 13px; border-radius: 12px; margin-bottom: 10px;
    font-size: 14px; line-height: 1.55; word-wrap: break-word;
}
.md-chat-msg--bot { background: #fff; color: #2c2c3a; border: 1px solid #e9e9f0; border-bottom-left-radius: 3px; }
.md-chat-msg--user { background: var(--theme, #7000fe); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.md-chat-typing { display: flex; gap: 4px; align-items: center; width: auto; max-width: 70px; }
.md-chat-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #bbb; display: inline-block;
    animation: mdBlink 1.2s infinite;
}
.md-chat-typing span:nth-child(2) { animation-delay: .2s; }
.md-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mdBlink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.md-chat-lead { padding: 12px 14px; background: #fff8ee; border-top: 1px solid #f0e2cb; flex-shrink: 0; }
.md-chat-lead p { margin: 0 0 8px; font-size: 12.5px; color: #8a5a00; font-weight: 600; }
.md-chat-lead input {
    width: 100%; height: 38px; padding: 0 11px; margin-bottom: 7px;
    border: 1px solid #e3e5e8; border-radius: 7px; font-size: 13.5px;
}
.md-chat-lead button {
    width: 100%; height: 38px; border: 0; border-radius: 7px; cursor: pointer;
    background: var(--theme, #7000fe); color: #fff; font-weight: 600; font-size: 13.5px;
}

.md-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eee; background: #fff; flex-shrink: 0; }
.md-chat-input input {
    flex: 1; height: 40px; padding: 0 13px; border: 1px solid #e3e5e8; border-radius: 20px; font-size: 14px; outline: none;
}
.md-chat-input input:focus { border-color: var(--theme, #7000fe); }
.md-chat-input button {
    width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--theme, #7000fe); color: #fff; font-size: 15px; flex-shrink: 0;
}
@media (max-width: 480px) {
    #mdChat { right: 12px; bottom: 12px; }
    #mdChatBox { width: calc(100vw - 24px); height: calc(100vh - 90px); }
}
/* Tránh đè lên thanh Yêu thích/So sánh */
#mdChat.is-open ~ #md-float-bar, #md-float-bar { bottom: 88px; }