/* MiniPortal - bán hàng: kiểu dáng dùng chung cho mọi theme.
   Theme đổi màu bằng biến: --mp-accent (nút, giá), --mp-sale (nhãn giảm giá), --mp-card-radius. */
/* :where() = độ ưu tiên 0, nên biến khai báo trong style.css của theme luôn thắng dù file này nạp sau */
:where(:root) { --mp-accent: var(--bs-primary, #0d6efd); --mp-sale: #e53935; --mp-card-radius: 12px; --mp-price: #e53935; --mp-ink: #1f2933; }

/* Thẻ sản phẩm */
.mp-products { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-products.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-products.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-products.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 1600px) { .mp-products.cols-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .mp-products.cols-4, .mp-products.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mp-products, .mp-products.cols-3, .mp-products.cols-4, .mp-products.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.mp-pcard { position: relative; background: #fff; border-radius: var(--mp-card-radius); overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s; height: 100%; }
.mp-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.mp-pcard .img { display: block; aspect-ratio: 1 / 1; background: #f4f5f7; overflow: hidden; }
.mp-pcard .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.mp-pcard:hover .img img { transform: scale(1.05); }
.mp-pcard .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.mp-pcard .cat { font-size: .8rem; color: #8a94a0; text-transform: uppercase; letter-spacing: .3px; }
.mp-pcard h3 { color: var(--mp-ink); font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: .25rem 0 .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.mp-pcard h3 a { color: inherit; text-decoration: none; }
.mp-pcard h3 a:hover { color: var(--mp-accent); }
.mp-pcard .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mp-price { color: var(--mp-price); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.mp-price-old { color: #9aa3ad; text-decoration: line-through; font-size: .9rem; margin-left: .35rem; font-weight: 400; }
.mp-price-contact { color: var(--mp-accent); font-weight: 600; }
.mp-badge-sale { position: absolute; top: .7rem; left: .7rem; background: var(--mp-sale); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 6px; padding: .2rem .5rem; z-index: 2; }
.mp-badge-hot { position: absolute; top: .7rem; right: .7rem; background: #ff9800; color: #fff; font-weight: 700; font-size: .78rem; border-radius: 6px; padding: .2rem .5rem; z-index: 2; }
.mp-badge-out { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.6); color: #fff; text-align: center; font-size: .85rem; padding: .25rem; }
.mp-btn-cart { border: 0; background: var(--mp-accent); color: #fff; border-radius: 50%; width: 42px; height: 42px; flex: 0 0 42px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none; transition: filter .15s, transform .15s; }
.mp-btn-cart:hover { color: #fff; filter: brightness(1.1); transform: scale(1.06); }
.mp-btn-cart:disabled { opacity: .6; }

/* Danh sách ngang + gọn */
.mp-plist .mp-pcard { flex-direction: row; margin-bottom: 1rem; height: auto; }
.mp-plist .mp-pcard .img { flex: 0 0 220px; aspect-ratio: auto; height: 200px; }
.mp-plist .mp-pcard h3 { min-height: 0; font-size: 1.2rem; }
.mp-plist .mp-pcard .summary { color: #5f6b77; margin-bottom: .75rem; }
@media (max-width: 576px) { .mp-plist .mp-pcard .img { flex-basis: 130px; height: 140px; } .mp-plist .summary { display: none; } }
.mp-pcompact { list-style: none; margin: 0; padding: 0; }
.mp-pcompact li { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed rgba(0,0,0,.1); }
.mp-pcompact li:last-child { border-bottom: 0; }
.mp-pcompact img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #f4f5f7; }
.mp-pcompact a { color: inherit; font-weight: 500; line-height: 1.35; display: block; }
.mp-pcompact .mp-price { font-size: 1rem; }

/* Thanh công cụ cửa hàng */
.mp-shop-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
    background: #fff; border-radius: var(--mp-card-radius); padding: .75rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mp-shop-bar h1 { font-size: 1.5rem; margin: 0; font-weight: 700; color: var(--mp-ink); }
.mp-shop-bar .count { color: #7a8591; font-size: .95rem; }
.mp-shop-bar select { width: auto; }
.mp-cat-desc { margin-bottom: 1rem; color: #55606b; }

/* Menu danh mục */
.mp-catmenu, .mp-catmenu ul { list-style: none; margin: 0; padding: 0; }
.mp-catmenu ul { padding-left: 1rem; }
.mp-catmenu a { display: flex; justify-content: space-between; align-items: center; padding: .55rem .75rem; border-radius: 8px; color: inherit; text-decoration: none; }
.mp-catmenu a:hover, .mp-catmenu a.active { background: rgba(0,0,0,.05); color: var(--mp-accent); }
.mp-catmenu a.active { font-weight: 600; }
.mp-catmenu .n { font-size: .8rem; background: rgba(0,0,0,.06); border-radius: 20px; padding: 0 .5rem; color: #6b7480; }
.mp-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.mp-catgrid a { display: block; text-align: center; background: #fff; border-radius: var(--mp-card-radius); padding: 1rem .75rem; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.07); transition: transform .2s; }
.mp-catgrid a:hover { transform: translateY(-3px); color: var(--mp-accent); }
.mp-catgrid img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; margin-bottom: .5rem; background: #f4f5f7; }
.mp-catgrid .ph { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .5rem; background: rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--mp-accent); }
.mp-catgrid b { display: block; font-weight: 600; }

/* Chi tiết sản phẩm */
.mp-pd { background: #fff; border-radius: var(--mp-card-radius); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mp-pd-main { position: relative; aspect-ratio: 1 / 1; background: #f4f5f7; border-radius: 10px; overflow: hidden; }
.mp-pd-main img { width: 100%; height: 100%; object-fit: contain; }
.mp-pd-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.mp-pd-thumbs a { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #f4f5f7; }
.mp-pd-thumbs a.active { border-color: var(--mp-accent); }
.mp-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mp-pd h1 { color: var(--mp-ink); font-size: 1.85rem; font-weight: 700; line-height: 1.3; }
.mp-pd .meta { color: #7a8591; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.mp-pd .price-box { background: #fafafa; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mp-pd .price-box .mp-price { font-size: 2rem; }
.mp-pd .price-box .mp-price-old { font-size: 1.1rem; }
.mp-pd .price-box .save { background: var(--mp-sale); color: #fff; border-radius: 6px; font-size: .85rem; font-weight: 700; padding: .15rem .45rem; margin-left: .5rem; vertical-align: middle; }
.mp-qty { display: inline-flex; align-items: stretch; border: 1px solid #d5dae0; border-radius: 10px; overflow: hidden; background: #fff; }
.mp-qty button { border: 0; background: #f3f5f7; width: 42px; font-size: 1.2rem; }
.mp-qty input { width: 60px; border: 0; text-align: center; font-weight: 600; font-size: 1.05rem; -moz-appearance: textfield; }
.mp-qty input::-webkit-outer-spin-button, .mp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mp-pd .actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.mp-pd .actions .btn { padding: .75rem 1.5rem; font-weight: 600; font-size: 1.05rem; border-radius: 10px; }
.mp-btn-buy { background: var(--mp-sale); border-color: var(--mp-sale); color: #fff; }
.mp-btn-buy:hover { filter: brightness(1.08); color: #fff; }
.mp-pd .note { color: #5f6b77; font-size: .95rem; border-top: 1px dashed #e1e5ea; padding-top: .9rem; }
.mp-pd-content { margin-top: 2rem; }
.mp-pd-content h2.tab { font-size: 1.25rem; font-weight: 700; border-bottom: 2px solid var(--mp-accent); display: inline-block; padding-bottom: .4rem; margin-bottom: 1rem; }
.mp-pd-content .content { line-height: 1.8; font-size: 1.05rem; }
.mp-pd-content .content img { max-width: 100%; height: auto; }
.mp-related { margin-top: 2rem; }
.mp-related h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }

/* Giỏ hàng */
.mp-cart { background: #fff; border-radius: var(--mp-card-radius); padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mp-cart table { margin: 0; }
.mp-cart td { vertical-align: middle; }
.mp-cart .pimg { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #f4f5f7; }
.mp-cart .pname { font-weight: 600; color: inherit; }
.mp-cart-total { background: #fafafa; border-radius: 10px; padding: 1rem 1.25rem; }
.mp-cart-total .row-line { display: flex; justify-content: space-between; padding: .3rem 0; }
.mp-cart-total .grand { font-size: 1.35rem; font-weight: 700; color: var(--mp-price); border-top: 1px solid #e3e6ea; margin-top: .4rem; padding-top: .6rem; }
.mp-cart-empty { text-align: center; padding: 3rem 1rem; }
.mp-cart-empty i { font-size: 4rem; color: #c5ccd3; }
.mp-checkout .form-control, .mp-checkout .form-select { padding: .7rem .9rem; }
.mp-pay { display: block; border: 1px solid #dfe3e8; border-radius: 10px; padding: .75rem 1rem; margin-bottom: .5rem; cursor: pointer; }
.mp-pay input { margin-right: .5rem; }
.mp-order-done { text-align: center; padding: 2rem 1rem; }
.mp-order-done .icon { font-size: 4rem; color: #2e7d32; }
.mp-order-done .code { font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; }
.mp-bank { white-space: pre-line; background: #fff8e1; border: 1px dashed #f0c36d; border-radius: 10px; padding: 1rem; text-align: left; }
@media (max-width: 767px) { .mp-cart thead { display: none; } .mp-cart td { display: block; border: 0; padding: .25rem 0; } .mp-cart tr { display: block; border-bottom: 1px solid #eee; padding: .75rem 0; } }

/* Biểu tượng giỏ trên header + thông báo */
.mp-cart-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.mp-cart-badge { position: absolute; top: -6px; left: 18px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--mp-sale); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.mp-bump { animation: mp-bump .4s; }
@keyframes mp-bump { 50% { transform: scale(1.4); } }
.mp-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; z-index: 3000; background: #263238; color: #fff; border-radius: 10px; padding: .8rem 1.2rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: all .3s; font-size: 1rem; width: max-content; max-width: 92vw; text-align: center; }
.mp-toast.show { transform: translate(-50%, 0); opacity: 1; }
.mp-toast.err { background: #c62828; }
.mp-toast a { color: #ffd54f; font-weight: 600; margin-left: .5rem; }

/* ----- Nút giỏ hàng dưới thẻ sản phẩm ----- */
.mp-pcard .foot { margin-bottom: .75rem; }
.mp-pcard-act { display: flex; gap: .4rem; padding: 0 1rem 1rem; margin-top: -.25rem; }
.mp-pcard .body + .mp-pcard-act { padding-top: 0; }
.mp-pcard-act a { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: 9px; font-weight: 600; font-size: .9rem;
    padding: .55rem .6rem; text-decoration: none; transition: filter .15s, background .15s, color .15s; white-space: nowrap; }
.mp-pcard-act .btn-add { flex: 1; background: var(--mp-accent); color: #fff; }
.mp-pcard-act .btn-add:hover { filter: brightness(1.08); color: #fff; }
.mp-pcard-act .btn-buy { border: 1.5px solid var(--mp-accent); color: var(--mp-accent); background: #fff; padding-left: .8rem; padding-right: .8rem; }
.mp-pcard-act .btn-buy:hover { background: var(--mp-accent); color: #fff; }
.mp-pcard-act .btn-view { flex: 1; border: 1.5px solid #d5dbe3; color: #4b5563; background: #fff; }
.mp-pcard-act .btn-view:hover { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-pcard .body { padding-bottom: .25rem; }
.mp-plist .mp-pcard { flex-wrap: wrap; }
.mp-plist .mp-pcard-act { flex-basis: 100%; }
@media (max-width: 575px) { .mp-pcard-act { flex-direction: column; padding: 0 .6rem .7rem; } .mp-pcard-act a { font-size: .85rem; } }
.mp-quote-note { background: #fff8e6; border: 1px dashed #f1c75b; border-radius: 10px; padding: .7rem .9rem; font-size: .92rem; color: #6b4e00; }

/* ----- Khối sản phẩm trang chủ ----- */
.mp-psection { margin-bottom: 2.25rem; }
.mp-psection-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1.1rem;
    border-bottom: 2px solid #e8eaee; padding-bottom: .7rem; position: relative; }
.mp-psection-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 90px; height: 2px; background: var(--mp-accent); }
.mp-psection-head h2 { font-size: 1.45rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: .2px; }
.mp-psection-head h2 a { color: var(--mp-ink); text-decoration: none; }
.mp-psection-head h2 a:hover { color: var(--mp-accent); }
.mp-psection-head .subs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.mp-psection-head .subs a { display: inline-block; padding: .3rem .85rem; border-radius: 999px; background: #fff; border: 1px solid #e1e5ea; color: #4b5563;
    font-size: .88rem; text-decoration: none; transition: all .15s; }
.mp-psection-head .subs a:hover { border-color: var(--mp-accent); color: var(--mp-accent); }
.mp-psection-head .more { margin-left: auto; font-weight: 600; color: var(--mp-accent); text-decoration: none; white-space: nowrap; }

/* =====================================================================
   CHỮ LỚN, DỄ ĐỌC CHO CHI TIẾT TIN, CHI TIẾT SẢN PHẨM, MÔ TẢ SẢN PHẨM
   Nội dung soạn từ web cũ hay gắn cứng font-size:12px/14px, font Arial... ngay trong HTML:
   ép các thẻ chữ thường dùng cỡ/phông của theme (tiêu đề h2-h4 trong bài có cỡ riêng).
   ===================================================================== */
body .article-detail .content, body .mp-pd-content .content { font-size: 1.18rem; line-height: 1.85; color: #273240; }
body .article-detail .content p,
body .article-detail .content span,
body .article-detail .content div,
body .article-detail .content font,
body .article-detail .content li,
body .article-detail .content td,
body .article-detail .content th,
body .article-detail .content strong,
body .article-detail .content b,
body .article-detail .content em,
body .article-detail .content i,
body .article-detail .content u,
body .article-detail .content a,
body .article-detail .content label,
body .article-detail .content blockquote,
body .mp-pd-content .content p,
body .mp-pd-content .content span,
body .mp-pd-content .content div,
body .mp-pd-content .content font,
body .mp-pd-content .content li,
body .mp-pd-content .content td,
body .mp-pd-content .content th,
body .mp-pd-content .content strong,
body .mp-pd-content .content b,
body .mp-pd-content .content em,
body .mp-pd-content .content i,
body .mp-pd-content .content u,
body .mp-pd-content .content a,
body .mp-pd-content .content label,
body .mp-pd-content .content blockquote {
    font-size: inherit !important; font-family: inherit !important; line-height: inherit !important;
}
body .article-detail .content p, body .mp-pd-content .content p { margin-bottom: 1rem; }
body .article-detail .content h2,
body .article-detail .content h3,
body .article-detail .content h4,
body .mp-pd-content .content h2,
body .mp-pd-content .content h3,
body .mp-pd-content .content h4 { font-family: inherit !important; font-weight: 700; margin: 1.6rem 0 .8rem; line-height: 1.35; }
body .article-detail .content h2, body .mp-pd-content .content h2 { font-size: 1.55rem !important; }
body .article-detail .content h3, body .mp-pd-content .content h3 { font-size: 1.35rem !important; }
body .article-detail .content h4, body .mp-pd-content .content h4 { font-size: 1.2rem !important; }
body .article-detail .content img, body .mp-pd-content .content img { max-width: 100%; height: auto !important; border-radius: 8px; margin: .5rem 0; }
body .article-detail .content table, body .mp-pd-content .content table { width: 100% !important; margin-bottom: 1rem; }
body .article-detail .content td, body .article-detail .content th, body .mp-pd-content .content td, body .mp-pd-content .content th { padding: .5rem .65rem; border: 1px solid #e3e7ec; }

/* Tiêu đề + phần đầu chi tiết tin */
body .article-detail h1 { font-size: 2.3rem; line-height: 1.3; margin-bottom: .6rem; }
body .article-detail .article-meta { font-size: 1rem; }
body .article-detail .lead { font-size: 1.28rem; line-height: 1.7; font-weight: 500; }

/* Chi tiết sản phẩm */
body .mp-pd h1 { font-size: 2.15rem; }
body .mp-pd .meta { font-size: 1.02rem; }
body .mp-pd .lead { font-size: 1.2rem !important; line-height: 1.7; }
body .mp-pd .note, body .mp-quote-note { font-size: 1.02rem; }
body .mp-pd .actions .btn { font-size: 1.12rem; padding: .85rem 1.7rem; }
body .mp-pd-content h2.tab { font-size: 1.5rem; }
body .mp-related h2 { font-size: 1.5rem; }

/* Thẻ sản phẩm, danh sách tin */
body .mp-pcard h3 { font-size: 1.1rem; }
body .article-item h3 { font-size: 1.3rem; }
body .article-item p { font-size: 1.05rem; }
@media (max-width: 576px) {
    body .article-detail h1 { font-size: 1.75rem; }
    body .mp-pd h1 { font-size: 1.6rem; }
    body .article-detail .content, body .mp-pd-content .content { font-size: 1.08rem; }
}