/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 07 2025 | 14:22:25 */
/*
=================================================================
== CSS TỔNG HỢP & TỐI ƯU CHO TRANG THANH TOÁN ==
=================================================================
*/

/* --- 1. NỀN & BREADCRUMBS --- */

body.checkout {
    background-color: #f7f7f7;
}

.checkout-page-title {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.checkout-breadcrumbs .breadcrumb-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background-color: #eee;
    color: #888;
    font-size: 14px;
    margin-right: 8px;
    transition: all 0.3s ease;
}
.checkout-breadcrumbs a { color: #888; }
.checkout-breadcrumbs a.current { color: #d32f2f; font-weight: 700; }
.checkout-breadcrumbs a.current .breadcrumb-step { background-color: #d32f2f; color: #fff; }
.checkout-breadcrumbs .divider { color: #ccc; }

/* --- 2. CÁC KHỐI FORM CHÍNH --- */

.wc-block-components-checkout-step {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 25px; /* Thêm để tạo khoảng cách giữa các khối */
    padding: 25px 30px; /* Thêm để nội dung không sát viền */
}
.wc-block-components-checkout-step__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333;
}
.wc-block-components-checkout-step__description {
    font-size: 14px;
    color: #666;
}

/* --- 3. Ô NHẬP LIỆU & LABEL --- */

.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-partial-payment_input input {
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-partial-payment_input input:focus {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15) !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
    font-weight: 600;
    color: #555;
}

/* --- 4. KHỐI TÓM TẮT ĐƠN HÀNG (SIDEBAR) --- */

.wc-block-checkout__sidebar {
    background-color: #fdf4f4; /* Nền hồng nhạt */
    border: none !important;
    border-radius: 12px;
    padding: 25px;
}
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-order-summary-item,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
    border: none !important; /* Bỏ tất cả đường viền bên trong */
}
.wc-block-components-order-summary-item__image img {
    border-radius: 8px;
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
    color: #d32f2f; /* Màu đỏ cho tổng tiền cuối cùng */
}

/* --- 5. PHƯƠNG THỨC THANH TOÁN --- */

.wc-block-checkout .wc-block-components-radio-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option {
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}
.wc-block-checkout .wc-block-components-radio-control__option {
    padding: 15px;
    cursor: pointer;
    font-weight: 600;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-content {
    padding: 15px;
    font-size: 14px;
    color: #555;
    border-top: 1px solid #eee;
    background-color: transparent !important;
}
.wc-block-checkout .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 1px #d32f2f !important;
    background-color: #fdf4f4;
}
.wc-block-checkout .wc-block-components-radio-control__label img {
    height: 20px;
    vertical-align: middle;
    margin-left: 8px;
}

/* --- 6. KHỐI THANH TOÁN BẰNG VÍ (WALLET) --- */

.wc-block-checkout .wc-block-components-partial-payment-panel {
    background-color: #fdf4f4;
    border: 1px solid #f9d7d7;
    border-radius: 8px;
    margin: 15px 0;
}
.wc-block-checkout .wc-block-components-partial-payment-panel__button-text {
    color: #d32f2f;
    font-weight: 600;
}
.wc-block-checkout .wc-block-components-partial-payment_form {
    display: flex; gap: 10px;
}
.wc-block-checkout .wc-block-components-partial-payment_button {
    background-color: #d32f2f !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.wc-block-checkout .wc-block-components-partial-payment_button:hover {
    background-color: #b71c1c !important;
}

/* --- 7. NÚT ĐẶT HÀNG & LINK QUAY LẠI --- */

.wc-block-components-checkout-place-order-button {
    background-color: #d32f2f !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.wc-block-components-checkout-place-order-button:hover {
    background-color: #b71c1c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.wc-block-components-checkout-return-to-cart-button {
    color: #555; text-decoration: none;
}
.wc-block-components-checkout-return-to-cart-button:hover {
    color: #d32f2f;
}
/*
============================================================
== CSS NHẤN MẠNH TIÊU ĐỀ TRANG THANH TOÁN ==
============================================================
*/

/* Đổi màu cho các tiêu đề chính của các khối form */
.wc-block-components-checkout-step__title {
    color: #d32f2f !important; /* Màu đỏ chủ đạo */
}

/* Đổi màu cho tiêu đề "Tóm tắt đơn hàng" ở sidebar */
.wc-block-components-checkout-order-summary__title-text {
    color: #d32f2f !important;
}