/* ============================================================
   WKN Custom Checkout – Styles
   Inspired by Sapo/Shopify checkout design
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────────────────────
   Màu & font lấy từ theme thật (Customizer): --primary-color, --fs-color-*
   để trang giỏ hàng/checkout/thank-you luôn đồng bộ với thương hiệu của site.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --co-font        : "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --co-heading-font: "Playfair", Georgia, serif;

    --wkn-primary  : var(--primary-color, #c49c63);
    --wkn-secondary: var(--fs-color-secondary, #570d0d);
    --wkn-cream    : var(--fs-color-success, #f1e7d8);

    --co-bg        : #ffffff;
    --co-sidebar-bg: #faf7f2;
    --co-border    : #dbdbdb;
    --co-border-f  : var(--wkn-primary);
    --co-text      : var(--fs-color-base, #2b2118);
    --co-muted     : #8a7f6f;
    --co-accent    : var(--wkn-primary);
    --co-link      : var(--wkn-secondary);
    --co-danger    : var(--fs-color-alert, #b20000);
    --co-success   : #2e7d32;
    --co-radius    : 6px;
    --co-input-h   : 52px;
    --co-max-w     : 1160px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
.wkn-co-body * { box-sizing: border-box; }
.wkn-co-body {
    margin     : 0;
    background : var(--co-bg);
    font-family: var(--co-font);
    font-size  : 14px;
    color      : var(--co-text);
    line-height: 1.5;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.wkn-co-container {
    max-width: 1400px;
    margin   : 0 auto;
    padding  : 0 20px;
}

/* ── THEME WRAP ────────────────────────────────────────────────────────────
   Bọc nội dung do plugin render bên trong #main của theme (get_header()/
   get_footer() thật), tạo scope riêng cho toàn bộ CSS bên dưới.
   ════════════════════════════════════════════════════════════════════════ */
.wkn-co-theme-wrap { background: var(--co-bg); }

/* ── PAGE HEAD: tiêu đề + thanh bước ─────────────────────────────────────── */
.wkn-co-page-head {
    padding      : 28px 0 22px;
    border-bottom: 1px solid var(--co-border);
    background   : var(--co-sidebar-bg);
}
.wkn-co-page-title {
    margin        : 0 0 20px;
    font-family   : var(--co-heading-font);
    font-size     : 26px;
    font-weight   : 700;
    letter-spacing: .5px;
    color         : var(--co-text);
    text-align    : center;
}

/* ── STEPS ────────────────────────────────────────────────────────────────── */
.wkn-co-steps {
    display        : flex;
    align-items    : flex-start;
    justify-content: center;
    gap            : 0;
    max-width      : 560px;
    margin         : 0 auto;
}
.wkn-co-step {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 6px;
    position      : relative;
}
.wkn-co-step::before {
    content      : '';
    position     : absolute;
    top          : 15px;
    left         : -50%;
    width        : 100%;
    height       : 0;
    border-top   : 1.5px dashed var(--co-border);
    z-index      : 0;
}
.wkn-co-step:first-child::before { display: none; }
.wkn-co-step-num {
    position     : relative;
    z-index      : 1;
    display      : flex;
    align-items  : center;
    justify-content: center;
    width        : 30px;
    height       : 30px;
    border-radius: 50%;
    background   : var(--co-bg);
    border       : 1.5px solid var(--co-border);
    color        : var(--co-muted);
    font-size    : 13px;
    font-weight  : 700;
}
.wkn-co-step-label {
    font-size  : 12px;
    color      : var(--co-muted);
    text-align : center;
    white-space: nowrap;
}
.wkn-co-step.is-current .wkn-co-step-num {
    background: var(--wkn-secondary);
    border-color: var(--wkn-secondary);
    color     : #fff;
}
.wkn-co-step.is-current .wkn-co-step-label { color: var(--co-text); font-weight: 600; }
.wkn-co-step.is-done .wkn-co-step-num {
    background  : var(--wkn-secondary);
    border-color: var(--wkn-secondary);
    color       : #fff;
}
.wkn-co-step.is-done::before { border-top-style: solid; border-top-color: var(--wkn-secondary); opacity: .5; }

@media (max-width: 480px) {
    .wkn-co-step-label { display: none; }
    .wkn-co-steps { max-width: 320px; }
}

/* ── PAGE HEAD (biến thể nằm trong cột nội dung, không phải banner full-width) ──
   Tỉ lệ cố định 3-7: tiêu đề chiếm 3 phần, thanh bước chiếm 7 phần. Cả 2 đều
   flex-basis:0% nên luôn có chiều rộng xác định (không phụ thuộc nội dung),
   nhờ vậy .wkn-co-steps bên trong cũng có chiều rộng rõ ràng để chia đều cho
   4 bước — không còn tình trạng flexbox tính sai / tràn ra ngoài như trước. */
.wkn-co-page-head--inline {
    display        : flex;
    align-items    : center;
    flex-wrap      : nowrap;
    gap            : 16px;
    padding        : 0;
    margin-bottom  : 24px;
    background     : none;
    border-bottom  : none;
    max-width      : 100%;
    overflow       : hidden; /* lưới an toàn: không bao giờ cho tràn ra ngoài hàng này */
}
.wkn-co-page-head--inline .wkn-co-page-title {
    flex       : 3 1 0%;
    min-width  : 0;
    margin     : 0;
    text-align : left;
    font-size  : 22px;
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
}
/* Ẩn nhãn chữ ("Giỏ hàng", "Thanh toán"...) trong bối cảnh chật hẹp này — chỉ
   còn số + đường nối. Vì .wkn-co-steps giờ có chiều rộng xác định (flex:7),
   mỗi bước dùng lại flex:1 như mặc định để chia đều, đường nối tính đúng. */
.wkn-co-page-head--inline .wkn-co-steps {
    flex     : 7 1 0%;
    min-width: 0;
    margin   : 0;
    max-width: none;
    gap      : 0;
}
.wkn-co-page-head--inline .wkn-co-step-label { display: none; }
@media (max-width: 640px) {
    .wkn-co-page-head--inline { flex-wrap: wrap; }
    .wkn-co-page-head--inline .wkn-co-page-title { flex: 0 0 100%; }
    .wkn-co-page-head--inline .wkn-co-steps { flex-basis: 100%; }
}

