/* MiniPortal - giao diện chung cho mọi theme: nút, ô nhập, nhãn, phân trang, breadcrumb.
   Nạp NGAY SAU bootstrap và TRƯỚC style.css của theme, nên theme vẫn ghi đè được.
   Màu lấy từ biến của theme: --mp-accent, --mp-accent-soft (viền sáng khi focus), --mp-radius. */
:where(:root) { --mp-radius: 10px; }
body { -webkit-font-smoothing: antialiased; }

/* ----- Nhãn ----- */
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: inherit; }
.form-label .req, .form-label.required::after { color: #e53935; }
.form-label.required::after { content: " *"; }
.form-text { font-size: .82rem; opacity: .75; }

/* ----- Ô nhập, ô chọn ----- */
.form-control, .form-select {
    border: 1.5px solid #d5dbe3; border-radius: var(--mp-radius); padding: .7rem 1rem; font-size: 1rem;
    background-color: #fff; color: #1f2933; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control:hover, .form-select:hover { border-color: #b8c2cf; }
.form-control:focus, .form-select:focus {
    border-color: var(--mp-accent, #0d6efd); background-color: #fff;
    box-shadow: 0 0 0 4px var(--mp-accent-soft, rgba(13, 110, 253, .14));
}
.form-control::placeholder { color: #98a2b0; }
.form-control-sm, .form-select-sm { padding: .45rem .75rem; font-size: .9rem; border-radius: 8px; }
.form-control-lg, .form-select-lg { padding: .85rem 1.15rem; font-size: 1.1rem; border-radius: 12px; }
textarea.form-control { line-height: 1.6; min-height: 120px; }
.input-group-text { border: 1.5px solid #d5dbe3; border-radius: var(--mp-radius); background: #f5f7fa; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #e53935; }
.text-danger.small { display: block; margin-top: .3rem; font-weight: 500; }

/* Checkbox / radio */
input[type=checkbox], input[type=radio] { accent-color: var(--mp-accent, #0d6efd); width: 1.1rem; height: 1.1rem; vertical-align: -3px; cursor: pointer; }
input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; margin-left: .35rem; }

/* ----- Nút ----- */
.btn {
    border-radius: var(--mp-radius); font-weight: 600; padding: .65rem 1.3rem; font-size: 1rem; letter-spacing: .1px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: 0 0 0 4px var(--mp-accent-soft, rgba(13, 110, 253, .2)); }
.btn-sm { padding: .4rem .85rem; font-size: .88rem; border-radius: 8px; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1.1rem; border-radius: 12px; }
.btn-primary { box-shadow: 0 4px 14px -4px var(--mp-accent, #0d6efd); }
.btn-primary:hover { box-shadow: 0 8px 20px -6px var(--mp-accent, #0d6efd); }
.btn-outline-primary, .btn-outline-secondary { border-width: 1.5px; background: #fff; }
.btn-light { background: #fff; border-color: #fff; color: #1f2933; }
.btn .bi { margin-right: .2rem; }

/* ----- Phân trang ----- */
.mp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: 1.5rem 0 .5rem; }
.mp-pager-info { font-size: .9rem; opacity: .65; }
.pagination { gap: .4rem; margin: 0; flex-wrap: wrap; justify-content: center; }
.pagination .page-link {
    border: 1.5px solid #dde2e8; border-radius: 10px !important; min-width: 44px; height: 44px; padding: 0 .85rem;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #374151; background: #fff;
    transition: all .15s;
}
.pagination .page-link:hover { border-color: var(--mp-accent, #0d6efd); color: var(--mp-accent, #0d6efd); background: #fff; transform: translateY(-1px); }
.pagination .page-item.active .page-link {
    background: var(--mp-accent, #0d6efd); border-color: var(--mp-accent, #0d6efd); color: #fff;
    box-shadow: 0 6px 16px -6px var(--mp-accent, #0d6efd);
}
.pagination .page-item.disabled .page-link { border-color: transparent; background: transparent; color: #9aa3ad; }
.pagination .page-link:focus { box-shadow: 0 0 0 4px var(--mp-accent-soft, rgba(13, 110, 253, .14)); }

/* ----- Breadcrumb ----- */
.breadcrumb { margin-bottom: 1.25rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; font-weight: 700; }
.breadcrumb-item.active { font-weight: 500; }

/* ----- Form liên hệ / đặt hàng (module) ----- */
.mp-module-contactform .btn, .mp-checkout .btn-primary { min-width: 180px; }
.mp-module-contactform .form-control { background: #fbfcfd; }
.mp-module-contactform .form-control:focus { background: #fff; }
.alert { border: 0; border-radius: 12px; padding: 1rem 1.25rem; }
.alert-success { background: #e8f7ef; color: #146c43; }
.alert-danger { background: #fdecee; color: #b02a37; }
.alert-warning { background: #fff6e0; color: #8a5a00; }

/* ----- Nhãn nổi (form liên hệ, đặt hàng) ----- */
.form-floating > .form-control, .form-floating > .form-select { height: calc(3.6rem + 3px); padding: 1.6rem 1rem .5rem; }
.form-floating > textarea.form-control, .form-floating > .mp-textarea { height: 140px; padding-top: 1.9rem; }
.form-floating > label { padding: 1.05rem 1rem; color: #6b7684; font-weight: 500; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--mp-accent, #0d6efd); font-weight: 600; opacity: 1; transform: scale(.82) translateY(-.6rem) translateX(.15rem); }
.form-floating > .form-control:not(:focus):not(:placeholder-shown) ~ label { color: #6b7684; }
.form-floating > label::after { background: transparent !important; }
.form-floating .req { color: #e53935; }

/* ----- Mã xác nhận (captcha) ----- */
.mp-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mp-captcha .form-floating { flex: 1 1 180px; max-width: 260px; }
.mp-captcha .form-floating .form-control { text-transform: uppercase; letter-spacing: 3px; font-weight: 600; }
.mp-captcha-img { border-radius: 10px; border: 1.5px solid #d5dbe3; height: 3.6rem; width: auto; background: #f4f6fa; }
.mp-captcha-new { border: 1.5px solid #d5dbe3; background: #fff; border-radius: 10px; width: 3rem; height: 3.6rem; font-size: 1.2rem; color: #4b5563; }
.mp-captcha-new:hover { border-color: var(--mp-accent, #0d6efd); color: var(--mp-accent, #0d6efd); }