/* ============================================================
   Trang thanh toán (/thanh-toan) — #checkout-content
   Nạp SAU css/style.css. Chỉ tác động trong #checkout-content nên
   không đụng tới các view khác của SPA.
   ============================================================ */

#checkout-content {
    /* Chừa chỗ cho thanh đặt hàng dính đáy, nếu không nội dung cuối bị che. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.ck-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: .75rem .75rem 1.5rem;
}

/* ---------- Tiêu đề ---------- */
.ck-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0 .9rem;
}

.ck-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(212, 162, 77, .4);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--text-header);
    transition: background .2s ease;
}

.ck-back:hover {
    background: rgba(212, 162, 77, .16);
}

.ck-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-header);
}

/* ---------- Thẻ nội dung ---------- */
.ck-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(212, 162, 77, .25);
    border-radius: 18px;
    box-shadow: var(--lux-shadow, 0 22px 48px -26px rgba(120, 78, 20, .55));
    padding: 1.1rem 1rem;
    margin-bottom: .9rem;
}

.ck-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-header);
}

.ck-card-title i {
    color: var(--lux-gold-deep, #b8782d);
    font-size: .95rem;
}

.ck-count {
    font-weight: 400;
    font-size: .88rem;
    color: var(--text-normal-muted);
}

/* ---------- Địa chỉ: nút "Thêm địa chỉ giao hàng" khi chưa có ---------- */
.ck-addr-add {
    display: block;
    width: 100%;
    padding: 1.1rem 1rem;
    border: 1.5px dashed rgba(184, 120, 45, .5);
    border-radius: 14px;
    background: rgba(212, 162, 77, .07);
    text-align: center;
    transition: background .18s ease, border-color .18s ease;
}

.ck-addr-add:hover {
    background: rgba(212, 162, 77, .14);
    border-color: var(--lux-gold-deep, #b8782d);
}

.ck-addr-add-main {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-header);
}

.ck-addr-add-main i {
    margin-right: .35rem;
    color: var(--lux-gold-deep, #b8782d);
}

.ck-addr-add-sub {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--text-normal-muted);
}

/* ---------- Địa chỉ: thẻ tóm tắt khi đã có ---------- */
.ck-addr-saved {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}

.ck-addr-info {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-addr-line1 {
    font-size: .95rem;
    color: var(--text-header);
}

.ck-addr-sep {
    margin: 0 .4rem;
    color: rgba(184, 120, 45, .5);
}

.ck-addr-text {
    margin-top: .25rem;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-normal);
}

/* Dòng "Hoá đơn gửi tới: …" ở thẻ địa chỉ đã lưu. Để khách xem lại được email TRƯỚC khi
   bấm đặt hàng — gõ nhầm một chữ thì thư đi mất mà không ai biết. */
.ck-addr-email {
    margin-top: .25rem;
    font-size: .85rem;
    color: #9a8c6a;
    word-break: break-all;
}

.ck-addr-note:not(:empty) {
    margin-top: .35rem;
    font-size: .8rem;
    font-style: italic;
    color: var(--text-normal-muted);
}

.ck-addr-edit {
    flex: 0 0 auto;
    padding: .35rem .8rem;
    border: 1px solid rgba(212, 162, 77, .45);
    border-radius: 8px;
    background: #fff;
    font-size: .84rem;
    font-weight: 500;
    color: var(--lux-gold-deep, #b8782d);
    transition: background .18s ease;
}

.ck-addr-edit:hover {
    background: rgba(212, 162, 77, .14);
}

/* ---------- Nút dưới biểu mẫu ---------- */
.ck-addr-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1rem;
}

.ck-addr-cancel {
    padding: .55rem 1.1rem;
    border: 1px solid rgba(212, 162, 77, .4);
    border-radius: 10px;
    background: #fff;
    font-size: .9rem;
    color: var(--text-normal);
    transition: background .18s ease;
}

.ck-addr-cancel:hover {
    background: rgba(212, 162, 77, .12);
}

.ck-addr-save {
    padding: .55rem 1.3rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
}

/* ---------- Biểu mẫu địa chỉ ---------- */
.ck-fields {
    display: grid;
    /* minmax(0,1fr): tránh input dài đẩy cột rộng ra (xem ghi chú ở .atc-chips) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.ck-field-full {
    grid-column: 1 / -1;
}

.ck-field label {
    display: block;
    margin-bottom: .35rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--text-normal);
}

.ck-req {
    color: #c0392b;
}

.ck-opt {
    font-weight: 400;
    color: var(--text-normal-muted);
}

.ck-field input,
.ck-field select {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid rgba(212, 162, 77, .38);
    border-radius: 10px;
    background: #fff;
    color: var(--text-normal);
    /* 16px: dưới ngưỡng này iOS Safari tự phóng to trang khi focus vào ô nhập. */
    font-size: 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* Bỏ giao diện mặc định của hệ điều hành (iOS bo góc kiểu khác hẳn, Android nền xám) rồi
   tự vẽ mũi tên, để ba ô chọn trông giống hệt các ô nhập bên trên. */
.ck-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a9822f'%3E%3Cpath d='M4.4 6.2 8 9.8l3.6-3.6 1.1 1.1L8 12 3.3 7.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 16px;
}

.ck-field input::placeholder {
    color: rgba(90, 70, 50, .42);
}

.ck-field input:focus,
.ck-field select:focus {
    outline: none;
    border-color: var(--lux-gold-deep, #b8782d);
    box-shadow: 0 0 0 3px rgba(212, 162, 77, .18);
}

.ck-field input.is-invalid,
.ck-field select.is-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

/* Dòng gợi ý dưới ô nhập. Nhạt hơn nhãn để không tranh chỗ với nó, nhưng vẫn đọc được —
   đây là chỗ nói cho khách biết ô Email dùng để làm gì. */
.ck-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.4;
    color: #9a8c6a;
}

.ck-error {
    margin-top: .3rem;
    font-size: .78rem;
    color: #c0392b;
}

/* ---------- Dòng sản phẩm ---------- */
.ck-item {
    display: flex;
    gap: .8rem;
    padding: .85rem 0;
    border-top: 1px solid rgba(212, 162, 77, .2);
}

.ck-item:first-child {
    border-top: none;
    padding-top: 0;
}

.ck-item-img {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(212, 162, 77, .25);
}

.ck-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-item-name {
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-header);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ck-item-size {
    display: inline-block;
    margin-top: .3rem;
    padding: .14rem .5rem;
    border-radius: 6px;
    background: rgba(212, 162, 77, .16);
    font-size: .76rem;
    color: var(--lux-gold-deep, #b8782d);
}

.ck-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .5rem;
}

.ck-item-price {
    font-weight: 700;
    color: var(--lux-gold-deep, #b8782d);
}

/* Bộ đếm số lượng thu nhỏ, dùng lại tạo hình của .qty-stepper */
.ck-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(212, 162, 77, .35);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.ck-qty button {
    width: 32px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--lux-gold-deep, #b8782d);
    font-size: .8rem;
    transition: background .18s ease, opacity .18s ease;
}

.ck-qty button:hover:not(:disabled) {
    background: rgba(212, 162, 77, .14);
}

.ck-qty button:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.ck-qty span {
    min-width: 30px;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-header);
}

.ck-item-remove {
    border: none;
    background: transparent;
    color: var(--text-normal-muted);
    font-size: .8rem;
    padding: .2rem .3rem;
    transition: color .18s ease;
}

.ck-item-remove:hover {
    color: #c0392b;
}

/* ---------- Phương thức thanh toán ---------- */
.ck-pays {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ck-pay input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ck-pay-box {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1.5px solid rgba(212, 162, 77, .3);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ck-pay-box:hover {
    border-color: rgba(184, 120, 45, .55);
}

.ck-pay input:checked+.ck-pay-box {
    border-color: var(--lux-gold-deep, #b8782d);
    background: linear-gradient(180deg, rgba(255, 241, 163, .3), rgba(228, 176, 77, .16));
    box-shadow: 0 0 0 3px rgba(212, 162, 77, .18);
}

.ck-pay input:focus-visible+.ck-pay-box {
    outline: 2px solid var(--lux-gold-deep, #b8782d);
    outline-offset: 2px;
}

.ck-pay-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    flex: 0 0 44px;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
}

.ck-pay-cod {
    background: #2e7d5b;
}

.ck-pay-bank {
    background: var(--lux-gold-deep, #b8782d);
    font-size: .9rem;
}

.ck-pay-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-pay-name {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text-header);
}

.ck-pay-desc {
    display: block;
    font-size: .78rem;
    color: var(--text-normal-muted);
    line-height: 1.35;
}

/* Nút radio vẽ tay cho khớp tông vàng */
.ck-radio {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid rgba(184, 120, 45, .45);
    border-radius: 50%;
    position: relative;
    transition: border-color .18s ease;
}

.ck-pay input:checked+.ck-pay-box .ck-radio {
    border-color: var(--lux-gold-deep, #b8782d);
}

.ck-pay input:checked+.ck-pay-box .ck-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--lux-gold-deep, #b8782d);
}

/* ---------- Thanh voucher ---------- */
.ck-card-tight {
    padding: 0;
    overflow: hidden;
}

.ck-voucher-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .95rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    transition: background .18s ease;
}

.ck-voucher-bar:hover {
    background: rgba(212, 162, 77, .1);
}

.ck-voucher-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: linear-gradient(160deg, #f8c65d, #c99d2e);
    color: #fff;
    font-size: .95rem;
}

.ck-voucher-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-voucher-label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-header);
}

.ck-voucher-status {
    display: block;
    font-size: .8rem;
    color: var(--text-normal-muted);
}

/* Chip hiện số tiền đã giảm khi có mã đang áp */
.ck-voucher-applied:not(:empty) {
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: rgba(192, 57, 43, .1);
    font-size: .8rem;
    font-weight: 600;
    color: #c0392b;
    white-space: nowrap;
}

.ck-voucher-arrow {
    flex: 0 0 auto;
    font-size: .8rem;
    color: rgba(184, 120, 45, .65);
}

/* ---------- Bảng chọn voucher ---------- */
.vc-title {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-header);
}