/* ── MOBILE TOGGLE BAR ──────────────────────────────────────────────────── */
.wkn-co-mobile-bar {
    background   : #f5f5f5;
    border-bottom: 1px solid var(--co-border);
    display      : none;  /* hidden on desktop */
}
.wkn-co-summary-toggle {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    width          : 100%;
    padding        : 14px 20px;
    background     : none;
    border         : none;
    cursor         : pointer;
    font-family    : var(--co-font);
    font-size      : 14px;
    color          : var(--co-link);
    gap            : 8px;
}
.wkn-co-summary-toggle-left {
    display    : flex;
    align-items: center;
    gap        : 7px;
}
.wkn-co-toggle-chevron {
    transition: transform 200ms ease;
}
.wkn-co-summary-toggle[aria-expanded="true"] .wkn-co-toggle-chevron {
    transform: rotate(180deg);
}
.wkn-co-toggle-total { font-weight: 700; color: var(--co-text); white-space: nowrap; }
.wkn-co-mobile-summary { padding: 0 20px 16px; }

/* ── PAGE LAYOUT ─────────────────────────────────────────────────────────── */
.wkn-co-main{
        background: white;
    padding: 20px;
    border-radius: var(--co-radius);
    border: 1px solid var(--co-border);
}
.wkn-co-page{
    background: #FAF8F7;
}

.wkn-co-page { padding: 32px 0 60px; }

.wkn-co-form { display: block; }

.wkn-co-layout {
    display              : grid;
    grid-template-columns: 1fr 380px;
    gap                  : 20px;
    align-items          : start;
}

/* ── MAIN (left column) ──────────────────────────────────────────────────── */
.wkn-co-main { min-width: 0; }

/* WC notices */
.wkn-co-main .woocommerce-notices-wrapper { margin-bottom: 16px; }
.wkn-co-main .woocommerce-error,
.wkn-co-main .woocommerce-message,
.wkn-co-main .woocommerce-info {
    padding      : 12px 16px;
    border-radius: var(--co-radius);
    margin-bottom: 12px;
    font-size    : 13.5px;
    list-style   : none;
}
.wkn-co-main .woocommerce-error   { background: #fdecea; border-left: 3px solid var(--co-danger); color: #c62828; }
.wkn-co-main .woocommerce-message { background: #e8f5e9; border-left: 3px solid #388e3c; color: #1b5e20; }

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.wkn-co-section { margin-bottom: 28px; }

.wkn-co-section-head {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 16px;
    padding-bottom : 10px;
}
.wkn-co-section-title {
    margin    : 0;
    font-size : 20px;
    font-weight: 600;
    color     : var(--co-text);
}
.woocommerce-form-coupon-toggle{
    display: none;
}
.wkn-co-login-link {
    display    : flex;
    align-items: center;
    gap        : 5px;
    font-size  : 13px;
    color      : var(--co-link);
    text-decoration: none;
    white-space: nowrap;
}
#wkn_coupon_code::placeholder {
    color: #aaaaaa !important;
    opacity: 1 !important;
}
#wkn_coupon_code{
      height: 38px !important;
    padding: 0 10px !important;
    line-height: normal !important;
    font-size: 14px !important;

}
.wkn-co-login-link:hover { text-decoration: underline; }

/* ── FIELDSET ────────────────────────────────────────────────────────────── */
.wkn-co-fieldset { display: flex; flex-direction: column; gap: 14px; }
.wkn-co-field-row {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 14px;
}
.wkn-co-note-wrap { margin-top: 14px; margin-bottom: 0; }

/* ── Nút đặt hàng cuối cột trái ───────────────────────────────────────── */
.wkn-co-submit-main {
    max-width : 100%;
    margin-top: 24px;
}

/* ── Thanh toán trong sidebar (dưới tổng cộng) ───────────────────────── */
.wkn-co-section--payment { margin-top: 24px; margin-bottom: 0; }
.wkn-co-section--payment .wkn-co-section-title { font-size: 16px; }

@media (max-width: 600px) {
    .wkn-co-field-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   OVERRIDE FLATSOME – Reset toàn bộ input/select/textarea trong trang checkout
   Dùng .wkn-co-body làm scope, kết hợp !important để ghi đè Flatsome
   ════════════════════════════════════════════════════════════════════════ */


.wkn-co-body input[type="text"],
.wkn-co-body input[type="email"],
.wkn-co-body input[type="tel"],
.wkn-co-body input[type="number"],
.wkn-co-body input[type="password"],
.wkn-co-body input[type="search"],
.wkn-co-body textarea,
.wkn-co-body select {
    height        : 56px !important;
    padding       : 18px 12px 4px !important;
    border        : 1px solid #d9d9d9 !important;
    border-radius : 4px !important;
    box-shadow    : none !important;
    background    : #ffffff !important;
    font-family   : var(--co-font) !important;
    font-size     : 16px !important;
    color         : #1a1a1a !important;
    line-height   : normal !important;
    outline       : none !important;
    margin        : 0 !important;
    -webkit-appearance: none !important;
    appearance    : none !important;
    transition    : border-color 150ms ease !important;
}
#main .wkn-cart-qty-input{
       height: 36px !important;
    padding: 5px 12px 4px !important;
    border: 1px solid #d9d9d9 !important;

}
.wkn-co-body textarea {
    height     : auto !important;
    min-height : 90px !important;
    padding-top: 22px !important;
    resize     : vertical !important;
}
.wkn-co-body select {
    padding-right      : 32px !important;
    cursor             : pointer !important;
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") !important;
    background-repeat  : no-repeat !important;
    background-position: right 12px center !important;
}
.wkn-co-body input[type="text"]:focus,
.wkn-co-body input[type="email"]:focus,
.wkn-co-body input[type="tel"]:focus,
.wkn-co-body input[type="number"]:focus,
.wkn-co-body input[type="password"]:focus,
.wkn-co-body textarea:focus,
.wkn-co-body select:focus {
    border-color: #999999 !important;
    box-shadow  : none !important;
    outline     : none !important;
}
/* Ẩn placeholder gốc — label đóng vai placeholder */
.wkn-co-body input::placeholder,
.wkn-co-body textarea::placeholder {
    color  : transparent !important;
    opacity: 0 !important;
}

