/* ==========================================================================
   MD-CONTENT.CSS — Định dạng thống nhất cho MỌI nội dung soạn bằng trình soạn
   thảo (TinyMCE) khi hiển thị ra ngoài web.
   Mục tiêu: "nhìn trong admin thế nào thì ra web đúng như vậy".

   Vì sao cần: theme Printnow reset heading/list (bỏ dấu chấm đầu dòng, heading
   dùng cỡ chữ kiểu hero, các đoạn dính nhau) nên nội dung HTML do admin/AI tạo
   ra web bị vỡ bố cục dù trong TinyMCE vẫn đẹp.

   Áp dụng cho 5 vùng:
     .page-static-content  — trang tĩnh   (/{slug})
     .post-content         — bài viết      (/tin-tuc/...)
     .details-content      — dịch vụ & dự án (/dich-vu/..., /du-an/...)
     .md-tab-content       — tab mô tả sản phẩm (/san-pham/...)
   File này nạp SAU custom.css nên sẽ đè các quy tắc cũ khi trùng.
   ========================================================================== */

.page-static-content,
.post-content,
.details-content,
.md-tab-content {
    color: #333;
    font-size: 16px;
    line-height: 1.75;
    word-break: break-word;
}

/* ---- Tiêu đề: cỡ hợp lý, có khoảng cách trên/dưới, giãn dòng cho dấu tiếng Việt ---- */
.page-static-content h2,
.post-content h2,
.details-content h2,
.md-tab-content h2 {
    font-size: 26px;
    line-height: 1.35;
    font-weight: 700;
    color: #1a1a2e;
    margin: 34px 0 14px;
}
.page-static-content h3,
.post-content h3,
.details-content h3,
.md-tab-content h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #1a1a2e;
    margin: 28px 0 10px;
}
.page-static-content h4,
.post-content h4,
.details-content h4,
.md-tab-content h4 {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
    color: #1a1a2e;
    margin: 24px 0 8px;
}
/* Tiêu đề đầu tiên không đẩy xuống thừa */
.page-static-content > *:first-child,
.post-content > *:first-child,
.details-content > *:first-child,
.md-tab-content .tab-pane > *:first-child { margin-top: 0; }

/* ---- Đoạn văn ---- */
.page-static-content p,
.post-content p,
.details-content p,
.md-tab-content p { margin: 0 0 16px; }

/* ---- Danh sách: TRẢ LẠI dấu chấm/số đầu dòng (theme gốc reset mất) ---- */
.page-static-content ul,
.post-content ul,
.details-content ul,
.md-tab-content ul,
.page-static-content ol,
.post-content ol,
.details-content ol,
.md-tab-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
    list-style-position: outside;
}
.page-static-content ul,
.post-content ul,
.details-content ul,
.md-tab-content ul { list-style: disc outside; }
.page-static-content ol,
.post-content ol,
.details-content ol,
.md-tab-content ol { list-style: decimal outside; }
.page-static-content li,
.post-content li,
.details-content li,
.md-tab-content li {
    display: list-item;          /* theme có chỗ đặt display:inline-block -> mất chấm */
    margin: 0 0 8px;
    padding-left: 4px;
    line-height: 1.7;
}
.page-static-content li::before,
.post-content li::before,
.details-content li::before,
.md-tab-content li::before { content: none; }   /* bỏ icon giả của theme nếu có */
/* Danh sách lồng nhau */
.page-static-content li > ul, .post-content li > ul,
.details-content li > ul, .md-tab-content li > ul,
.page-static-content li > ol, .post-content li > ol,
.details-content li > ol, .md-tab-content li > ol { margin: 8px 0 0; }

/* ==========================================================================
   NGOẠI LỆ — BÀI VIẾT (/tin-tuc/...): theme ĐÃ tự thêm DẤU TICK ✓ cho mỗi mục
   (`.post-content ul li::before` dùng Font Awesome "\f00c"), đồng thời cũng đặt
   list-style disc => bị 2 ký hiệu (chấm tròn + tick).
   => Ở ĐÂY BỎ CHẤM TRÒN, chỉ giữ dấu tick cho gọn.
   Các vùng khác (sản phẩm, dịch vụ, dự án, trang tĩnh) KHÔNG có tick nên vẫn
   giữ chấm tròn như quy tắc phía trên.
   Lưu ý: chỉ áp cho `ul`. Danh sách đánh số `ol` giữ nguyên số thứ tự.
   ========================================================================== */
