/* File: assets/css/checkout-style.css */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}
.card {
    margin-bottom: 24px;
    -webkit-box-shadow: 0 2px 3px #e4e8f0;
    box-shadow: 0 2px 3px #e4e8f0;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #eff0f2;
    border-radius: 1rem;
}
.rounded-circle {
    border-radius: 50% !important;
}
.activity-checkout {
    list-style: none
}

.activity-checkout .checkout-icon {
    position: absolute;
    top: -4px;
    left: -24px
}

.activity-checkout .checkout-item {
    position: relative;
    padding-bottom: 24px;
    padding-left: 35px;
    border-left: 2px solid #f5f6f8
}

.activity-checkout .checkout-item {
    border-color: #3b76e1
}

.activity-checkout .checkout-item:first-child:after {
    background-color: #3b76e1
}

.activity-checkout .checkout-item:last-child {
    border-color: transparent
}

.avatar {
    height: 3rem;
    width: 3rem
}

.avatar-lg {
    height: 5rem;
    width: 5rem
}

.avatar-title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--maincolor);
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.card-radio {
    background-color: #fff;
    border: 2px solid #eff0f2;
    border-radius: .75rem;
    padding: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

.card-radio:hover {
    cursor: pointer
}

.card-radio-label {
    display: block
}

.card-radio-input {
    display: none
}

.card-radio-input:checked+.card-radio {
    border-color: #3b76e1!important
}

.font-size-16 {
    font-size: 16px!important;
	font-weight:bold;
}
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

a {
    text-decoration: none!important;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.47rem 0.75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #545965;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e2e5e8;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.75rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.text-muted {
    color: #6c757d !important;
	font-style:italic;
}
.form-label {
    margin-bottom: .5rem;
	font-size: 15px;
    font-weight: bold;
	color:#2d347d;
}
.card-body
Specificity: (0,1,0)
 {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

/* File: assets/css/checkout-style.css */

/* Sửa lại .card-radio để không cắt dòng chữ */
.card-radio {
    background-color: #fff;
    border: 2px solid #eff0f2;
    border-radius: .75rem;
    padding: .5rem;
    display: block;
    /* Bỏ các thuộc tính gây cắt dòng */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
}

/* Hiển thị radio button */
.card-radio-input {
    /* display: none; -> Thay đổi thành: */
    display: inline-block !important;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
}

/* Điều chỉnh lại padding của box để không bị radio button đè lên */
.card-radio-label .card-radio {
    padding-top: 20px;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.bg-light {
    opacity: 1;
    background-color: #f8f9fa;
}

.ms-2 {
    margin-left: .5rem !important;
}
.text-center{
	text-align:center;
}
/* ================================================================== */
/* CSS Tùy chỉnh cho Tóm tắt đơn hàng (Order Summary)                 */
/* ================================================================== */

/* 1. Khung card chính */
.card.checkout-order-summary {
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.checkout-order-summary .card-body {
    padding: 1rem;
}

/* 2. Tiêu đề "Tóm tắt đơn hàng" */
.checkout-order-summary .p-3.bg-light {
    background-color: #f8f9fa !important;
    border-radius: .5rem;
}

.checkout-order-summary .p-3.bg-light h5 {
    font-weight: 600;
    color: #333;
}

/* 3. Bảng danh sách sản phẩm */
.checkout-order-summary .table {
    margin-bottom: 0;
}

.checkout-order-summary .table th,
.checkout-order-summary .table td {
    padding: 0.5rem 0.2rem;
    vertical-align: middle;
    border-top: 1px solid #eff0f2;
}

.checkout-order-summary .table thead th {
    border-top: 0;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* 4. Hình ảnh sản phẩm trong bảng */
.checkout-order-summary tbody th img.avatar-lg {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* 5. Tên sản phẩm và mô tả */
.checkout-order-summary tbody h5 {
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 14px;
}
.checkout-order-summary tbody h5 a {
    color: #343a40;
    text-decoration: none;
    transition: color 0.3s;
}
.checkout-order-summary tbody h5 a:hover {
    color: var(--maincolor, #007bff); /* Sử dụng màu chính của theme */
}

.checkout-order-summary tbody p.text-muted {
    font-size: 13px;
}

/* 6. Làm nổi bật các dòng tổng tiền */
.checkout-order-summary tbody tr:last-child {
    border-top: 2px solid #dee2e6;
}

.checkout-order-summary tbody tr.bg-light td,
.checkout-order-summary tbody tr.bg-light th {
    background-color: #f8f9fa !important;
    font-weight: 600;
}

.checkout-order-summary tbody tr.bg-light h5 {
    font-size: 16px;
    font-weight: 700;
}
.px-4
 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}
.card-body {
    flex: 1 1 auto;
	padding: 20px;
}
.avatar-title .bx{
	font-size:20px;
}
/* ================================================================== */
/* CSS cho Nút bấm Hành động ở cuối trang Checkout                    */
/* ================================================================== */

/* 1. Khung chứa các nút */
.row.my-4 {
    display: flex;
    align-items: center; /* Căn giữa các nút theo chiều dọc */
    border-top: 1px solid #e9ecef; /* Thêm một đường kẻ phân cách */
    padding-top: 1.5rem;
    margin-top: 1.5rem !important;
}

/* 2. Style chung cho cả hai nút */
.row.my-4 .btn {
    display: inline-flex; /* Dùng flex để căn icon và chữ */
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem; /* Tăng kích thước đệm */
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    line-height: 1.5;
}

/* 3. Style cho nút "Quay lại giỏ hàng" (hành động phụ) */
.row.my-4 .btn-link {
    background-color: var(--maincolor) !important; /* Màu xanh thành công của Bootstrap */
    border-color: var(--maincolor) !important;
    color: #fff !important;
    text-decoration: none;
    background-color: transparent;
}
.row.my-4 .btn-link:hover {
    background-color: var(--hoverbtn) !important;
    border: 2px  solid var(--maincolor) !important;
    color: var(--maincolor) !important;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}
.row.my-4 .btn-link i {
    transition: transform 0.3s ease;
}
.row.my-4 .btn-link:hover i {
    transform: translateX(-3px); /* Hiệu ứng icon di chuyển sang trái */
}

/* 4. Style cho nút "Hoàn tất đơn hàng" (hành động chính) */
.row.my-4 .btn-success {
    background-color: var(--maincolor); /* Màu xanh thành công của Bootstrap */
    border-color: var(--maincolor);
    color: #fff;
}
.row.my-4 .btn-success:hover {
    background-color: var(--hoverbtn);
    border-color: var(--maincolor);
    color: var(--maincolor);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.row.my-4 .btn-success i {
    transition: transform 0.3s ease;
}

.row.my-4 .btn-success:hover i {
    transform: translateX(-3px); /* Hiệu ứng icon di chuyển sang trái */
}

/* 5. Style cho icon bên trong nút */
.row.my-4 .btn i.mdi {
    margin-right: 0.5rem; /* Khoảng cách giữa icon và chữ */
    font-size: 1.1rem;
    line-height: 1;
}
.col {
    flex: 1 0 0%;
}
.text-end {
    text-align: right !important;
}