/* ── FLOATING LABEL FIELD ────────────────────────────────────────────────── */
.wkn-co-field { position: relative; }

.wkn-co-input-wrap { position: relative; }

/* ── Label mặc định = nằm giữa input, đóng vai placeholder ─────────────── */
.wkn-co-label {
    position      : absolute;
    top           : 50%;
    left          : 12px;
    transform     : translateY(-50%);
    font-size     : 14px;
    color         : #aaaaaa;   /* màu placeholder */
    font-weight   : 400;
    pointer-events: none;
    transition    : top 130ms ease, font-size 130ms ease, color 130ms ease, transform 130ms ease;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    max-width     : calc(100% - 36px);
    line-height   : 1;
    z-index       : 1;
}

/* Textarea: label bắt đầu ở trên, không căn giữa theo chiều cao */
.wkn-co-body textarea ~ .wkn-co-label {
    top      : 14px !important;
    transform: none !important;
}

/* ── SELECT: label luôn hiện nhỏ phía trên ──────────────────────────────── */
.wkn-co-input-wrap select ~ .wkn-co-label {
    top        : 7px !important;
    transform  : none !important;
    font-size  : 12px !important;
    font-weight: 500 !important;
    color      : #888888 !important;
    opacity    : 1;
}
/* Select luôn có padding-top để nhường chỗ cho label */
.wkn-co-body select {
    padding-top: 16px !important;
}

/* ── Label float lên khi focus HOẶC có giá trị (.is-filled) ─────────────── */
.wkn-co-body input:focus    ~ .wkn-co-label,
.wkn-co-body textarea:focus ~ .wkn-co-label,
.wkn-co-body select:focus   ~ .wkn-co-label,
.wkn-co-field.is-filled .wkn-co-label,
/* CSS-only fallback cho text inputs qua :placeholder-shown */
.wkn-co-body input:not(:placeholder-shown) ~ .wkn-co-label {
        top: 9px !important;
    transform: none !important;
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 400;
}
/* Textarea float */
.wkn-co-body textarea:focus ~ .wkn-co-label,
.wkn-co-field.is-filled .wkn-co-body textarea ~ .wkn-co-label {
    top: 6px !important;
}

.wkn-co-req { color: var(--co-danger); margin-left: 2px; }

/* Field error state */
.wkn-co-field.has-error input,
.wkn-co-field.has-error select,
.wkn-co-field.has-error textarea {
    border-color: var(--co-danger) !important;
}

/* ── CONTENT BOX (Shipping / Payment) ────────────────────────────────────── */
.wkn-co-content-box {
    border       : 1px solid var(--co-border);
    border-radius: var(--co-radius);
    overflow     : hidden;
}

/* ── RADIO ROWS ───────────────────────────────────────────────────────────── */
.wkn-co-radio-row {
    padding   : 0;
}
.wkn-co-radio-row:last-child { border-bottom: none; }

.wkn-co-radio-label {

    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 14px 16px;
    cursor     : pointer;
    font-size  : 14px;
}
.wkn-co-radio-label input[type="radio"] {
    position: absolute;
    opacity : 0;
    width   : 0;
    height  : 0;
}
.wkn-co-radio-custom {
    flex-shrink  : 0;
    width        : 18px;
    height       : 18px;
    border       : 2px solid var(--co-border);
    border-radius: 50%;
    position     : relative;
    transition   : border-color 150ms ease;
    background   : #fff;
}
.wkn-co-radio-label input:checked ~ .wkn-co-radio-custom {
    border-color: var(--wkn-secondary);
}
.wkn-co-radio-label input:checked ~ .wkn-co-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wkn-secondary);
}
.wkn-co-radio-text  { flex: 1; }
.wkn-co-radio-price { font-weight: 600; white-space: nowrap; }

.wkn-co-payment-icon { display: flex; align-items: center; }
.wkn-co-payment-icon img { height: 24px; width: auto; margin: 0 2px; }

.wkn-co-payment-desc {
    padding  : 0 16px 14px 44px;
    font-size: 13px;
    color    : var(--co-muted);
}

.wkn-co-payment-fields {     padding: 0 16px 0px 44px; }

.wkn-co-notice {
    padding  : 14px 16px;
    color    : var(--co-muted);
    font-size: 13px;
    margin   : 0;
}

/* ── SUBMIT BUTTONS ──────────────────────────────────────────────────────── */
.wkn-co-btn-order:hover{
    color: white !important;
}
.wkn-co-btn-order {
    display      : block;
    width        : 100%;
    padding      : 15px;
    background   :  var(--wkn-secondary);
    color        : #ffffff;
    border       : none;
    border-radius: var(--co-radius);
    font-family  : var(--co-font);
    font-size    : 15px;
    font-weight  : 500;
    letter-spacing: 0.5px;
    cursor       : pointer;
    transition   : opacity 200ms ease;
    margin-top   : 16px;
    text-align: center;
}
.wkn-co-btn-order:hover    { opacity: .86; }
.wkn-co-btn-order:disabled { opacity: .5; cursor: not-allowed; }

.wkn-co-back-link {
    display        : block;
    align-items    : center;
    justify-content: center;
    gap            : 5px;
    margin-top     : 12px;
    font-size      : 13px;
    color          : var(--co-link);
    text-decoration: none;
   text-align: left;
}
.wkn-co-back-link:hover { text-decoration: underline; }

.wkn-co-sidebar .wkn-co-total-row .wkn-co-grand-price span.amount{
color: var(--co-danger);
}
/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.wkn-co-layout .wkn-co-sidebar {
        margin-top: 0px !important;}
.wkn-co-sidebar {
        margin-top: 22px;
    background   : var(--co-sidebar-bg);
    border-left  : unset !important;
    min-height   : 100%;
}
.wkn-co-sidebar-inner {
    padding   : 24px 24px 32px;
    position  : sticky;
    top        : 20px;
}
.wkn-co-sidebar-title {
    text-transform: uppercase;
     color: var(--wkn-secondary);
    font-size  : 15px;
    font-weight: 600;
    margin     : 0 0 16px;
    padding-bottom: 14px;
    border-bottom : 1px solid var(--co-border);
}

