* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.page { position: relative; display: flex; flex-direction: column; }
main { flex: 1; }
.row > label { line-height: 31px !important; }
.row .form-check, .form-control-static { margin-top: 6px; }
@font-face { font-display: swap; }

@media (min-width: 768px) {
    body.modal-open { overflow: auto !important; padding-right: 0 !important; }
}

.swal2-popup { width: 90% !important; max-width: 400px !important; }
.cart-tip { position: absolute; top: -5px; right: 5px; }
.badge { line-height: 15px; font-size: 0.85em; color: #fff !important; }
label.error { position: absolute; top: 7px; right: 12px; overflow: hidden; width: 20px; height: 20px; }
label.error { z-index: 100 !important; background: url(/images/cross.png) no-repeat; padding: 18px 0 0 18px; }
label.error.checked { background-image: none; }

.swiper-pagination { text-align: right !important; padding-right: 20px; }

form .row div, form div { position: relative; }
.unclickable { pointer-events: none; }
.modal-md { --bs-modal-width: 420px; }
a, .btn-link { color: #006bb7; text-decoration: none; }
sup { top: 6px; color: #e50000; font-size: 20px; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }
.content { padding-top: 1.1rem; }
.ctl-bottom { width: 200px; position: fixed; left: 50%; transform: translateX(-50%); bottom: 80px; z-index: 99; }
.ctl-top { width: 200px; display: block; margin: auto; text-align: center; }
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.hover-gray:hover { background-color: #eee !important; }
.empty-data { text-align: center; margin-top: 150px; color: #999; font-size: 14px; }

.btn-success { background-color: #00a65a; border-color: #008d4c; }
.btn-success:hover,
.btn-success:active,
.btn-success.hover { background-color: #008d4c; }
.btn-purple { --bs-btn-color: #6f42c1; color: #fff; --bs-btn-bg: #6f42c1; --bs-btn-border-color: #6f42c1; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6a2fd4; --bs-btn-hover-border-color: #6f42c1; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6f42c1; --bs-btn-active-border-color: #6f42c1; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #6f42c1; }

.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; z-index: 999; margin: 0 auto; border-top-left-radius: 18px; border-top-right-radius: 18px; }
.bottom-nav a { color: #666; text-decoration: none; font-size: 14px; display: block; }
.bottom-nav a.active { color: #ff4400; }
.bottom-nav .iconfont { font-size: 26px; }

.main-warp { width: 100%; max-width: 480px; margin: 0 auto; background: #f4f4f4; min-height: 100vh; position: relative; overflow-x: hidden; }
.page-content { position: relative; padding-bottom: 70px; }
.main-warp > .page-content > .container { padding-left: 1.5rem; padding-right: 1.5rem; }
.page-title { text-align: center; font-weight: bold; color: #0d6efd; font-size: 18px; padding: 12px 0; border-bottom: 2px solid #0d6efd; margin-bottom: 12px; }
.page-title.green { color: #198754; border-bottom: 2px solid #198754; }
.page-title.brown { color: #caa36e; border-bottom: 2px solid #caa36e; }
.page-title.teal { color: #1fcabc; border-bottom: 2px solid #1fcabc; }
.page-title.purple { color: #6f42c1; border-bottom: 2px solid #6f42c1; }
.page-title.red { color: #ff4400; border-bottom: 2px solid #ff4400; }
.box-panel { padding: 15px 15px 40px 15px; border-radius: 8px; background-color: #fff; }
.swiper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.main-nav a { text-decoration: none; color: #000; }
.cate-item img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.cate-item p { font-size: 12px; margin: 5px 0 0; }

.pdts-cont a { text-decoration: none; color: #000; }
.pdts-card { border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.pdts-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.pdts-pxbd { color: #ff4400; font-size: 16px; font-weight: bold; }
.pdts-pxfg { color: #6f42c1; font-size: 16px; font-weight: bold; }
.pdts-spec { color: #666 }

.fa-pulse { display: inline-block; -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); }

@-webkit-keyframes fa-spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bg-blue { background-color: #3d8bfd }
.bg-gray { background-color: #5a5a5a; }
.bg-green { background-color: #198754; }
.bg-orange { background-color: #fd7e14; }
.bg-teal { background-color: #30bbbb; }
.bg-cyan { background-color: #0dcaf0; }
.bg-aqua { background-color: #00a7d0; }
.bg-purple { --bs-bg-opacity: 1; background-color: #6f42c1 !important }
.swal2-actions button { margin-left: 25px !important; margin-right: 25px !important; }

.text-aqua { color: #51b6ff !important; }
.text-blue { color: var(--bs-blue) !important; }
.text-green { color: var(--bs-green) !important; }
.text-seagreen { color: #2E8B57 !important; }
.text-maroon { color: #d81b60 !important; }
.text-orange { color: #fd7e14 !important; }
.text-gray { color: #666 !important; }
.text-red { color: #ff4400 !important; }
.text-fuchsia { color: #f012be !important; }
.text-purple { color: #6f42c1 !important; }
.text-squash { color: #936c00 !important; }

.m-list-card { background: #fff; border-radius: 8px; margin-bottom: 10px; padding: 12px 15px 8px 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.m-item-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #eee; }
.m-item-row:last-child { border-bottom: none; }
.m-item-row > span:nth-child(1) { color: #666; font-weight: 500; line-height: 20px; height: 20px; width: 60px; display: inline-block; text-align: justify; }
.m-item-row > span:nth-child(1)::after { content: ""; display: inline-block; width: 100%; }
.m-item-row > span:nth-child(2) { color: #333; text-align: right; flex: 1; white-space: nowrap; font-size: 14px; }
.money-row span:nth-child(1) { line-height: 26px; }
.money-row span:nth-child(2) { font-size: 18px; font-weight: bold; }

.chk-name-tip { position: relative; }
.chk-name-tip > .sp-n-tip { color: #999; position: absolute; top: 5px; right: 58px; z-index: 999; display: inline-block; white-space: nowrap; }
.chk-name-tip > .sp-n-tip .badge { line-height: 13px !important; }