.blog-wrapper .single-blog-post .post-content ul,
.blog-wrapper .single-blog-post .post-content ul li {
    list-style: none;
}
.blog-wrapper .single-blog-post .post-content ul {
    padding-left: 0;          /* tick đã có sẵn lề riêng (li padding-left:30px) */
    margin: 0 0 18px;
}
.blog-wrapper .single-blog-post .post-content ul li {
    line-height: 1.7;
    margin: 0 0 10px;
}

/* ---- Chữ đậm / nghiêng / link ---- */
.page-static-content strong,
.post-content strong,
.details-content strong,
.md-tab-content strong { font-weight: 700; color: #1a1a2e; }
.page-static-content a,
.post-content a,
.details-content a,
.md-tab-content a { color: #7000fe; text-decoration: underline; }
.page-static-content a:hover,
.post-content a:hover,
.details-content a:hover,
.md-tab-content a:hover { color: #5a00cc; }

/* ---- Ảnh trong nội dung ---- */
.page-static-content img,
.post-content img,
.details-content img,
.md-tab-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Trích dẫn ---- */
.page-static-content blockquote,
.post-content blockquote,
.details-content blockquote,
.md-tab-content blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-left: 4px solid #7000fe;
    background: #faf7ff;
    border-radius: 0 8px 8px 0;
    color: #444;
}

/* ---- Bảng ---- */
.page-static-content table,
.post-content table,
.details-content table,
.md-tab-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
}
.page-static-content th, .post-content th, .details-content th, .md-tab-content th,
.page-static-content td, .post-content td, .details-content td, .md-tab-content td {
    border: 1px solid #e5e2ef;
    padding: 8px 12px;
    text-align: left;
}
.page-static-content th, .post-content th, .details-content th, .md-tab-content th { background: #f6f3ff; }

/* ---- Đường kẻ ngang ---- */
.page-static-content hr,
.post-content hr,
.details-content hr,
.md-tab-content hr { margin: 28px 0; border: 0; border-top: 1px solid #eee; }

/* ---- Điện thoại ---- */
@media (max-width: 767px) {
    .page-static-content, .post-content, .details-content, .md-tab-content { font-size: 15px; }
    .page-static-content h2, .post-content h2, .details-content h2, .md-tab-content h2 { font-size: 22px; margin-top: 28px; }
    .page-static-content h3, .post-content h3, .details-content h3, .md-tab-content h3 { font-size: 18px; margin-top: 24px; }
}

/* ==========================================================================
   THƯ VIỆN CHIA SẺ  /chia-se
   ========================================================================== */
.md-dl-intro { max-width: 760px; margin: 0 auto 26px; text-align: center; color: #444; font-size: 16px; line-height: 1.7; }

.md-dl-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 22px; }
.md-dl-search input {
    flex: 1; height: 50px; padding: 0 18px; font-size: 15px; color: #333;
    border: 1px solid #e2e2ea; border-radius: 8px; background: #fff; outline: none;
}
.md-dl-search input:focus { border-color: #7000fe; }
.md-dl-search button {
    height: 50px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer;
    background: #7000fe; color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.md-dl-search button:hover { background: #5a00cc; }

.md-dl-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.md-dl-cat {
    display: inline-block; padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: 600;
    background: #f2f0f8; color: #444; text-decoration: none; transition: .2s;
}
.md-dl-cat span { font-weight: 400; opacity: .7; }
.md-dl-cat:hover { background: #e6e0fb; color: #7000fe; }
.md-dl-cat.active { background: #7000fe; color: #fff; }
.md-dl-cat.active span { opacity: .85; }

.md-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.md-dl-card {
    border: 1px solid #ececf3; border-radius: 12px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s;
}
.md-dl-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.md-dl-thumb {
    position: relative; display: block; aspect-ratio: 4 / 3; background: #f6f6fa; overflow: hidden;
}
.md-dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-dl-noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #c3c3d4; font-size: 40px;
}
.md-dl-badge {
    position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 20px;
    background: rgba(112,0,254,.92); color: #fff; font-size: 12px; font-weight: 600;
}
.md-dl-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.md-dl-body h3 { font-size: 16px; line-height: 1.45; margin: 0 0 6px; font-weight: 700; }
.md-dl-body h3 a { color: #1a1a2e; text-decoration: none; }
.md-dl-body h3 a:hover { color: #7000fe; }
.md-dl-body p { font-size: 14px; color: #666; line-height: 1.6; margin: 0 0 10px; }
.md-dl-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #888; margin: 0 0 14px; }
.md-dl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.md-dl-btn {
    margin-top: auto; display: block; text-align: center; padding: 10px 14px; border-radius: 8px;
    background: #f2f0f8; color: #7000fe; font-weight: 600; font-size: 14px; text-decoration: none; transition: .2s;
}
.md-dl-btn:hover { background: #7000fe; color: #fff; }

.md-dl-empty { text-align: center; padding: 70px 20px; color: #77787B; }
.md-dl-empty i { font-size: 56px; color: #cfd3dd; display: block; margin-bottom: 18px; }
.md-dl-empty h4 { margin-bottom: 8px; }

/* ---- Trang chi tiết ---- */
.md-dl-preview {
    border: 1px solid #ececf3; border-radius: 12px; overflow: hidden; background: #f6f6fa;
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.md-dl-preview img { width: 100%; height: 100%; object-fit: cover; }
.md-dl-badge-inline {
    display: inline-block; padding: 5px 14px; border-radius: 20px; background: #f2f0f8;
    color: #7000fe; font-size: 13px; font-weight: 600; margin-bottom: 12px;
}
.md-dl-title { font-size: 30px; line-height: 1.35; margin: 0 0 12px; color: #1a1a2e; }
.md-dl-lead { font-size: 16px; line-height: 1.7; color: #555; margin-bottom: 18px; }
.md-dl-specs { list-style: none; padding: 0; margin: 0 0 22px; border-top: 1px solid #eee; }
.md-dl-specs li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 10px 2px; border-bottom: 1px solid #eee; font-size: 15px;
}
.md-dl-specs li span { color: #777; }
.md-dl-specs li strong { color: #1a1a2e; text-align: right; }
.md-dl-cta {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border: 0;
    border-radius: 8px; background: #7000fe; color: #fff; font-size: 16px; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: .2s;
}
.md-dl-cta:hover { background: #5a00cc; color: #fff; }
.md-dl-cta:disabled { opacity: .6; cursor: default; }
.md-dl-note { font-size: 13px; color: #888; margin-top: 10px; }
.md-dl-desc { margin-top: 40px; padding-top: 28px; border-top: 1px solid #eee; }
.md-dl-related { margin-top: 46px; padding-top: 30px; border-top: 1px solid #eee; }
.md-dl-related h2 { font-size: 24px; margin-bottom: 20px; color: #1a1a2e; }

/* ---- Popup nhận link tải ---- */
.md-dl-modal {
    position: fixed; inset: 0; z-index: 100100; background: rgba(20,18,35,.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.md-dl-modal[hidden] { display: none; }
.md-dl-modal-box {
    position: relative; width: 100%; max-width: 420px; background: #fff;
    border-radius: 14px; padding: 28px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.md-dl-modal-box h3 { font-size: 22px; margin: 0 0 6px; color: #1a1a2e; }
.md-dl-modal-box > p { font-size: 14px; color: #666; margin: 0 0 18px; line-height: 1.6; }
.md-dl-close {
    position: absolute; top: 10px; right: 14px; border: 0; background: none;
    font-size: 28px; line-height: 1; color: #aaa; cursor: pointer;
}
.md-dl-close:hover { color: #333; }
.md-dl-field { margin-bottom: 14px; }
.md-dl-field label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; }
.md-dl-field label b { color: #c0392b; }
.md-dl-field input {
    width: 100%; height: 46px; padding: 0 14px; font-size: 15px; color: #333;
    border: 1px solid #e2e2ea; border-radius: 8px; background: #fff; outline: none;
}
.md-dl-field input:focus { border-color: #7000fe; }
.md-dl-err {
    background: #fdecec; color: #c0392b; font-size: 14px;
    padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
}
.md-dl-modal .md-dl-cta { width: 100%; justify-content: center; }

@media (max-width: 767px) {
    .md-dl-title { font-size: 24px; }
    .md-dl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
    .md-dl-search { flex-direction: column; }
    .md-dl-search button { width: 100%; }
}

/* ==========================================================================
   KHOẢNG CÁCH GIỮA CÁC KHỐI — giảm ~30%, ÁP DỤNG CẢ MÁY TÍNH LẪN ĐIỆN THOẠI
   --------------------------------------------------------------------------
   Theme gốc: .section-padding = 120px trên+dưới (PC) / 100px (<=1199) / 80px (<=991).
   Riêng khối tiêu đề đầu trang (breadcrumb) CŨNG dùng class này, nên bị cộng dồn:
       breadcrumb 120 (dưới)  +  section kế tiếp 120 (trên)  =  240px trống
   -> nội dung bị tụt xuống rất sâu. Xử lý 3 lớp:
     1) Giảm .section-padding chung  (-30%)
     2) Giảm riêng dải breadcrumb    (đỡ chiếm hết màn hình đầu tiên)
     3) Giảm mạnh khoảng TRÊN của section NGAY SAU breadcrumb (chỗ cộng dồn)
   Cấu trúc "breadcrumb + section" giống nhau ở mọi trang (sản phẩm, dịch vụ,
   dự án, tin tức, liên hệ, chia sẻ, tìm kiếm...) nên toàn site đồng bộ.
   ========================================================================== */

/* 1) Khoảng cách chung */
.section-padding { padding: 84px 0; }                 /* 120 -> 84  (-30%) */

/* 2) Dải tiêu đề đầu trang */
.breadcrumb-wrapper.section-padding { padding: 70px 0; }

/* 3) Section ngay sau breadcrumb: bỏ bớt khoảng trên (chỗ bị cộng dồn) */
.breadcrumb-wrapper + section.section-padding,
.breadcrumb-wrapper + .section-padding { padding-top: 50px; }

@media (max-width: 1199px) {
    .section-padding { padding: 70px 0; }             /* 100 -> 70 */
    .breadcrumb-wrapper.section-padding { padding: 58px 0; }
    .breadcrumb-wrapper + section.section-padding,
    .breadcrumb-wrapper + .section-padding { padding-top: 42px; }
}

@media (max-width: 991px) {
    .section-padding { padding: 56px 0; }             /* 80 -> 56 */
    .breadcrumb-wrapper.section-padding { padding: 46px 0; }
    .breadcrumb-wrapper + section.section-padding,
    .breadcrumb-wrapper + .section-padding { padding-top: 34px; }
}

@media (max-width: 575px) {
    .section-padding { padding: 46px 0; }
    .breadcrumb-wrapper.section-padding { padding: 36px 0; }
    .breadcrumb-wrapper + section.section-padding,
    .breadcrumb-wrapper + .section-padding { padding-top: 28px; }
}

/* Khối tiêu đề trong dải breadcrumb: bỏ lệch trên, gom gọn lại */
.breadcrumb-wrapper .page-heading { margin-top: 0; }
@media (max-width: 767px) {
    .breadcrumb-wrapper .page-heading .breadcrumb-items { margin-top: 10px; }
}

/* ==========================================================================
   SỬA Ô TÌM KIẾM TRANG CHIA SẺ TRÊN ĐIỆN THOẠI
   Lỗi: khi chuyển sang xếp dọc (flex-direction:column), thuộc tính flex:1 của
   ô nhập lại tác động vào CHIỀU CAO (trục chính đổi thành trục dọc) -> ô bị
   bóp dẹp. Khắc phục: bỏ flex, đặt chiều cao cố định.
   ========================================================================== */
.md-dl-search input,
.md-dl-search button { box-sizing: border-box; }

@media (max-width: 767px) {
    .md-dl-search {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
    }
    .md-dl-search input {
        flex: none;            /* QUAN TRỌNG: bỏ flex:1 để không bóp chiều cao */
        width: 100%;
        height: 48px;
        min-height: 48px;
        font-size: 16px;       /* >=16px để iPhone không tự phóng to khi gõ */
    }
    .md-dl-search button {
        flex: none;
        width: 100%;
        height: 48px;
        min-height: 48px;
    }
    /* Đoạn giới thiệu: bớt khoảng hở, đưa nội dung lên cao hơn */
    .md-dl-intro {
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.65;
    }
    .md-dl-cats { margin-bottom: 24px; gap: 8px; }
    .md-dl-cat { padding: 7px 14px; font-size: 13px; }
}

/* ==========================================================================
   TRANG CHIA SẺ — phần nâng cấp: xem thử font, chia sẻ, thanh sắp xếp
   ========================================================================== */

/* --- Thanh công cụ (số lượng + sắp xếp) --- */
.md-dl-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
    padding-bottom: 14px; border-bottom: 1px solid #eee;
}
.md-dl-count { font-size: 14px; color: #777; }
.md-dl-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #777; }
.md-dl-sort select {
    height: 40px; padding: 0 12px; font-size: 14px; color: #333;
    border: 1px solid #e2e2ea; border-radius: 8px; background: #fff; cursor: pointer; outline: none;
}
.md-dl-sort select:focus { border-color: #7000fe; }

/* --- Xem thử font ngay trên thẻ danh sách (thay ảnh, khỏi tự làm ảnh) --- */
.md-dl-fontprev {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; line-height: 1.2; color: #1a1a2e;
    background: linear-gradient(135deg, #faf7ff 0%, #f2f0f8 100%);
    padding: 10px; text-align: center; word-break: break-word;
}

/* --- Khung XEM THỬ CHỮ ở trang chi tiết --- */
.md-fp-box {
    margin-top: 36px; padding: 22px; border: 1px solid #e8e4f5;
    border-radius: 14px; background: #fbfaff;
}
.md-fp-head h2 { font-size: 22px; margin: 0 0 4px; color: #1a1a2e; }
.md-fp-head p { font-size: 14px; color: #777; margin: 0 0 16px; }

.md-fp-stage {
    min-height: 150px; display: flex; align-items: center; justify-content: center;
    padding: 24px 18px; border-radius: 10px; background: #fff;
    border: 1px solid #ececf3; overflow: hidden; transition: background .2s, color .2s;
}
.md-fp-stage.is-dark { background: #16141f; border-color: #16141f; }
.md-fp-stage.is-dark .md-fp-text { color: #fff; }
.md-fp-text {
    font-size: 56px; line-height: 1.3; color: #1a1a2e;
    text-align: center; word-break: break-word; max-width: 100%;
}

.md-fp-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px;
}
.md-fp-input {
    flex: 1 1 240px; height: 46px; padding: 0 14px; font-size: 15px; color: #333;
    border: 1px solid #e2e2ea; border-radius: 8px; background: #fff; outline: none; box-sizing: border-box;
}
.md-fp-input:focus { border-color: #7000fe; }
.md-fp-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #777; }
.md-fp-size input[type="range"] { width: 130px; accent-color: #7000fe; }
.md-fp-bg {
    height: 46px; padding: 0 16px; border: 1px solid #e2e2ea; border-radius: 8px;
    background: #fff; color: #444; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.md-fp-bg:hover { border-color: #7000fe; color: #7000fe; }

.md-fp-cta { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #ddd6f5; }
.md-fp-order {
    display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px;
    border-radius: 8px; background: #7000fe; color: #fff; font-weight: 700;
    font-size: 15px; text-decoration: none; transition: .2s;
}
.md-fp-order:hover { background: #5a00cc; color: #fff; }
.md-fp-note { display: block; margin-top: 8px; font-size: 13px; color: #888; }

/* --- Nút chia sẻ --- */
.md-dl-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee;
    font-size: 14px; color: #777;
}
.md-dl-share a, .md-dl-share button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: 20px; font-size: 13px; font-weight: 600;
    text-decoration: none; border: 1px solid #e2e2ea; background: #fff;
    color: #444; cursor: pointer; transition: .2s;
}
.md-dl-share a:hover, .md-dl-share button:hover { border-color: #7000fe; color: #7000fe; }
.md-dl-share-fb:hover { border-color: #1877f2 !important; color: #1877f2 !important; }
.md-dl-share-zl:hover { border-color: #0068ff !important; color: #0068ff !important; }

/* --- Khối dẫn sang sản phẩm (biến người tải thành khách) --- */
.md-dl-crossell { background: #fbfaff; border: 1px solid #e8e4f5; border-radius: 14px; padding: 24px; }
.md-dl-crossell h2 { margin-bottom: 4px; }
.md-dl-crossell-note { font-size: 14px; color: #777; margin: 0 0 18px; }

@media (max-width: 767px) {
    .md-fp-box { padding: 16px; margin-top: 28px; }
    .md-fp-text { font-size: 38px; }
    .md-fp-stage { min-height: 120px; padding: 18px 12px; }
    .md-fp-controls { gap: 10px; }
    .md-fp-input, .md-fp-bg { width: 100%; flex: none; }
    .md-fp-size { width: 100%; justify-content: space-between; }
    .md-fp-size input[type="range"] { flex: 1; margin-left: 10px; }
    .md-fp-order { width: 100%; justify-content: center; }
    .md-dl-fontprev { font-size: 26px; }
    .md-dl-toolbar { gap: 10px; }
    .md-dl-crossell { padding: 16px; }
}

/* ==========================================================================
   SỬA LỖI CHỮ TRONG Ô NHẬP BỊ VÔ HÌNH  (gõ mà không thấy chữ)
   --------------------------------------------------------------------------
   Nguyên nhân: theme Printnow dùng `-webkit-text-fill-color: transparent`
   cho hiệu ứng chữ gradient, và có `input { color: var(--white) }`.
   Trên Chrome/Safari, `-webkit-text-fill-color` ĐÈ LÊN cả `color` → đặt màu
   chữ bình thường KHÔNG ăn, ô nhập thành chữ trắng/trong suốt trên nền trắng.
   Cách vá đã dùng thành công ở các ô khác trong custom.css: đặt CẢ HAI
   (`color !important` + `-webkit-text-fill-color`).
   Áp cho toàn bộ ô nhập của trang Chia sẻ, KỂ CẢ popup xin số điện thoại
   (ô đó mà vô hình thì mất khách thật).
   ========================================================================== */
.md-fp-input,
.md-dl-search input,
.md-dl-field input {
    color: #222 !important;
    -webkit-text-fill-color: #222;
    opacity: 1;
    caret-color: #7000fe;        /* con trỏ nhấp nháy màu thương hiệu, dễ thấy */
}
.md-fp-input::placeholder,
.md-dl-search input::placeholder,
.md-dl-field input::placeholder {
    color: #9a9aa8 !important;
    -webkit-text-fill-color: #9a9aa8;
    opacity: 1;                   /* Firefox tự làm mờ placeholder -> tắt đi */
}
/* Chrome tự điền (autofill) hay đổi nền vàng + chữ khó đọc */
.md-fp-input:-webkit-autofill,
.md-dl-search input:-webkit-autofill,
.md-dl-field input:-webkit-autofill {
    -webkit-text-fill-color: #222;
    box-shadow: 0 0 0 1000px #fff inset;
}

/* Ô gõ thử chữ: cho to và rõ hơn để dễ kiểm soát nội dung đang gõ */
.md-fp-input {
    font-size: 16px;
    font-weight: 500;
    background: #fff;
}
.md-fp-input:focus {
    border-color: #7000fe;
    box-shadow: 0 0 0 3px rgba(112, 0, 254, .12);
}

/* =========================================================================
   /CHIA-SE — FILE CÓ PHÍ & BẢN QUYỀN   (thêm 23/08/2026)
   Quy tắc #9: mọi ô nhập phải có CẢ color LẪN -webkit-text-fill-color.
   ========================================================================= */

/* Nhãn giá trên thẻ ngoài danh sách (nằm cạnh nhãn nhóm) */
.md-dl-badge-price {
    left: auto;
    right: 10px;
    background: #111827;
    color: #fff;
    font-weight: 700;
}

/* Khối giá ở trang chi tiết */
.md-dl-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px;
}
.md-dl-price-num {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: #7000fe;
}
.md-dl-price-note {
    font-size: 14px;
    color: #6b6b7b;
}

.md-dl-cta-buy {
    background: #7000fe;
    border-color: #7000fe;
    color: #fff;
}
.md-dl-cta-buy:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* Hộp bản quyền / quyền sử dụng */
.md-dl-license {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #e3e3ee;
    border-radius: 10px;
    background: #fafaff;
}
.md-dl-license.is-owned {
    border-color: #d9c8ff;
    background: #f7f2ff;
}
.md-dl-license-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #2b2b3a;
}
.md-dl-license-head i {
    color: #7000fe;
    font-size: 17px;
}
.md-dl-license ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.md-dl-license ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a4a5a;
}
.md-dl-license ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7000fe;
}
.md-dl-license ul li:last-child {
    margin-bottom: 0;
}
.md-dl-license-extra {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: #6b6b7b;
}

/* ---- Trang đơn mua file (/chia-se/da-mua/{token}) ---- */
.md-order-box {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 26px;
    border: 1px solid #e3e3ee;
    border-radius: 14px;
    background: #fff;
}
.md-order-state {
    text-align: center;
    margin-bottom: 22px;
}
.md-order-state i {
    font-size: 46px;
    display: block;
    margin-bottom: 10px;
}
.md-order-state h1 {
    font-size: 26px;
    line-height: 1.3;
    margin: 0 0 8px;
}
.md-order-state p {
    margin: 0;
    color: #6b6b7b;
    font-size: 15px;
}
.md-order-state.is-ok i   { color: #16a34a; }
.md-order-state.is-warn i { color: #ea9a12; }
.md-order-state.is-wait i { color: #7000fe; }

.md-order-info {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #eee;
}
.md-order-info li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}
.md-order-info li span  { color: #6b6b7b; flex: 0 0 auto; }
.md-order-info li strong { text-align: right; color: #2b2b3a; }

.md-order-qr {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px;
    border: 1px solid #e3e3ee;
    border-radius: 10px;
    background: #fafaff;
    margin-bottom: 14px;
}
.md-order-qr img {
    width: 200px;
    max-width: 100%;
    border-radius: 8px;
    background: #fff;
}
.md-order-bank {
    flex: 1 1 240px;
    min-width: 220px;
}
.md-order-bank p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
    font-size: 14.5px;
}
.md-order-bank p span   { color: #6b6b7b; }
.md-order-bank p strong { text-align: right; color: #2b2b3a; word-break: break-all; }

.md-order-save {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #ffe2ad;
    font-size: 14.5px;
    color: #6a4b00;
}

@media (max-width: 575px) {
    .md-order-box      { padding: 20px 16px; }
    .md-order-state h1 { font-size: 22px; }
    .md-dl-price-num   { font-size: 26px; }
    .md-order-qr       { justify-content: center; }
}

/* =========================================================================
   /SO-SANH — KHỐI "AI TƯ VẤN GIÚP"   (thêm 23/08/2026)
   Quy tắc #9: ô nhập phải có CẢ color LẪN -webkit-text-fill-color.
   ========================================================================= */
.md-cai {
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid #e3e3ee;
    border-radius: 14px;
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
}
.md-cai[hidden] { display: none; }

.md-cai-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.md-cai-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #7000fe;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.md-cai-head h4 {
    margin: 0 0 4px;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    color: #1a1a2e;
}
.md-cai-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6b6b7b;
}

.md-cai-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.md-cai-input {
    flex: 1 1 320px;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #222 !important;
    -webkit-text-fill-color: #222;
    caret-color: #7000fe;
    opacity: 1;
}
.md-cai-input::placeholder {
    color: #9a9aa8 !important;
    -webkit-text-fill-color: #9a9aa8;
    opacity: 1;
}
.md-cai-input:-webkit-autofill {
    -webkit-text-fill-color: #222;
    box-shadow: 0 0 0 1000px #fff inset;
}
.md-cai-input:focus {
    outline: none;
    border-color: #7000fe;
    box-shadow: 0 0 0 3px rgba(112, 0, 254, .12);
}

.md-cai-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #7000fe;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter .18s ease;
}
.md-cai-btn:hover:not(:disabled) { filter: brightness(1.1); }
.md-cai-btn:disabled { opacity: .7; cursor: default; }

.md-cai-spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: mdCaiSpin .7s linear infinite;
}
@keyframes mdCaiSpin { to { transform: rotate(360deg); } }

.md-cai-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: #8a8a99;
}

.md-cai-result {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid #e3e3ee;
    border-radius: 10px;
    background: #fff;
}
.md-cai-result[hidden] { display: none; }
.md-cai-result h4 {
    margin: 18px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #7000fe;
}
.md-cai-result h4:first-child { margin-top: 0; }
.md-cai-result p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.75;
    color: #3a3a4a;
}
.md-cai-result ul {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.md-cai-result ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.7;
    color: #3a3a4a;
}
.md-cai-result ul li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7000fe;
}
.md-cai-result strong { color: #1a1a2e; }

.md-cai-err {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #fff3f3;
    border: 1px solid #ffd4d4;
    color: #b3261e;
    font-size: 14.5px;
}
.md-cai-err[hidden] { display: none; }

.md-cai-contact { margin-top: 18px; }
.md-cai-contact[hidden] { display: none; }
.md-cai-contact-title {
    margin: 0 0 10px;
    font-size: 14.5px;
    color: #4a4a5a;
}
.md-cai-contact-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.md-cai-cbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #555;
    transition: filter .18s ease;
}
.md-cai-cbtn:hover { filter: brightness(1.1); color: #fff; }
.md-cai-cbtn.is-zalo { background: #0068ff; }
.md-cai-cbtn.is-tele { background: #229ed9; }
.md-cai-cbtn.is-fb   { background: #0084ff; }
.md-cai-cbtn.is-call { background: #16a34a; }
.md-cai-cbtn.is-form { background: #7000fe; }

@media (max-width: 575px) {
    .md-cai            { padding: 18px 15px; }
    .md-cai-head h4    { font-size: 17px; }
    .md-cai-btn        { width: 100%; justify-content: center; }
    .md-cai-input      { flex-basis: 100%; }
    .md-cai-cbtn       { flex: 1 1 auto; justify-content: center; }
}

/* Số lượt AI so sánh còn lại (nằm trong dòng gợi ý dưới ô nhập) */
.md-cai-left {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 20px;
    background: #f1ecff;
    color: #5b00cc;
    font-size: 12.5px;
    font-weight: 600;
}
.md-cai-left[data-left="0"] {
    background: #fff1e6;
    color: #a8560a;
}

/* =========================================================================
   NÚT CHIA SẺ DÙNG CHUNG (partials/share.php)   — thêm 23/08/2026
   Thay 3 kiểu nút chia sẻ khác nhau trước đây ở sản phẩm / tin tức / chia sẻ.
   ========================================================================= */
.md-sh {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;   /* tách khỏi khối nội dung phía trên, tránh dính sát */
    padding-top: 16px;
    border-top: 1px solid #f0f0f5;
}
.md-sh-label {
    font-size: 14.5px;
    color: #6b6b7b;
    margin-right: 2px;
}
.md-sh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #e3e3ee;
    border-radius: 8px;
    background: #fff;
    color: #3a3a4a !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.md-sh-btn i { font-size: 15px; }
.md-sh-btn:hover {
    border-color: currentColor;
    background: #fafaff;
}

/* Màu thương hiệu chỉ hiện khi rê chuột — để hàng nút không loè loẹt */
.md-sh-btn.is-facebook:hover  { color: #1877f2 !important; }
.md-sh-btn.is-zalo:hover      { color: #0068ff !important; }
.md-sh-btn.is-pinterest:hover { color: #e60023 !important; }
.md-sh-btn.is-twitter:hover   { color: #111827 !important; }
.md-sh-btn.is-telegram:hover  { color: #229ed9 !important; }
.md-sh-btn.is-whatsapp:hover  { color: #25d366 !important; }
.md-sh-btn.is-linkedin:hover  { color: #0a66c2 !important; }
.md-sh-btn.is-email:hover     { color: #7000fe !important; }
.md-sh-btn.is-copy:hover      { color: #7000fe !important; }

/* Zalo dùng widget chính chủ -> khung trong suốt, để Zalo tự vẽ nút của họ */
.md-sh-btn.is-widget {
    padding: 0;
    border: 0;
    background: none;
}
.md-sh-btn.is-widget:hover { background: none; }
.md-sh-btn.is-widget .zalo-share-button { display: inline-flex; align-items: center; }

.md-sh-btn.is-done {
    border-color: #16a34a;
    color: #16a34a !important;
    background: #f2fbf5;
}

@media (max-width: 575px) {
    .md-sh-label { flex: 0 0 100%; margin-bottom: 2px; }
    .md-sh-btn   { padding: 8px 12px; font-size: 13.5px; }
}