/* ── PRODUCTS ────────────────────────────────────────────────────────────── */
.wkn-co-products {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    padding-bottom : 16px;
    border-bottom  : 1px solid var(--co-border);
    margin-bottom  : 16px;
}
.wkn-co-product-row {
    display    : flex;
    align-items: flex-start;
    gap        : 12px;
}
.wkn-co-product-thumb {
    position     : relative;
    flex-shrink  : 0;
    width        : 50px;
    height       : 50px;
    border-radius: var(--co-radius);
    overflow     : visible;
}
.wkn-co-product-thumb img {
    display      : block;
    width        : 50px;
    height       : 50px;
    object-fit   : cover;
    border-radius: var(--co-radius);
    border       : 1px solid var(--co-border);
}
.wkn-co-qty-badge {
    position     : absolute;
    top          : -8px;
    right        : -8px;
    width        : 20px;
    height       : 20px;
    background   : #555;
    color        : #fff;
    border-radius: 50%;
    font-size    : 11px;
    font-weight  : 700;
    display      : flex;
    align-items  : center;
    justify-content: center;
    line-height  : 1;
}
.wkn-co-product-info {
    flex      : 1;
    min-width : 0;
    display   : flex;
    flex-direction: column;
    gap       : 3px;
}
.wkn-co-product-name {
    font-size  : 13.5px;
    color      : var(--co-text);
    line-height: 1.4;
}
.wkn-co-product-meta {
    font-size: 12px;
    color    : var(--co-muted);
}
.wkn-co-khuyen-mai {
    display   : block;
    font-size : 12px;
    color     : var(--co-success);
    margin-top: 2px;
}
.wkn-ty-khuyen-mai {
    display    : block;
    font-size  : 12px;
    color      : #2e7d32;
    margin-top : 3px;
    font-weight: 500;
}
.wkn-co-product-price {
    flex-shrink: 0;
    font-size  : 13.5px;
    font-weight: 600;
    white-space: nowrap;
    padding-top: 2px;
}
.wkn-co-body .wkn-co-remove-item {
    flex-shrink    : 0;
    width          : 20px !important;
    height         : 20px !important;
    min-width      : 20px !important;
    min-height     : 20px !important;
    padding        : 0 !important;
    margin         : 2px 0 0 !important;
    background     : none !important;
    border         : none !important;
    box-shadow     : none !important;
    cursor         : pointer !important;
    font-size      : 16px !important;
    line-height    : 1 !important;
    color          : #bbbbbb !important;
    display        : flex !important;
    align-items    : center !important;
    justify-content: center !important;
    border-radius  : 50% !important;
    transition     : color 150ms ease, background 150ms ease !important;
    align-self     : flex-start !important;
}
.wkn-co-body .wkn-co-remove-item:hover {
    color      : var(--co-danger) !important;
    background : #fdecea !important;
}

/* ── COUPON ──────────────────────────────────────────────────────────────── */
.wkn-co-coupon { margin-bottom: 16px; position: relative; z-index: 5; }
.wkn-co-coupon-row {
    display: flex;
    gap    : 8px;
}
.wkn-co-coupon-input {
    flex         : 1;
    height       : 38px;
    padding      : 0 10px;
    border       : 1px solid var(--co-border);
    border-radius: var(--co-radius);
    font-family  : var(--co-font);
    font-size    : 13px;
    outline      : none;
}
.wkn-co-coupon-input:focus { border-color: var(--co-border-f); }
.wkn-co-coupon-btn {
        margin-bottom: 0px;
    margin-right: 0px;
    text-transform: initial;
    font-weight: normal;
    color: white;
    height: 38px;
    padding: 0 14px;
    background:var(--wkn-secondary) ;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    font-family: var(--co-font);
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 150ms;
}
.wkn-co-coupon-btn:hover { }
.wkn-co-coupon-msg { margin-top: 6px; font-size: 12.5px; }
.wkn-co-coupon-msg.is-success { color: var(--co-success); }
.wkn-co-coupon-msg.is-error   { color: var(--co-danger); }

/* ── TOTALS ──────────────────────────────────────────────────────────────── */
.wkn-co-totals {
    display       : flex;
    flex-direction: column;
    gap           : 8px;
}
.wkn-co-total-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    font-size      : 13.5px;
}
.wkn-co-total-discount { color: var(--co-success); }
.wkn-co-grand-total {
    padding-top  : 12px;
    margin-top   : 4px;
    border-top   : 1px solid var(--co-border);
    font-weight  : 700;
    font-size    : 16px;
}
.wkn-co-grand-price { font-size: 18px; }

/* ── Chưa chọn sản phẩm nào ──────────────────────────────────────────────── */
.wkn-co-empty-selection {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    gap            : 10px;
    padding        : 20px 10px;
    color          : var(--co-muted);
}
.wkn-co-empty-selection svg { color: var(--wkn-primary); opacity: .7; }
.wkn-co-empty-selection p {
    margin     : 0;
    font-size  : 13.5px;
    line-height: 1.6;
}

/* WC Terms */
.wkn-co-content-box .woocommerce-terms-and-conditions-wrapper {
    padding  : 12px 16px;
    font-size: 13px;
    color    : var(--co-muted);
    border-top: 1px solid var(--co-border);
}

/* ── Shipping loading state ──────────────────────────────────────────────── */
.wkn-co-content-box.wkn-co-loading {
    opacity       : 0.5;
    pointer-events: none;
    position      : relative;
}
.wkn-co-content-box.wkn-co-loading::after {
    content      : '';
    position     : absolute;
    inset        : 0;
    background   : rgba(255,255,255,.4);
    border-radius: var(--co-radius);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .wkn-co-layout { grid-template-columns: 1fr; gap: 32px; }
    .wkn-co-mobile-bar { display: block; }
    .wkn-co-sidebar-inner { position: static; }
    .wkn-co-page { padding: 20px 0 40px; }
}

/* ════════════════════════════════════════════════════════════════════════
   THANK YOU PAGE
   ════════════════════════════════════════════════════════════════════════ */
