/* Checkout v2 — lớp tương thích Bootstrap 3 trên nền Bootstrap 5.
 * Template checkout giữ nguyên class/id (JS core OpenCart phụ thuộc), nên các lớp BS3 mà
 * BS5 đã bỏ được định nghĩa lại ở đây. Mốc BS3: sm 768, md 992, lg 1200. */

/* ---- .hide của BS3: BS5 đã bỏ, thiếu nó thì ô Password/Confirm (register_fields) và các khối JS ẩn bằng addClass('hide') đều hiện ra ---- */
.hide { display: none !important; }

/* ---- Lưới BS3 (col-xs/sm/md/lg) ---- */
.extrow { display: flex; flex-wrap: wrap; margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
.extrow > [class*="col-"] { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
.row > [class*="col-xs-"], .row > [class*="col-sm-"], .row > [class*="col-md-"], .row > [class*="col-lg-"], .extrow > [class*="col-"] { flex: 0 0 auto; }
.col-xs-12 { width: 100%; }
.col-xs-6 { width: 50%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
@media (min-width: 768px) {
  .col-sm-12 { width: 100%; } .col-sm-9 { width: 75%; } .col-sm-6 { width: 50%; }
  .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-1 { width: 8.33333333%; }
}
@media (min-width: 992px) {
  .col-md-9 { width: 75%; } .col-md-6 { width: 50%; } .col-md-3 { width: 25%; }
}
@media (min-width: 1200px) {
  .col-lg-9 { width: 75%; } .col-lg-6 { width: 50%; } .col-lg-3 { width: 25%; }
}

/* ---- Ẩn/hiện theo màn hình ---- */
@media (max-width: 767.98px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
@media (max-width: 767.98px) { .visible-xs { display: block !important; } }

/* ---- Tiện ích ---- */
.hidden { display: none !important; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: var(--bs-secondary-color); }

/* ---- Form ---- */
.form-group { margin-bottom: 1rem; }
.control-label { margin-bottom: .5rem; font-weight: 500; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); }
.radio, .checkbox { display: block; min-height: 1.5rem; margin-bottom: .5rem; padding-left: 1.5em; }
.radio label, .checkbox label { cursor: pointer; font-weight: 400; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -1.5em; margin-top: .25em; }
.has-error .form-control, .has-error .form-select { border-color: var(--bs-danger); }
.has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .checkbox { color: var(--bs-danger); }
.has-success .form-control { border-color: var(--bs-success); }
.input-group-btn { display: flex; }
.input-group-btn > .btn { position: relative; }
.input-group-addon { display: flex; align-items: center; padding: .375rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); background: var(--bs-tertiary-bg); }

/* ---- Nút / nhãn ---- */
.btn-default { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-body-color); }
.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified > .btn, .btn-group-justified > .btn-group { flex: 1 1 0; }
.label { display: inline-block; padding: .2em .6em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; border-radius: .25em; }
.label-danger { background: var(--bs-danger); } .label-default { background: var(--bs-secondary); }
.label-success { background: var(--bs-success); } .label-warning { background: var(--bs-warning); color: #000; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: inherit; opacity: .5; background: none; border: 0; padding: 0; }
.close:hover { opacity: .8; }

/* ---- Panel BS3 -> dạng card ---- */
.panel, .well { margin-bottom: 1.25rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.well { padding: 1.2rem; background: var(--bs-tertiary-bg); }
.panel-default > .panel-heading, .panel > .panel-heading { padding: .75rem 1rem; background: var(--bs-tertiary-bg); border-bottom: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; }
.panel-title { margin: 0; font-size: 1rem; }
.panel-body { padding: 1rem; }
.panel-group .panel + .panel { margin-top: 5px; }

/* ---- Alert BS3 ---- */
.alert .close { position: relative; top: -2px; right: -8px; }

/* ==== Bố cục checkout v2 (chỉ thêm class ck-*, không đổi id/class JS dùng) ==== */
#onepagecheckout { padding-top: 18px; padding-bottom: 40px; }
/* Breadcrumb: dùng đúng kiểu của các trang khác (v2.css chỉ bắt .container > .breadcrumb) */
#onepagecheckout > .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 4px 0 22px; padding: 0; font-size: 13px; background: none; }
#onepagecheckout > .breadcrumb li { display: inline-flex; align-items: center; color: var(--muted); }
#onepagecheckout > .breadcrumb li + li::before { content: "\f054"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; font-size: 9px; margin: 0 10px; opacity: .55; }
#onepagecheckout > .breadcrumb a { color: var(--muted); text-decoration: none; transition: color .15s; }
#onepagecheckout > .breadcrumb a:hover { color: var(--brand-blue); }
#onepagecheckout > .breadcrumb li:last-child a { color: var(--text); font-weight: 600; }
#onepagecheckout > .breadcrumb li:first-child a .fa, #onepagecheckout > .breadcrumb li:first-child a i { color: var(--brand-blue); }
.ck-crumb-ref { margin-left: 8px; font-size: 11px; color: var(--muted); opacity: .6; }
#onepagecheckout #content > h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
.ck-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 22px; border: 1px solid var(--border); border-left: 4px solid var(--brand-yellow); border-radius: 10px; background: var(--bg-soft); color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ck-notice > i { color: #d9a400; font-size: 18px; margin-top: 2px; }
.ck-notice p { margin: 0 0 4px; } .ck-notice p:last-child { margin: 0; }

/* Panel: bo tròn, nền surface, tiêu đề gọn */
#onepagecheckout .panel { border-radius: 12px; border-color: var(--border); background: var(--surface); box-shadow: 0 1px 2px var(--shadow); overflow: visible; }
#onepagecheckout .panel > .panel-heading { background: transparent; border-bottom-color: var(--border); padding: 14px 18px; border-radius: 12px 12px 0 0; }
#onepagecheckout .panel-title { font-size: 15px; font-weight: 600; }
#onepagecheckout .panel-body { padding: 18px; }

/* Khối phương thức thanh toán khi chưa nhập email: thông báo nổi rõ ràng */
#onepagecheckout .hidepayment { inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); border-radius: 0 0 12px 12px; }
#onepagecheckout .hidepayment:empty { display: none; }
#onepagecheckout .hidepayment .alert1.alert-info { position: static; float: none; width: auto; max-width: 100%; margin: 0; text-align: center; padding: 10px 16px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 20px var(--shadow); font-weight: 500; }

/* Cột tóm tắt: dính khi cuộn trên desktop */
@media (min-width: 992px) {
  .ck-side { position: sticky; top: 120px; align-self: flex-start; }
}
.ck-side > br { display: none; }
.ck-due { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; margin: 0 0 14px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
.ck-due-label { font-weight: 600; font-size: 14px; text-transform: none; }
.ck-due .label { float: none !important; font-size: 17px !important; padding: .35em .7em; border-radius: 8px; }
.ck-agree { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; transition: border-color .15s, background-color .15s; }
.ck-agree:hover { border-color: var(--brand-blue); }
.ck-agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-blue); flex: none; }
.ck-agree:has(input:checked) { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface)); }
#confirmp + .confirm-order-content .btn, .confirm-order-content .btn-primary { width: 100%; padding: 12px; border-radius: 10px; font-weight: 600; }

/* ---- Login thu gọn: 1 dòng + modal ---- */
.ck-login-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 18px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-soft); font-size: 14px; color: var(--text-2); }
.ck-login-bar > span i { color: var(--brand-blue); margin-right: 6px; }
.ck-login-link { border: 0; background: none; padding: 4px 2px; font-weight: 700; color: var(--brand-blue); cursor: pointer; }
.ck-login-link i { font-size: 12px; margin-left: 4px; transition: transform .18s; }
.ck-login-link:hover i, .ck-login-link:focus-visible i { transform: translateX(3px); }
.ck-login-modal .modal-content { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.ck-login-modal .modal-header { border-bottom: 1px solid var(--border); }
.ck-login-modal .modal-title { font-size: 18px; font-weight: 700; }
.ck-login-modal .modal-title i { color: var(--brand-blue); margin-right: 6px; }
.ck-login-modal .control-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ck-login-links { text-align: right; font-size: 13px; margin-bottom: 16px; }
.ck-login-modal .has-error .form-control { border-color: #dc3545; }
[data-theme="dark"] .ck-login-modal .btn-close { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ck-login-modal .btn-close { filter: invert(1); } }

/* ---- Phương thức thanh toán: thẻ có logo, ẩn radio (v2 không nạp stylesheet2.min.css) ---- */
#onepagecheckout .paymentarea { max-height: 340px; overflow-y: auto; padding: 4px 2px; }
#onepagecheckout .paymentarea > .cc-selector { padding: 5px; }
#onepagecheckout .cc-selector input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
#onepagecheckout .payment-cursor { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); transition: border-color .15s, background-color .15s, box-shadow .15s; }
#onepagecheckout .payment-cursor:hover { border-color: var(--brand-blue); }
#onepagecheckout .drinkcard-cc { display: block; flex: none; width: 104px; height: 34px; margin: 0; border-radius: 6px; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; }
#onepagecheckout .pmtitle { float: none; margin: 0; opacity: 1; font-size: 14px; }
#onepagecheckout .payment-cursor:has(input:checked) { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-blue) 35%, transparent); }
#onepagecheckout .payment-cursor:has(input:checked)::after { content: "\f00c"; font-family: FontAwesome; margin-left: auto; color: var(--brand-blue); }
#onepagecheckout div[id^="disabled-"] .payment-cursor { cursor: not-allowed; opacity: .5; }
#onepagecheckout div[id^="disabled-"] .drinkcard-cc { filter: grayscale(1); }
@media (max-width: 479px) { #onepagecheckout .drinkcard-cc { width: 84px; height: 28px; } }

/* ---- Checkbox đồng ý SĐT/điều khoản trong form ---- */
#onepagecheckout .ck-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 0; font-weight: 500; font-size: 14px; cursor: pointer; }
#onepagecheckout .ck-check input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--brand-blue); }

/* ---- Nút Checkout khoá cho tới khi tick "I agree to this price" ---- */
.ck-side:has(.ck-agree input:not(:checked)) .confirm-order-content .btn:not(.cm-submit):not(.cm-x) { opacity: .45; pointer-events: none; filter: grayscale(.4); }
/* Dòng ghi chú "one time" dưới tiêu đề Payment Methods (thay khung notice cũ) */
.ck-pay-note { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: var(--text-2); }
.ck-pay-note > i { color: #d9a400; margin-right: 4px; }

/* ==== Bố cục theo bản mẫu _pv/checkout.html: hero xanh, lưới 1.5fr/1fr, thẻ bo 16px ==== */
.ck-hero { padding: 46px 0 42px; }
.ck-hero h1 { font-size: 34px; line-height: 1.2; margin: 12px 0 0; font-weight: 800; color: #fff; }
.ck-hero .ck-crumb-ref { color: #f2f6ff; }
#onepagecheckout { padding-top: 28px; padding-bottom: 56px; }
#onepagecheckout .ck-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; margin: 0; }
#onepagecheckout .ck-layout > [class*="col-"] { width: auto; max-width: none; padding: 0; min-width: 0; }
#onepagecheckout .ck-main { display: flex; flex-direction: column; gap: 24px; }
#onepagecheckout .ck-main > * { margin-bottom: 0; }
#onepagecheckout .ck-main .marginbottom { margin-bottom: 0; }
/* Thẻ form: bỏ viền tiêu đề, kiểu .form-card */
#onepagecheckout .panel { border-radius: 16px; border: 1px solid var(--border); box-shadow: none; margin-bottom: 0; }
#onepagecheckout .panel > .panel-heading { border-bottom: 0; padding: 28px 28px 0; background: transparent; }
#onepagecheckout .panel-title { font-size: 19px; font-weight: 800; }
#onepagecheckout .panel-body { padding: 20px 28px 28px; }
#onepagecheckout .form-control, #onepagecheckout .form-select { border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 14px; padding: 11px 13px; }
#onepagecheckout .form-control:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(38,108,222,.15); }
#onepagecheckout .control-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Cột tóm tắt: kiểu .summary-card */
#onepagecheckout .ck-side { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
@media (min-width: 992px) { #onepagecheckout .ck-side { position: sticky; top: 92px; } }
#onepagecheckout .ck-side .panel { border: 0; border-radius: 0; background: transparent; }
#onepagecheckout .ck-side .panel > .panel-heading { padding: 0 0 16px; }
#onepagecheckout .ck-side .panel-title { font-size: 18px; }
#onepagecheckout .ck-side .panel-body { padding: 0; }
/* Nút xác nhận: vàng, bo tròn như .btn-primary của mẫu */
#onepagecheckout .confirm-order-content .btn, #onepagecheckout .confirm-order-content .btn-primary { width: 100%; background: var(--brand-yellow); color: #10182b; border: 0; border-radius: 999px; padding: 13px 28px; font-size: 15px; font-weight: 700; }
#onepagecheckout .confirm-order-content .btn:hover { filter: brightness(.97); }
/* Thẻ phương thức thanh toán: kiểu .pay-method */
#onepagecheckout .payment-cursor { border-width: 1.5px; border-radius: 12px; padding: 16px; }
#onepagecheckout .payment-cursor:has(input:checked) { background: rgba(38,108,222,.06); box-shadow: 0 0 0 3px rgba(38,108,222,.12); }
@media (max-width: 991.98px) {
  #onepagecheckout .ck-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .ck-hero h1 { font-size: 27px; } .ck-hero { padding: 32px 0 30px; } }
@media (max-width: 560px) { #onepagecheckout .panel > .panel-heading { padding: 20px 18px 0; } #onepagecheckout .panel-body { padding: 16px 18px 20px; } #onepagecheckout .ck-side { padding: 20px 18px; } }

/* ==== Khung thanh toán chia cột: trái 1/3 danh sách cổng, phải 2/3 form cổng (theo _pv/checkout.html) ==== */
#onepagecheckout .pay-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 16px; align-items: start; }
#onepagecheckout .pay-split .pay-methods { min-width: 0; }
#onepagecheckout .pay-split .paymentarea { display: grid; grid-template-columns: 1fr; gap: 10px; max-height: none; overflow: visible; padding: 0; }
#onepagecheckout .pay-split .paymentarea > .cc-selector { width: 100%; padding: 0; }
#onepagecheckout .pay-split .payment-cursor { padding: 14px; }
.pay-loader { display: none; position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--bg-soft) 88%, transparent); backdrop-filter: blur(2px); z-index: 1100; }
.pay-detail.is-loading .pay-loader { display: flex; }
.pay-detail.is-loading .pay-form { visibility: hidden; }
.pl-dots { display: flex; gap: 8px; }
.pl-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--brand-blue); animation: pl-bounce 1s infinite ease-in-out both; }
.pl-dots i:nth-child(2) { animation-delay: .15s; }
.pl-dots i:nth-child(3) { animation-delay: .3s; }
.pl-tx { font-size: 13px; color: var(--muted); }
@keyframes pl-bounce { 0%, 80%, 100% { transform: scale(.45); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pl-dots i { animation-duration: 2.4s; } }
/* Nút trả tiền nằm trong khung phải: khoá tới khi tick "I agree to this price" */
#onepagecheckout:has(.ck-agree input:not(:checked)) .pay-form .btn:not(.cm-submit):not(.cm-x) { opacity: .45; pointer-events: none; filter: grayscale(.4); }
#onepagecheckout .pay-form .btn, #onepagecheckout .pay-form .btn-primary { width: 100%; }
@media (max-width: 640px) { #onepagecheckout .pay-split { grid-template-columns: 1fr; } }

/* ==== Khung phải: trạng thái rỗng / đã chọn cổng ==== */
#onepagecheckout .pay-detail { position: sticky; top: 92px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); overflow: hidden; display: flex; flex-direction: column; }
#onepagecheckout .pay-placeholder { display: none; }
/* Rỗng: chưa có radio nào tick -> ẩn đầu đề + form, hiện lời nhắc ngắn */
#onepagecheckout .pay-split:not(:has(input[name="payment_method"]:checked)) .pay-head,
#onepagecheckout .pay-split:not(:has(input[name="payment_method"]:checked)) .pay-form,
#onepagecheckout .pay-split:not(:has(input[name="payment_method"]:checked)) .pay-loader { display: none !important; }
#onepagecheckout .pay-split:has(input[name="payment_method"]:checked) .pay-empty { display: none; }
.pay-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; gap: 6px; }
.pay-empty .pe-ic { font-size: 26px; color: var(--brand-blue); margin-bottom: 6px; }
.pay-empty h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.pay-empty .pe-sub { margin: 0; font-size: 14px; color: var(--text-2); max-width: 280px; }
/* Đã chọn: đầu đề logo + tên cổng, form bên dưới */
.pay-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pay-head .ph-logo { flex: none; width: 88px; height: 32px; border: 1px solid var(--border); background-color: #fff; }
.pay-head .ph-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pay-head .ph-txt em { font-style: normal; font-size: 12px; color: var(--muted); }
.pay-head .ph-txt b { font-size: 15px; font-weight: 700; color: var(--text); }
.pay-head .ph-lock { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pay-head .ph-lock i { color: var(--brand-blue); margin-right: 3px; }
#onepagecheckout .pay-form { padding: 18px; }
/* Danh sách cổng gọn hơn: thẻ thấp, logo nhỏ */
#onepagecheckout .pay-split .paymentarea { gap: 8px; }
#onepagecheckout .pay-split .payment-cursor { min-height: 0; padding: 9px 12px; gap: 10px; border-radius: 10px; }
#onepagecheckout .pay-split .drinkcard-cc { width: 84px; height: 30px; }
#onepagecheckout .pay-split .pmtitle { font-size: 13.5px; line-height: 1.2; }
@media (max-width: 640px) {
  #onepagecheckout .pay-detail { position: static; }
  .pay-empty { padding: 24px 18px; }
}

/* Dòng phí do model ghi màu đỏ inline: nâng độ tương phản ở nền tối */
[data-theme="dark"] #onepagecheckout span[style*="color:red"],
[data-theme="dark"] #onepagecheckout span[style*="color: red"] { color: #ff8a80 !important; }

/* ==== 4/10: bỏ chia 1/3–2/3 (cột phải trống, danh sách dài). Cổng xếp lưới nhiều cột; khung chi tiết chỉ hiện bên dưới khi đã chọn ==== */
#onepagecheckout .pay-split { display: block; }
#onepagecheckout .pay-split .paymentarea { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
#onepagecheckout .pay-split .payment-cursor { flex-direction: column; justify-content: center; gap: 8px; padding: 12px 8px; min-height: 84px; text-align: center; position: relative; }
#onepagecheckout .pay-split .drinkcard-cc { width: 100%; max-width: 96px; height: 30px; }
#onepagecheckout .pay-split .pmtitle { font-size: 13px; line-height: 1.2; }
#onepagecheckout .pay-split .payment-cursor:has(input:checked)::after { position: absolute; top: 6px; right: 8px; margin: 0; font-size: 12px; }
#onepagecheckout .pay-split .pay-empty { display: none !important; }
#onepagecheckout .pay-split:not(:has(input[name="payment_method"]:checked)) .pay-detail { display: none; }
#onepagecheckout .pay-split .pay-detail { position: static; margin-top: 14px; }
@media (max-width: 640px) { #onepagecheckout .pay-split .paymentarea { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==== 4/10: căn lề lưới cổng với khung chi tiết; trả padding cho thẻ giỏ hàng ==== */
/* .row của khối cổng có margin âm -12px làm lưới tràn ra ngoài khung: triệt tiêu */
#onepagecheckout .pay-split .pay-methods .row { margin-left: 0; margin-right: 0; }
#onepagecheckout .pay-split .pay-methods .row > * { padding-left: 0; padding-right: 0; }
/* Rule .ck-layout > [class*="col-"] (padding:0) đè padding của thẻ tóm tắt: nâng độ ưu tiên */
#onepagecheckout .ck-layout > .ck-side { padding: 26px; }
@media (max-width: 560px) { #onepagecheckout .ck-layout > .ck-side { padding: 20px 18px; } }

/* ==== 4/10: email hợp lệ, ô điện thoại khoá mã vùng, ô Country tìm kiếm ==== */
/* Email hợp lệ: nhãn xanh lá + dấu check */
#onepagecheckout .form-group.is-valid > label { color: #16a34a; }
#onepagecheckout .form-group.is-valid > label::after { content: "\f00c"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", FontAwesome; font-weight: 900; margin-left: 6px; }
#onepagecheckout .form-group.is-valid .form-control, #onepagecheckout .form-group.is-valid .ts-control { border-color: #16a34a; }
/* Dòng trống của Country không hiện trong danh sách */
#onepagecheckout .ts-dropdown .option[data-value=""] { display: none; }
/* Phone: mã vùng khoá, chỉ đọc */
#onepagecheckout .ck-phone { display: flex; flex-wrap: nowrap; }
#onepagecheckout .ck-phone .ck-phone-code { flex: 0 0 84px; width: 84px; text-align: center; font-weight: 600; cursor: not-allowed; pointer-events: none; background: var(--bg-soft); color: var(--text-2); border-top-right-radius: 0; border-bottom-right-radius: 0; }
#onepagecheckout .ck-phone .ck-phone-code + .form-control { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
/* Country: TomSelect theo màu giao diện */
#onepagecheckout .ts-wrapper .ts-control { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: none; }
#onepagecheckout .ts-wrapper .ts-control input { color: var(--text); }
#onepagecheckout .ts-wrapper.focus .ts-control { border-color: var(--brand-blue); }
#onepagecheckout .ts-dropdown { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); overflow: hidden; z-index: 50; }
#onepagecheckout .ts-dropdown .option { padding: 8px 12px; }
#onepagecheckout .ts-dropdown .active { background: color-mix(in srgb, var(--brand-blue) 14%, var(--surface)); color: var(--text); }

/* ==== 4/10: mã giảm giá dạng nút bật/tắt + nhóm input/nút ==== */
#onepagecheckout .ck-coupon-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface); }
#onepagecheckout .ck-coupon-toggle:hover { border-color: var(--brand-blue); }
#onepagecheckout .ck-coupon-toggle .ck-chev { margin-left: auto; font-size: 12px; transition: transform .18s; }
#onepagecheckout .ck-coupon-toggle.open .ck-chev { transform: rotate(180deg); }
#onepagecheckout #showcoupon { margin-top: 10px; }
#onepagecheckout #showcoupon .form-group { margin: 0; }
#onepagecheckout #ip-coupon { display: flex; flex-wrap: nowrap; align-items: stretch; }
#onepagecheckout #ip-coupon .form-control { flex: 1 1 auto; min-width: 0; height: 46px; border-radius: 999px 0 0 999px; }
#onepagecheckout #ip-coupon .input-group-btn { flex: none; margin-left: -1px; }
#onepagecheckout #ip-coupon .btn { height: 46px; padding: 0 22px; border-radius: 0 999px 999px 0; }

/* ==== 4/10: ảnh + tên sản phẩm có khoảng cách, bỏ khung ==== */
#onepagecheckout .ck-side .table-responsive { border: 0; }
#onepagecheckout .ck-side td > img.img-thumbnail { width: 56px; height: 56px; object-fit: cover; padding: 0; border: 0; border-radius: 10px; background: transparent; }
#onepagecheckout .ck-side td:has(> img.img-thumbnail) { width: 56px; padding-right: 14px; vertical-align: middle; }
#onepagecheckout .ck-side td:has(> img.img-thumbnail) + td { vertical-align: middle; }

/* ==== 4/10: khung form cổng trống thì ẩn (tránh khung rỗng dưới lưới cổng) ==== */
#onepagecheckout .pay-split .pay-detail:not(.is-loading):has(.pay-form:empty) { display: none !important; }

/* ==== 4/10: huy hiệu bảo mật ==== */
.ck-trust { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ck-trust ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.ck-trust-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface); }
.ck-trust-badges i { color: #16a34a; }
.ck-trust-cards li { font-size: 28px; line-height: 1; color: var(--muted); }

/* ==== 4/10: sửa lỗi sau khi bấm Checkout / ảnh sản phẩm / khoảng cách mã giảm giá ==== */
/* Cảnh báo do JS chèn có style inline float:left làm lưới cổng bị ép thành cột hẹp: ép về khối đầy chiều ngang */
#onepagecheckout .alert[style*="float"] { float: none !important; display: block; width: 100% !important; margin: 0 0 14px !important; clear: both; }
#onepagecheckout .alert[style*="float"] .close { float: right; }
/* Ảnh sản phẩm luôn vuông 56x56 */
#onepagecheckout .ck-side td > img.img-thumbnail { width: 56px !important; min-width: 56px; max-width: 56px; height: 56px !important; min-height: 56px; max-height: 56px; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* Khoảng cách giữa mã giảm giá và khung "You must pay" */
#onepagecheckout .ck-side .ck-due { margin-top: 18px; }
/* Logo sản phẩm: ô vuông nền trắng, logo nằm gọn bên trong (logo nền trong suốt không bị trông dẹt) */
#onepagecheckout .ck-side td > img.img-thumbnail { object-fit: contain; background: #fff; padding: 4px; border-radius: 12px; box-sizing: border-box; }
/* Ô logo có viền mảnh để thấy rõ khung vuông trên nền sáng */
#onepagecheckout .ck-side td > img.img-thumbnail { border: 1px solid var(--border); }

/* ==== 5/10: modal nhập thẻ (theo _pv/static.css). Mobile trượt lên từ đáy ==== */
/* Dòng tóm tắt thẻ trong khung phải */
.cc-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); }
.cc-summary .cc-sum-ic { flex: none; font-size: 26px; line-height: 1; color: var(--muted); }
.cc-summary .cc-sum-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cc-summary .cc-sum-tx em { font-style: normal; font-size: 12px; color: var(--muted); }
.cc-summary .cc-sum-val { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#onepagecheckout .pay-form .cc-sum-btn { width: auto; margin-left: auto; flex: none; padding: 7px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; opacity: 1; pointer-events: auto; filter: none; }
#onepagecheckout .pay-form .cc-sum-btn:hover { border-color: var(--brand-blue); }
.cc-stripe-note { margin: 12px 0 0; }
/* Modal */
body.cm-open { overflow: hidden; }
.cm-backdrop { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17,24,39,.55); }
.cm-backdrop[hidden] { display: none; }
.cm { width: 100%; max-width: 460px; background: var(--surface); color: var(--text); border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: cm-in .18s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cm-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.cm-x { border: 0; background: none; color: var(--muted); font-size: 18px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.cm-x:hover { background: var(--bg-soft); color: var(--text); }
.cm-lb { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.cm-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 1px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s; }
.cm-group:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(38,108,222,.18); }
.cm-group.is-bad { border-color: #df1b41; box-shadow: 0 0 0 3px rgba(223,27,65,.14); }
.cm-group input { width: 100%; box-sizing: border-box; height: auto; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; min-width: 0; box-shadow: none; border-radius: 0; font-variant-numeric: tabular-nums; }
.cm-group input::placeholder { color: var(--muted); }
.cm-group input:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s; }
.cm-num { position: relative; flex: 1 1 auto; min-width: 0; }
.cm-num input { padding-left: 46px; padding-right: 8px; }
.cm-brand { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--muted); pointer-events: none; line-height: 1; }
.cm-sub { display: flex; flex: none; }
.cm-sub input { padding-left: 8px; padding-right: 8px; }
.cm-group .cc-exp { width: 76px; }
.cm-group .cc-cvc { width: 56px; padding-right: 14px; }
.cm-err { margin: 8px 0 0; font-size: 13px; color: #df1b41; }
.cm-err[hidden] { display: none; }
#onepagecheckout .pay-form .cm-submit { width: 100%; margin-top: 18px; text-align: center; cursor: pointer; opacity: 1; pointer-events: auto; filter: none; }
.cm-foot { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
.cm-foot i { margin-right: 4px; }
@media (max-width: 640px) {
  .cm-backdrop { align-items: flex-end; padding: 0; }
  .cm { max-width: none; border-radius: 16px 16px 0 0; padding-left: 16px; padding-right: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); animation-name: cm-up; }
  @keyframes cm-up { from { transform: translateY(100%); } to { transform: none; } }
  .cm-num input { padding-left: 38px; }
  .cm-brand { left: 11px; font-size: 20px; }
  .cm-group .cc-exp { width: 82px; }
  .cm-group .cc-cvc { width: 50px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cm { animation: none; } }
@media (max-width: 380px) {
  .cm-group .cc-exp { width: 64px; padding-left: 4px; padding-right: 4px; }
  .cm-group .cc-cvc { width: 42px; padding-left: 4px; padding-right: 8px; }
  .cm-num input { padding-right: 4px; }
}

/* ==== 5/10 mobile: giỏ hàng là bottom sheet, thanh tổng tiền dính đáy ==== */
.ck-sheet-bar, .ck-sheet-backdrop { display: none; }
@media (max-width: 991.98px) {
  #onepagecheckout { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Giỏ rời luồng, nằm dưới màn hình, trượt lên trên thanh tổng tiền */
  #onepagecheckout .ck-side .ext-carts { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 141; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 18px 18px 8px; box-shadow: 0 -12px 40px rgba(0,0,0,.28); transform: translateY(calc(100% + 80px)); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
  body.ck-sheet-open #onepagecheckout .ck-side .ext-carts { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
  /* Tổng tiền đã hiện ở thanh đáy nên khỏi lặp "You must pay" trong sheet khi đang đóng; trong sheet vẫn giữ */
  .ck-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 140; background: rgba(17,24,39,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.ck-sheet-open .ck-sheet-backdrop { opacity: 1; pointer-events: auto; }
  .ck-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 142; box-sizing: border-box; min-height: 60px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; box-shadow: 0 -4px 18px rgba(0,0,0,.12); cursor: pointer; }
  .ck-sheet-bar[hidden] { display: none; }
  .ck-sheet-bar .csb-l { font-weight: 600; }
  .ck-sheet-bar .csb-l i { margin-right: 6px; color: var(--brand-blue); }
  .ck-sheet-bar .csb-r { display: inline-flex; align-items: center; gap: 10px; }
  .ck-sheet-bar .csb-r b { font-size: 17px; }
  .ck-sheet-bar .csb-chev { transition: transform .28s; color: var(--muted); }
  body.ck-sheet-open .ck-sheet-bar .csb-chev { transform: rotate(180deg); }
  body.ck-sheet-open { overflow: hidden; }
  /* Khung .ck-side hết là thẻ viền: giờ chỉ còn ô đồng ý + nút xác nhận */
  #onepagecheckout .ck-layout > .ck-side { padding: 0; border: 0; background: transparent; }
}
@media (prefers-reduced-motion: reduce) { #onepagecheckout .ck-side .ext-carts, .ck-sheet-backdrop, .ck-sheet-bar .csb-chev { transition: none; } }

/* Nút trong khung thanh toán và nút Checkout: không float, luôn rộng hết khung, không nhảy trái/phải */
#onepagecheckout .pay-form .buttons,
#onepagecheckout .confirm-order-content .buttons { margin: 0; }
#onepagecheckout .pay-form .buttons .pull-right,
#onepagecheckout .pay-form .buttons .pull-left,
#onepagecheckout .confirm-order-content .buttons .pull-right,
#onepagecheckout .confirm-order-content .buttons .pull-left { float: none !important; width: 100%; }
#onepagecheckout .pay-form .buttons .btn,
#onepagecheckout .confirm-order-content .buttons .btn { display: block; width: 100%; text-align: center; }
#onepagecheckout .confirm-order-content .text-right { text-align: center !important; }

/* Chỉ còn một nút thanh toán (bên phải); nút Confirm Order của form cổng ẩn đi, nút phải bấm hộ nó */
#onepagecheckout .pay-form > .buttons,
#onepagecheckout .pay-form form > .buttons { display: none !important; }

/* Loader giỏ hàng: dùng 3 chấm giống loader cổng thanh toán, bỏ GIF hình thoi + khung xám */
#onepagecheckout .ext-carts .cart-loader { position: static; width: auto; height: auto; z-index: auto; display: flex; align-items: center; justify-content: center; padding: 28px 0; background: transparent; }

/* Dòng chú thích dưới ô điện thoại: chữ nhỏ, hiện đủ một dòng */
#onepagecheckout .ck-phone ~ small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--text-muted, #6b7280); white-space: normal; }