.vc-input-row {
    display: flex;
    gap: .5rem;
}

.vc-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .8rem;
    border: 1px solid rgba(212, 162, 77, .4);
    border-radius: 10px;
    background: #fff;
    /* 16px: dưới ngưỡng này iOS Safari tự phóng to trang khi focus. */
    font-size: 16px;
    text-transform: uppercase;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vc-input-row input:focus {
    outline: none;
    border-color: var(--lux-gold-deep, #b8782d);
    box-shadow: 0 0 0 3px rgba(212, 162, 77, .18);
}

.vc-input-row .btn {
    flex: 0 0 auto;
    padding: .6rem 1.1rem;
    border-radius: 10px;
    font-weight: 600;
}

.vc-msg:not(:empty) {
    margin-top: .55rem;
    font-size: .82rem;
}

.vc-msg.is-error {
    color: #c0392b;
}

.vc-msg.is-ok {
    color: #2e7d5b;
}

.vc-list {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vc-empty {
    padding: 1.5rem .5rem;
    text-align: center;
    font-size: .88rem;
    color: var(--text-normal-muted);
}

/* Thẻ voucher: khấc tròn hai bên như vé xé */
.vc-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border: 1.5px solid rgba(212, 162, 77, .35);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    width: 100%;
    transition: border-color .18s ease, background .18s ease;
}

.vc-item:hover:not(:disabled) {
    border-color: var(--lux-gold-deep, #b8782d);
    background: rgba(212, 162, 77, .08);
}

.vc-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.vc-item.is-applied {
    border-color: var(--lux-gold-deep, #b8782d);
    background: linear-gradient(180deg, rgba(255, 241, 163, .35), rgba(228, 176, 77, .18));
}

.vc-item-amount {
    flex: 0 0 auto;
    min-width: 68px;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: var(--lux-gold-deep, #b8782d);
    border-right: 1px dashed rgba(184, 120, 45, .4);
    padding-right: .8rem;
}

.vc-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.vc-item-name {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-header);
}

.vc-item-cond {
    display: block;
    font-size: .78rem;
    color: var(--text-normal-muted);
}

.vc-item-state {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--lux-gold-deep, #b8782d);
}

/* ---------- Tóm tắt ---------- */
.ck-sum {
    margin: 0;
}

.ck-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .38rem 0;
    font-size: .92rem;
}

.ck-sum-row dt {
    font-weight: 400;
    color: var(--text-normal);
}

.ck-sum-row dd {
    margin: 0;
    font-weight: 500;
    color: var(--text-normal);
}

.ck-sum-free {
    color: #2e7d5b;
    font-weight: 600;
}

/* Dòng voucher khi thực sự có giảm giá */
.ck-sum-discount {
    color: #c0392b;
    font-weight: 600;
}

.ck-sum-total {
    margin-top: .35rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(212, 162, 77, .28);
}

.ck-sum-total dt {
    font-weight: 600;
    color: var(--text-header);
}

.ck-sum-total dd {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--lux-gold-deep, #b8782d);
}

.ck-terms {
    margin: .9rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-normal-muted);
}

/* ---------- Giỏ rỗng ---------- */
.ck-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.ck-empty i {
    font-size: 2.6rem;
    color: rgba(184, 120, 45, .4);
}

.ck-empty p {
    margin: .9rem 0 1.2rem;
    color: var(--text-normal-muted);
}

/* Nút "Xem sản phẩm" dùng nguyên kiểu .btn-gold3d trong style.css — cùng một định nghĩa
   với nút "Post" ở trang tin tức, không chỉnh thêm cỡ chữ hay đệm ở đây để hai nút giống
   hệt nhau. */

/* ---------- Thanh đặt hàng dính đáy ---------- */
.ck-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 246, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(212, 162, 77, .3);
    box-shadow: 0 -8px 24px -18px rgba(120, 78, 20, .7);
}