.wkn-ty-page {     background: #FAF8F7;padding: 40px 0 20px; }

.wkn-ty-wrap {
    max-width: var(--co-max-w);
    margin   : 0 auto;
    padding  : 0 20px;
}

/* ── Hero: TRÂN TRỌNG CẢM ƠN (ảnh nền thankyou.jpg) ──────────────────────── */
.section-checkout {
    padding             : 0;
    background          : var(--wkn-secondary);
    background-size     : cover;
    background-position : right center;
    background-repeat   : no-repeat;
    aspect-ratio        : 1920 / 486;
    display             : flex;
    align-items         : center;
}
.section-checkout .row {
    max-width: var(--co-max-w);
    width    : 100%;
    margin   : 0 auto;
    padding  : 0 40px;
}
.wkn-ty-hero { max-width: 46%; }
.wkn-ty-hero-content { min-width: 0; }
.wkn-ty-info-field i,.wkn-ty-status-icon i,.wkn-ty-journey-icon i{
    color      :var(--wkn-secondary);
}
.wkn-ty-title {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    margin        : 0 0 10px;
    font-family   : var(--co-heading-font);
    font-size     : clamp(20px, 2.6vw, 34px);
    font-weight   : 700;
    letter-spacing: .5px;
    color         : var(--wkn-secondary);
}
.wkn-ty-title-icon { font-size: .5em; opacity: .8; transform: scaleX(-1); }
.wkn-ty-subtitle {
    margin     : 0;
    color      : var(--co-text);
    font-size  : clamp(11px, 1vw, 14.5px);
    line-height: 1.6;
}

/* ── THƯ CẢM ƠN + THÔNG TIN ĐƠN HÀNG (khối liền nhau) ────────────────────── */
.wkn-ty-letter-wrap {
   
    margin   : 0 auto 48px;
}
.wkn-ty-letter {
    position     : relative;
    z-index      : 1;
    border-radius: 14px;
    overflow     : hidden;
    box-shadow   : 0 12px 30px rgba(87, 13, 13, .12);
}
.wkn-ty-letter img { display: block; width: 100%; height: auto; }

.wkn-ty-info-card {
    position     : relative;
    z-index      : 2;
    margin-top   : -36px;
    background   : #fff;
    border-radius: 14px;
    box-shadow   : 0 12px 30px rgba(87, 13, 13, .10);
    padding      : 32px clamp(16px, 4vw, 40px) 24px;
}

/* Divider dạng "─── TIÊU ĐỀ ───" */
.wkn-ty-info-title {
    position: relative;
    text-align: center;
    margin  : 0 0 24px;
}
.wkn-ty-info-title::before {
    content   : '';
    position  : absolute;
    left: 0; right: 0; top: 50%;
}
.wkn-ty-info-title span {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: transparent;
    font-family: var(--co-heading-font);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--wkn-secondary);
}
.wkn-ty-info-title--products { margin-top: 28px; }

.wkn-ty-info-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr auto;
    gap                  : 28px;
}
.wkn-ty-info-col { display: flex; flex-direction: column; gap: 18px; }
.wkn-ty-info-field { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.wkn-ty-info-field span   { display: flex; flex-direction: column; gap: 2px; }
.wkn-ty-info-field em     { font-style: normal; font-size: 12.5px; color: var(--co-muted); }
.wkn-ty-info-field strong { font-size: 14.5px; color: var(--co-text); font-weight: 600; }

.wkn-ty-status-col {
    position    : relative;
    padding-left: 28px;
    display     : flex;
    align-items : center;
}
.wkn-ty-status-col::before {
    content    : '';
    position   : absolute;
    left: 0; top: 0; bottom: 0;
    border-left: 1px dashed var(--co-border);
}
.wkn-ty-status-box { display: flex; align-items: flex-start; gap: 14px; }
.wkn-ty-status-icon {
    flex-shrink    : 0;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 52px;
    height         : 52px;
    border-radius  : 50%;
    border         : 1.5px dashed var(--wkn-primary);
    font-size      : 20px;
}
.wkn-ty-status-text { display: flex; flex-direction: column; gap: 3px; max-width: 220px; }
.wkn-ty-status-text em     { font-style: normal; font-size: 12.5px; color: var(--co-muted); }
.wkn-ty-status-text strong { font-size: 15px; color: var(--wkn-secondary); font-weight: 700; }
.wkn-ty-status-text small  { font-size: 12px; color: var(--co-muted); line-height: 1.5; }

.wkn-ty-order-totals { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--co-border); }

/* ── HÀNH TRÌNH TRAO TẶNG ─────────────────────────────────────────────────── */
.wkn-ty-journey-title {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
    margin         : 0 0 32px;
    font-family    : var(--co-heading-font);
    font-size      : 20px;
    font-weight    : 700;
    letter-spacing : 1px;
    color          : var(--wkn-secondary);
}
.wkn-ty-journey-title i { font-size: 13px; color: var(--wkn-primary); }

.wkn-ty-journey {
    display              : grid;
    grid-template-columns: repeat(5, 1fr);
    gap                  : 12px;
    margin-bottom        : 40px;
}
.wkn-ty-journey-step { position: relative; text-align: center; }
.wkn-ty-journey-step:not(:last-child)::after {
    content   : '';
    position  : absolute;
    top       : 28px;
    left      : calc(50% + 34px);
    right     : calc(-50% + 34px);
    border-top: 1.5px dashed var(--wkn-primary);
}
.wkn-ty-journey-icon {
    position       : relative;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 56px;
    height         : 56px;
    margin-bottom  : 14px;
    border-radius  : 50%;
    background     : var(--wkn-secondary);
    color          : #fff;
    font-size      : 22px;
}
.wkn-ty-journey-icon i { color: #fff; }
.wkn-ty-journey-num {
    position       : absolute;
    right          : -2px;
    bottom         : -2px;
    width          : 20px;
    height         : 20px;
    border-radius  : 50%;
    background     : var(--wkn-primary);
    color          : var(--wkn-secondary);
    font-size      : 11px;
    font-weight    : 700;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border         : 2px solid #FAF8F7;
}
.wkn-ty-journey-label {
    display       : block;
    margin-bottom : 6px;
    font-size     : 12.5px;
    font-weight   : 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color         : var(--wkn-secondary);
}
.wkn-ty-journey-desc { display: block; font-size: 12px; color: var(--co-muted); line-height: 1.5; }

/* ── QUOTE ────────────────────────────────────────────────────────────────── */
.wkn-ty-quote {
    max-width    : 640px;
    margin       : 0 auto 40px;
    padding      : 24px 32px;
    border       : 1px solid var(--co-border);
    border-radius: var(--co-radius);
    background   : #fff;
    text-align   : center;
}
.wkn-ty-quote p {
    margin     : 0;
    font-family: var(--co-heading-font);
    font-style : italic;
    font-size  : 15.5px;
    line-height: 1.7;
    color      : var(--wkn-secondary);
}

/* ── CTA về trang chủ / khám phá thêm ─────────────────────────────────────── */
.wkn-ty-cta-buttons {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 14px;
    margin-bottom  : 8px;
}

/* ── Table ────────────────────────────────────────────────────────────── */
.wkn-ty-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 14px;
}
.wkn-ty-table thead th {
    padding       : 0 0 10px;
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: .5px;
    color         : var(--co-muted);
    border-bottom : 1px solid var(--co-border);
    text-align    : right;
        margin-bottom: -1px;
}
.wkn-ty-table thead th.wkn-ty-col-product { text-align: left; }
.wkn-ty-col-total { text-align: right; white-space: nowrap; }
.wkn-ty-col-price  { text-align: right; white-space: nowrap; color: var(--co-muted); }
.wkn-ty-col-qty    { text-align: right; white-space: nowrap; color: var(--co-muted); }
.wkn-ty-table tbody td {
    padding   : 14px 0;
    border-bottom: 1px solid var(--co-border);
    vertical-align: middle;
}
.wkn-ty-table tbody tr:last-child td { border-bottom: none; }
.wkn-ty-col-product {
    display    : flex;
    align-items: center;
    gap        : 12px;
    text-align : left;
}
.wkn-ty-thumb {
    width        : 56px;
    height       : 56px;
    object-fit   : cover;
    border-radius: 4px;
    border       : 1px solid var(--co-border);
    flex-shrink  : 0;
}
.wkn-ty-item-name {
    font-size  : 14px;
    color      : var(--co-text);
    line-height: 1.4;

    font-weight: bold;

}
.wkn-ty-item-sku {
    display   : block;
    font-size : 12px;
    color     : var(--co-muted);
    margin-top: 2px;
}
.wkn-ty-item-qty {
    display   : block;
    font-size : 12.5px;
    color     : var(--co-muted);
    margin-top: 2px;
}
.wkn-ty-table span.amount{
    color: var(--fs-color-secondary);
}
.wkn-box-img{
    width: 35px;
}
/* ── Ghi chú giao hàng ────────────────────────────────────────────────── */
.wkn-ty-note {
    display      : flex;
    align-items  : flex-start;
    align-items: center;
    gap          : 10px;
    margin-top   : 16px;
    padding      : 14px 16px;
    background   : #F7F4F1;
    border       : 1px solid #ede7e0;
    border-radius: var(--co-radius);
    font-size    : 13px;
    color        : var(--co-muted);
    line-height  : 1.6;
}
.wkn-ty-note-icon { flex-shrink: 0; font-size: 16px; }
.wkn-ty-note a { color: var(--co-link); font-weight: 600; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.wkn-ty-cta {
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 12px;
    margin-top     : 28px;
}
.wkn-ty-btn {
     line-height: 20px;
    padding: 3px;
    margin-bottom: 0px;
    display: inline-block;
    padding-top: 15px !important;
    padding: 13px 26px;
    background: var(--wkn-secondary);
    color: #fff;
    border-radius: var(--co-radius);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: opacity 200ms ease;
    border: none;
    cursor: pointer;
    font-family: var(--co-font);
}
.wkn-ty-btn:hover { opacity: .85; color: #fff; }
.wkn-ty-btn--outline {
    background: transparent;
    color     : var(--wkn-secondary);
    border    : 1.5px solid var(--wkn-secondary);
}
.wkn-ty-btn--outline:hover { color: var(--wkn-secondary); opacity: .7; }
.wkn-ty-btn--save { background: var(--wkn-primary); }
.wkn-ty-btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 900px) {
    .wkn-ty-quote{
        padding: 14px !important;
    }
    .wkn-ty-quote p{
        font-size: 14px;
    }
    .wkn-ty-journey-step:not(:last-child)::after{
        display: none;
    }
    .section-checkout { aspect-ratio: auto; padding: 28px 0; background-position: 78% center; }
    .wkn-ty-hero { max-width: 100%; }
    .wkn-ty-hero-content {
        display      : inline-block;
        max-width    : 420px;
     
        padding      : 5px;
        border-radius: 10px;
    }
    .wkn-ty-title { font-size: 22px; }

    .wkn-ty-info-grid { grid-template-columns: 1fr 1fr; }
    .wkn-ty-status-col { grid-column: 1 / -1; padding-left: 0; padding-top: 18px; margin-top: 4px; }
    .wkn-ty-status-col::before { left: 0; right: 0; top: 0; bottom: auto; border-left: none; border-top: 1px dashed var(--co-border); }

    .wkn-ty-journey { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
    .wkn-ty-journey-step:nth-child(3)::after { display: none; }
}

@media (max-width: 480px) {
    .wkn-ty-info-card { padding: 24px 16px 20px; }
    .wkn-ty-info-grid { grid-template-columns: 1fr; }
    .wkn-ty-cta, .wkn-ty-cta-buttons { flex-direction: column; }
    .wkn-ty-btn { width: 100%; text-align: center; margin-right: 0px !important;}

    .wkn-ty-journey { grid-template-columns: repeat(2, 1fr); }
    .wkn-ty-journey-step:nth-child(2)::after,
    .wkn-ty-journey-step:nth-child(4)::after { display: none; }
    .wkn-ty-journey-step:nth-child(5) { grid-column: 1 / -1; max-width: 180px; margin: 0 auto; }

    .wkn-ty-quote { padding: 20px 18px; }

    /* Cố định tỉ lệ cột bảng đơn hàng trên mobile */
    .wkn-ty-table            { table-layout: fixed; }
    .wkn-ty-col-total        { width: 34%; }
    .wkn-ty-col-price        { display: none; }
    .wkn-ty-col-qty          { display: none; }
}
.wkn-cart-table-body span.amount{
        color: var(--wkn-secondary);
}
/* ════════════════════════════════════════════════════════════════════════
   CART PAGE
   ════════════════════════════════════════════════════════════════════════ */

/* ── Checkbox dùng chung (chọn tất cả / chọn từng sản phẩm) ─────────────── */
.wkn-co-checkbox-label {
      display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--co-text);
    user-select: none;
    font-weight: normal;
}
.wkn-co-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity : 0;
    width   : 0;
    height  : 0;
}
.wkn-co-checkbox-custom {
    flex-shrink  : 0;
    width        : 19px;
    height       : 19px;
    border       : 1.5px solid var(--co-border);
    border-radius: 4px;
    position     : relative;
    background   : #fff;
    transition   : background 150ms ease, border-color 150ms ease;
}
.wkn-co-checkbox-label input:checked ~ .wkn-co-checkbox-custom {
    background  : var(--wkn-secondary);
    border-color: var(--wkn-secondary);
}
.wkn-co-checkbox-label input:checked ~ .wkn-co-checkbox-custom::after {
    content : '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
h1.wkn-co-page-title{
   color: var(--wkn-secondary); 
}
.wkn-cart-main-body{
        background: white;
        padding:20px;
            border-radius: var(--co-radius);
    border: 1px solid var(--co-border);
}
.wkn-co-checkbox-label--only { display: inline-flex; }

/* ── Page layout ──────────────────────────────────────────────────────── */
.wkn-cart-page { padding-top: 28px;     background: #FAF8F7;}
.wkn-cart-layout {
    display              : grid;
    grid-template-columns: 1fr 360px;
    gap                  : 32px;
    align-items          : start;
}
.wkn-cart-main { min-width: 0; }

.wkn-cart-select-all-row { margin-bottom: 14px; }

/* ── Bảng sản phẩm ────────────────────────────────────────────────────── */
.wkn-cart-table {

    overflow     : hidden;
}
.wkn-cart-table-head {
    display        : grid;
    grid-template-columns: 32px minmax(0,1fr) 120px 140px 120px 48px;
    gap            : 12px;
    align-items    : center;
       padding: 6px 18px;
    border-bottom  : 1px solid var(--co-border);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .3px;
    color          : var(--co-muted);
}
.wkn-cart-table-head .wkn-cart-col-price,
.wkn-cart-table-head .wkn-cart-col-qty,
.wkn-cart-table-head .wkn-cart-col-linetotal { text-align: center; }

.wkn-cart-row {
    display        : grid;
    grid-template-columns: 32px minmax(0,1fr) 120px 140px 120px 48px;
    gap            : 12px;
    align-items    : center;
    padding        : 16px;
    border-bottom  : 1px solid var(--co-border);
}
.wkn-cart-row:last-child { border-bottom: none; }

.wkn-cart-col-product {
    display    : flex;
    align-items: center;
    gap        : 12px;
    min-width  : 0;
}
.wkn-cart-thumb { flex-shrink: 0; display: block; }
.wkn-cart-thumb img {
    width        : 64px;
    height       : 64px;
    object-fit   : cover;
    border-radius: var(--co-radius);
    border       : 1px solid var(--co-border);
    display      : block;
}
.wkn-cart-product-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wkn-cart-product-name {
    font-size  : 14px;
    font-weight: 600;
    color      : var(--co-text);
    line-height: 1.4;
    text-decoration: none;
}
.wkn-cart-product-name:hover { color: var(--wkn-secondary); }
.wkn-cart-product-sku {
    font-size: 12px;
    color    : var(--co-muted);
}
.wkn-cart-product-sku::before { content: '🏷 '; }

.wkn-cart-col-price {
    text-align : center;
    font-size  : 14px;
    color      : var(--co-text);
    white-space: nowrap;
}
.wkn-cart-col-linetotal {
    text-align : center;
    font-size  : 14.5px;
    font-weight: 700;
    color      : var(--co-text);
    white-space: nowrap;
}
.wkn-cart-col-action { text-align: center; }

/* ── Qty stepper ──────────────────────────────────────────────────────── */
.wkn-cart-qty-stepper {
    display      : inline-flex;
    align-items  : center;
    border       : 1px solid var(--co-border);
    border-radius: var(--co-radius);
    overflow     : hidden;
    margin       : 0 auto;
}
.wkn-cart-qty-btn {
    margin-bottom: 0px;
    margin-right: 0px;
    width      : 30px;
    height     : 34px;
    border     : none;
    background : var(--co-sidebar-bg);
    color      : var(--co-text);
    font-size  : 15px;
    line-height: 1;
    cursor     : pointer;
    transition : background 150ms ease;
}
.wkn-cart-qty-btn:hover { background: var(--co-border); }
.wkn-cart-qty-input {
    width        : 42px;
    height       : 34px;
    border       : none;
    border-left  : 1px solid var(--co-border);
    border-right : 1px solid var(--co-border);
    text-align   : center;
    font-size    : 14px;
    font-family  : var(--co-font);
    -moz-appearance: textfield;
}
.wkn-cart-qty-input::-webkit-outer-spin-button,
.wkn-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Nút xoá 1 sản phẩm ───────────────────────────────────────────────── */
.wkn-co-body .wkn-cart-remove {
    width      : 32px !important;
    height     : 32px !important;
    min-width  : 32px !important;
    min-height : 32px !important;
    padding    : 0 !important;
    margin     : 0 auto !important;
    background : none !important;
    border     : none !important;
    box-shadow : none !important;
    cursor     : pointer !important;
    color      : #b8ab97 !important;
    display    : flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition : color 150ms ease, background 150ms ease !important;
}
.wkn-co-body .wkn-cart-remove:hover { color: var(--co-danger) !important; background: #fbeaea !important; }

/* ── Dưới bảng: tiếp tục mua hàng / xoá tất cả ───────────────────────── */
.wkn-cart-below-table {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin         : 16px 0 24px;
    flex-wrap      : wrap;
    gap            : 12px;
}
.wkn-cart-continue{
    text-transform: uppercase;
    font-weight: normal;
    color: var(--wkn-secondary) !important;
    border: 1px solid var(--wkn-secondary) !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
}
.wkn-cart-continue,
.wkn-cart-clear-all {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    font-size      : 13.5px;
    text-decoration: none;
    background     : none;
    border         : none;
    cursor         : pointer;
    padding        : 0;
    font-family    : var(--co-font);
}
.wkn-cart-continue { color: var(--co-text); }
.wkn-cart-continue:hover { color: var(--wkn-secondary); }
.wkn-cart-clear-all { color: var(--wkn-secondary); }
.wkn-cart-clear-all:hover { text-decoration: underline; }

/* ── Coupon box + Thẻ quà tặng: layout 9-3 (trang giỏ hàng) ─────────────── */
.wkn-cart-offers-row {
    display              : grid;
    grid-template-columns: 9fr 3fr;
    gap                  : 16px;
    margin-bottom        : 24px;
}
.wkn-cart-coupon-box {
    display: flex;
    align-items: center;
    gap: 16px;
    border: unset;
    border-radius: var(--co-radius);
    padding: 16px 20px;
    background: #F7F3F1;
}
.wkn-cart-ticket-img {
    width        : 80px;
    height       : auto;
    flex-shrink  : 0;
    border-radius: 6px;
    display      : block;
}
.wkn-cart-coupon-form { flex: 1; min-width: 0; }
.wkn-cart-coupon-label {
    display      : block;
    font-size    : 13px;
    font-weight  : 700;
    letter-spacing: .3px;
    color        : var(--co-text);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.wkn-cart-gift-box {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    border       : 1px solid var(--co-border);
    border-radius: var(--co-radius);
    padding      : 16px;
    background   : var(--co-sidebar-bg);
}
.wkn-cart-gift-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.wkn-cart-gift-text {
    font-size  : 12.5px;
    color      : var(--co-muted);
    line-height: 1.5;
}
.wkn-cart-gift-text a {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    color          : var(--wkn-secondary);
    font-weight    : 600;
    text-decoration: none;
}
.wkn-cart-gift-text a:hover { text-decoration: underline; }

/* ── Sidebar (kế thừa .wkn-co-sidebar) ───────────────────────────────── */
.wkn-cart-side-col { display: flex; flex-direction: column; min-width: 0; }
.wkn-cart-sidebar .wkn-co-sidebar-inner { position: static; }
.wkn-cart-secure-top {
    display      : flex;
    align-items  : center;
      justify-content: center;
    gap          : 7px;
    margin       : 0 0 12px;
    font-size    : 12.5px;
    color        : var(--co-muted);
}
.wkn-co-sidebar-inner{
    background: #FEFFFF;
    padding: 20px;
    border-radius: var(--co-radius);
    border: 1px solid var(--co-border);
}
.wkn-cart-secure-top svg { flex-shrink: 0; color: var(--wkn-secondary); }
.wkn-cart-secure-note {
    margin   : 10px 0 0;
    font-size: 12px;
    text-align: center;
    color    : var(--co-muted);
}
.wkn-cart-secure-bottom {
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
    margin-top   : 16px;
    padding-top  : 16px;
    border-top   : 1px solid var(--co-border);
    font-size    : 12px;
    color        : var(--co-muted);
    line-height  : 1.5;
}
.wkn-cart-secure-bottom svg { flex-shrink: 0; color: var(--wkn-secondary); margin-top: 1px; }
.wkn-cart-secure-bottom strong { display: block; color: var(--co-text); font-size: 12.5px; }
.wkn-co-btn-order.is-disabled {
    pointer-events: none;
    opacity       : .45;
}
.wkn-cart-pay-badges {
    display       : flex;
    flex-wrap     : wrap;
    justify-content: center;
    gap           : 6px;
    margin-top    : 14px;
}
.wkn-cart-pay-badge {
    padding      : 5px 10px;
    border       : 1px solid var(--co-border);
    border-radius: 4px;
    font-size    : 11px;
    font-weight  : 600;
    color        : var(--co-muted);
    background   : #fff;
    white-space  : nowrap;
}
.wkn-cart-pay-badge--momo    { color: #a50064; border-color: #f0c9dd; }
.wkn-cart-pay-badge--zalopay { color: #0068ff; border-color: #c9dcff; }

/* ── Trust badges dưới cùng ───────────────────────────────────────────── */
.wkn-cart-trust-row {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 20px;
    margin-top           : 36px;
    padding              : 26px 10px;
    background           : var(--co-sidebar-bg);
    border-radius        : var(--co-radius);
}
.wkn-cart-trust-item {
    display    : flex;
    align-items: center;
    gap        : 12px;
    color      : var(--wkn-secondary);
}
.wkn-cart-trust-item span {
    font-size  : 12.5px;
    color      : var(--co-muted);
    line-height: 1.5;
}
.wkn-cart-trust-item strong { color: var(--co-text); font-size: 13.5px; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.wkn-cart-empty {
    text-align: center;
    padding   : 64px 20px;
    color     : var(--co-muted);
}
.wkn-cart-empty-icon { margin-bottom: 16px; opacity: .5; }
.wkn-cart-empty-text { font-size: 16px; margin: 0 0 22px; }
.wkn-cart-empty-btn { display: inline-block; width: auto; padding: 14px 32px; }

/* ── Loading state khi AJAX đang chạy ────────────────────────────────── */
.wkn-cart-row.wkn-co-loading,
.wkn-cart-coupon-box.wkn-co-loading { opacity: .5; pointer-events: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wkn-cart-layout { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .wkn-cart-table-head { display: none; }
    .wkn-cart-row {
        grid-template-columns: 24px 1fr 32px;
        grid-template-areas:
            "check product remove"
            "empty price price"
            "empty qty linetotal";
        row-gap: 8px;
    }
    .wkn-cart-col-check      { grid-area: check; }
    .wkn-cart-col-product    { grid-area: product; }
    .wkn-cart-col-action     { grid-area: remove; }
    .wkn-cart-col-price      { grid-area: price; text-align: left; }
    .wkn-cart-col-qty        { grid-area: qty; text-align: left; }
    .wkn-cart-col-linetotal  { grid-area: linetotal; text-align: right; }
    .wkn-cart-col-price::before     { content: 'Đơn giá: '; color: var(--co-muted); font-size: 12px; }
    .wkn-cart-col-linetotal::before { content: 'Thành tiền: '; color: var(--co-muted); font-size: 12px; font-weight: 400; }
    .wkn-cart-trust-row { grid-template-columns: 1fr 1fr; }
    .wkn-cart-offers-row { grid-template-columns: 1fr; }
    .wkn-cart-coupon-box { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .wkn-co-page-title { font-size: 21px; }
    .wkn-cart-trust-row { grid-template-columns: 1fr; }
    .wkn-cart-ticket-img { width: 70px; }
}