.ck-bar-sum {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-bar-label {
    display: block;
    font-size: .76rem;
    color: var(--text-normal-muted);
}

.ck-bar-total {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lux-gold-deep, #b8782d);
}

.ck-submit {
    flex: 0 0 auto;
    min-width: 150px;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 10px 22px -12px rgba(120, 78, 20, .75);
}

.ck-submit:disabled {
    opacity: .6;
}

/* Hai nút nổi (gọi điện: bottom 24px z-index 99999; Zalo: bottom 100px z-index 99) nằm
   đè lên nút "Đặt hàng". Chúng có z-index cao hơn thanh đáy nên không đẩy thanh lên được;
   phải nâng chính hai nút đó, và chỉ nâng khi đang ở trang thanh toán.

   Nâng CẢ HAI cùng một khoảng --ck-lift: nâng mỗi nút gọi thì nó chạy từ 24px lên 102px,
   đúng chỗ nút Zalo đang đứng (100px) và hai nút chồng lên nhau. Cộng cùng một hằng số
   thì khoảng cách 76px giữa chúng được giữ nguyên. */
html.checkout-active .fcta-phoneCircle-vi-tri-nut,
html.checkout-active .fcta-zalo-vi-tri-nut {
    --ck-lift: calc(78px + env(safe-area-inset-bottom, 0px));
}

html.checkout-active .fcta-phoneCircle-vi-tri-nut {
    bottom: calc(24px + var(--ck-lift));
}

html.checkout-active .fcta-zalo-vi-tri-nut {
    bottom: calc(100px + var(--ck-lift));
}

/* Trên màn hình rộng thanh đáy bám theo bề ngang khối nội dung cho cân */
@media (min-width: 768px) {
    .ck-bar {
        justify-content: center;
    }

    .ck-bar-sum,
    .ck-submit {
        flex: 0 0 auto;
    }

    .ck-bar-sum {
        min-width: 220px;
    }
}