.header-cart {
    background: #020202;
    padding: 15px 0;
}

.header-cart .logo-container {
    width: 60px;
    display: block;
}

.header-cart .phone {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 13px;
    line-height: 1.38;
}

.header-cart .phone .icon {
    width: 18px;
    margin-right: 4px;
}

.header-cart .progress {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    background: transparent;
    height: unset;
}

.header-cart .progress .item {
    display: flex;
    align-items: center;
    padding-right: 77px;
    position: relative;
}

.header-cart .progress .item:last-of-type {
    padding-right: 0;
}

.header-cart .progress .item .icon {
    width: 32px;
    margin-right: 8px;
}

.header-cart .progress .item .icon.active {
    display: none;
}

.header-cart .progress .item.active .icon {
    display: none;
}

.header-cart .progress .item.active .icon.active {
    display: block;
}

.header-cart .progress .item::after {
    position: absolute;
    content: "";
    height: 1px;
    background: #fff;
    top: 50%;
    right: 16px;
    width: 45px;
}

.header-cart .progress .item:last-of-type:after {
    display: none;
}

.header-cart .progress .item .name {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.43;
    color: #FFFFFF;
}

.header-cart-mobile .top {
    padding: 19px 0;
}

.header-cart-mobile .back {
    display: flex;
    align-items: center;
}

.header-cart-mobile .back .icon {
    width: 24px;
    margin-right: 8px;
}

.header-cart-mobile .back .name {
    font-size: 13px;
    line-height: 1.38;
    color: #121212000;
}

.header-cart-mobile .progress {
    flex: 1;
    height: unset;
    display: flex;
    justify-content: flex-end;
    background-color: transparent;
}

.header-cart-mobile .progress .item {
    padding-right: 52px;
    position: relative;
}

.header-cart-mobile .progress .item:last-of-type {
    padding-right: 0;
}

.header-cart-mobile .progress .item::before {
    position: absolute;
    content: "";
    width: 36px;
    right: 8px;
    top: 50%;
    height: 1px;
    background-color: #24242F;
}

.header-cart-mobile .progress .item:last-of-type:before {
    display: none;
}

.header-cart-mobile .progress .item .icon {
    width: 32px;
}

.header-cart-mobile .progress .item .icon.active {
    display: none;
}

.header-cart-mobile .progress .item.active .icon {
    display: none;
}

.header-cart-mobile .progress .item.active .icon.active {
    display: block;
}

.header-cart-mobile .notification {
    font-size: 13px;
    line-height: 1.38;
    color: #24242F;
    padding: 12px 15px;
    background: #DADAE4;
    text-align: center;
}

/*.woocommerce-notices-wrapper .woocommerce-hqd {background-color: transparent; padding: 16px; border-radius: 6px; min-width: 250px; margin-bottom: 0; padding-left: 30px; padding-top: 60px; border:  none; color: #fff; font-weight: 600; position: fixed; background: rgba(0,0,0,0.7); width: 350px; height: 150px; border-radius: 10px; left: 50%; transform: translateX(-50%); box-shadow: rgb(179, 179, 179) 1px 1px 15px; z-index: 10; }
.woocommerce-notices-wrapper .woocommerce-hqd .button-close {position: absolute; top: 0px; right: 8px; cursor: pointer; width: 10px; height: 10px; }
.woocommerce-notices-wrapper .woocommerce-hqd:not(:first-child) {display: none; } 
.woocommerce-notices-wrapper .woocommerce-hqd a{ display: none;}
.woocommerce-notices-wrapper .woocommerce-message::before {top:  10px; left:  50%; transform: translateX(-50%); font-size: 30px; }*/

/* Ẩn nút 'Xem giỏ hàng' mặc định sinh ra cạnh nút Add to cart */
a.added_to_cart.wc-forward {
    display: none !important;
}

/* Ẩn luôn thông báo mặc định của Woo (nằm trên đầu trang) để tránh trùng với Popup mới */
.woocommerce-notices-wrapper .woocommerce-message:not(.woocommerce-hqd) {
    display: none !important;
}

/************************************************************************************/
/*********************************** CART - PRICING TOTAL ***************************/
/*#region*/

.cart-price-total .step-actions-container {
    display: flex;
}

.cart-price-total .step-action {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #020202;
    margin-bottom: 24px;
    margin-right: 8px;
    flex: 1;
}

.cart-price-total .step-action:last-of-type {
    margin-right: 0;
}

.cart-price-total .price-detail {
    border: 1px solid #DADAE4;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.cart-price-total .price-detail .price-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.cart-price-total .price-detail .price-list>li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cart-price-total .price-detail .price-list>li:last-of-type {
    margin-bottom: 0;
}

.cart-price-total .price-detail .price-list .label {
    font-family: 'Quicksand', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: #020202;
    margin: 0;
    padding-left: 0;
}

.cart-price-total .price-detail .price-list .value {
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    color: #24242F;
}

.cart-price-total .price-detail .price-list>li.divider {
    height: 1px;
    background-color: #DADAE4;
    margin-bottom: 16px;
}

.cart-price-total .price-detail .price-list>li.total .value {
    font-size: 20px;
}

.cart-price-total .price-detail .select-coupon-container {
    margin-bottom: 24px;
}

.cart-price-total .price-detail .select-coupon-container .label {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1px;
    color: #24242F;
    padding-left: 0;
}

.cart-price-total .price-detail .select-coupon-container .label .icon {
    width: 24px;
    margin-right: 4px;
}

.cart-price-total .price-detail .select-coupon {
    position: relative;
    height: 48px;
    line-height: 48px;
    font-family: 'Quicksand', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #616286;
    padding: 0 14px;
    text-align: left;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.cart-price-total .price-detail .select-coupon .icon {
    width: 16px;
}

.cart-price-total .price-detail .alert-coupon {
    position: relative;
    background: url(../images/bg-alert-coupon.png);
    background-size: 100% 100%;
    padding: 16px 24px;
}

.cart-price-total .price-detail .alert-coupon .description {
    font-size: 13px;
    line-height: 18px;
    color: #24242F;
    margin-bottom: 2px;
}

.cart-price-total .price-detail .alert-coupon .alert-footer {
    display: flex;
    align-items: center;
}

.cart-price-total .price-detail .alert-coupon .alert-footer .progress {
    flex: 1;
    height: 4px;
    background-color: #DADAE4;
}

.cart-price-total .price-detail .alert-coupon .alert-footer .progress-bar {
    background: #303D50;
}

.cart-price-total .price-detail .alert-coupon .alert-footer .icon-container {
    width: 20px;
    margin-left: 4px;
}

.cart-price-total .alert-coupon-2 {
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1px;
    color: #303D50;
    padding: 27px 35px;
    background: url(../images/bg-alert-coupon-2.png);
    background-size: 100% 100%;
    margin-bottom: 16px;
}

.cart-price-total .alert-coupon-2 .label {
    color: #1877F2;
    padding-left: 0;
}

.cart-price-total .coins-box {
    border: 1px solid #DADAE4;
    border-radius: 16px;
    padding: 17px 20px 13px;
    text-align: center;
}

.cart-price-total .coins-box .label {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    color: #303D50;
    margin-bottom: 4px;
    padding-left: 0;
}

.cart-price-total .coins-box .value {
    font-weight: bold;
    font-size: 28px;
    line-height: 32px;
    color: #F9D311;
}

/************************************************************************************/
/*********************************** CART - PRICING DETAIL **************************/
/*#region*/

.cart-price-detail {
    margin-bottom: 30px;
}

.cart-price-detail .buy-more img { width: 10px; }
.cart-price-detail .buy-more  { display: inline-block; }
.cart-price-detail .title {font-weight: bold; font-size: 28px; line-height: 32px; color: #121212000; margin-bottom: 26px; }
.cart-price-detail .title .sub { font-style: normal; font-weight: normal; font-size: 16px; line-height: 24px; color: #24242F; }
.cart-price-list {padding: 0; margin: 0; list-style-type: none; margin-bottom: 7px; }
.cart-price-list>li {padding: 30px 0 20px; display: flex; border-bottom: 1px solid #DADAE4; flex-wrap: wrap; }
.cart-price-list>li:first-of-type {padding-top: 0; }
.cart-price-list .img-container {
    width: 72px;
    height: 72px;
    border: 0.5px solid #DADAE4;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 24px;
    padding: 4px;
}

.cart-price-list .img-container>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 7px;
}

.cart-price-list .actions {
    display: flex;
    margin-top: 8px;
}

.cart-price-list .action {
    background: #FAFAFA;
    border-radius: 8px;
    height: 26px;
    line-height: 26px;
    font-size: 13px;
    color: #303D50;
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 8px;
    border: none;
}

.cart-price-list .action>img {
    width: 14px;
    margin-right: 6px;
}

.cart-price-list .action .hover {
    display: none;
}

.cart-price-list .action:hover .default {
    display: none;
}

.cart-price-list .action:hover .hover {
    display: block;
}

.cart-price-list .action:hover {
    background: #020202;
    color: #fff;
}

.cart-price-list .info {
    flex: 1;
}

.cart-price-list .product-name {
    font-size: 13px;
    line-height: 18px;
    color: #303D50;
    margin-bottom: 2px;
    display: flex;
}

.cart-price-list .price-group {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
}

.cart-price-list .price {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    color: #303D50;
}

.cart-price-list .old-price {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    text-decoration: line-through;
    color: #9596A3;
    margin-left: 4px;
}

.cart-price-list .info .list-feature {
    padding-left: 16px;
    margin-bottom: 10px;
}

.cart-price-list .info .name { font-weight: 600; }

.cart-price-list .info .list-feature li {
    font-size: 13px;
    font-weight: 500;
}

.cart-price-list .product-count {
    display: flex;
    align-items: flex-start;
}

.cart-price-list .product-count .alert {
    padding: 4px 0 0 14px;
    font-size: 13px;
    line-height: 18px;
    color: #FF0909;
}

.cart-price-list .tag {
    display: inline-block;
    border-radius: 8px;
    padding: 0 16px;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
}

.cart-price-list .tag-warning {
    background: #F9D311;
    color: #020202;
}

.cart-price-list .tag-success {
    background: #F1FFF1;
    color: #0BAC3C;
}

.cart-price-list .product-name .tag {
    margin-left: 10px;
    margin-top: -2px;
}

.cart-price-list .delete-confirm-container {
    width: 100%;
    display: none;
}

.cart-price-list .delete-confirm {
    width: 100%;
    padding-top: 30px;
    margin-top: 20px;
    border-top: 1px solid #DADAE4;
    display: flex;
    justify-content: flex-end;
}

.cart-price-list .delete-confirm-inner {
    width: 250px;
    max-width: 100%;
}

.cart-price-list .delete-confirm .description {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 8px;
    color: #24242F;
}

.cart-price-list .confirm-actions {
    display: flex;
    justify-content: space-between;
}

.cart-price-list .confirm-actions .btn {
    background: #FAFAFA;
    border-radius: 8px;
    height: 34px;
    line-height: 34px;
    width: 48%;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.1px;
    color: #020202;
    padding: 0 10px;
    border: none;
}

.cart-price-list .confirm-actions .btn .icon {
    width: 16px;
}

.cart-price-list .confirm-actions .btn.save {
    background-color: #F9D311;
}

.cart-price-detail .selected-coupon {
    background: #ECF7FF;
    border-radius: 8px;
    display: flex;
    padding: 20px;
    align-items: center;
}

.cart-price-detail .selected-coupon .description {
    flex: 1;
}

.cart-price-detail .selected-coupon .description .label {
    font-size: 13px;
    line-height: 18px;
    color: #121212000;
    font-weight: normal;
    padding-left: 0;
}

.cart-price-detail .selected-coupon .description .value {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1px;
    color: #1877F2;
}

.cart-price-detail .selected-coupon .icon-container {
    width: 20px;
}

.cart-price-detail .next-step {
    height: 48px;
    line-height: 48px;
    font-family: Quicksand;
    font-weight: bold;
    font-size: 16px;
    color: #24242F;
    display: block;
    margin-top: 32px
}

.cart-price-detail .next-step .icon {
    width: 24px;
}

.cart-exchange-gift .title {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.1px;
    color: #020202;
    margin-bottom: 24px;
}

.cart-exchange-gift .tabs {
    border-bottom: 1px solid #DADAE4;
    margin-bottom: 35px;
    display: flex;
}

.cart-exchange-gift .tabs .tab {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1px;
    border-bottom: 4px solid transparent;
    padding: 0 18px 4px 18px;
    margin-bottom: -1px;
    transition: all ease .4s;
    display: block;
    color: #9596A3;
}

.cart-exchange-gift .tabs .tab.active {
    border-color: #F9D311;
    color: #24242F;
}


/************************************************************************************/
/*********************************** CART - PRICING DETAIL **************************/

#popup-exchange-gift {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: all ease .4s;
}

#popup-exchange-gift.open {
    opacity: 1;
    pointer-events: all;
}

#popup-exchange-gift .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #303D50;
    opacity: 0.4;
}

#popup-exchange-gift .box {
    position: relative;
    z-index: 1;
    padding: 32px;
    width: 700px;
    max-width: 90%;
    max-height: 90%;
    background: #FFFFFF;
    border-radius: 8px;
    margin: auto;
    overflow: auto;
    transition: all ease .4s;
    transform: translateY(20px);
}

#popup-exchange-gift.open .box {
    transform: translateY(0);
}

.coupon-container { position: absolute; bottom: 60px; left: 0px; right: 0px; background-color: #fff; z-index: 10; padding: 10px 25px 10px 25px;  background-color: #f1f1f1;}
.group-action-cart .coupon { display: flex; }
.group-action-cart .coupon input { flex-grow: 1; flex-basis: 0; border: 1px solid #C4C4C4; border-radius: 5px; padding: 8px 15px; margin-right: 10px;}
.group-action-cart .coupon button { background-color: #1E407B; border-radius: 5px; color: #fff;}
.woocommerce-remove-coupon { color: #ED3237; }
.group-action-cart .right .btn { font-size: 16px; font-weight: 600; width: 100%; line-height: 50px; height: 50px; }
.cart-page .next-step a {height: 48px; line-height: 48px; font-weight: bold; color: #24242F; display: block; display: flex; align-items: center; justify-content: center; }
.cart-page .next-step img {width: 8px; margin-right: 10px; }
.woocommerce-cart-form__right { position: sticky; top: 20px; }


/*Page checkout*/
.checkout_page .woocommerce-checkout { display: flex; justify-content: center; padding: 60px 0;}
.checkout_page .woocommerce-checkout .custom-form { width: 50%;}
.checkout_page .woocommerce-checkout .custom-form .title {font-weight: bold; font-size: 28px; line-height: 32px; color: #121212000; margin-bottom: 26px; text-align: center;}
.checkout_page .woocommerce-checkout .form-row-wide{ width: 100% }
.checkout_page .woocommerce-checkout .top { margin-bottom: 30px; } 
.checkout_page .woocommerce-checkout .woocommerce-checkout-review-order { width: 50%; padding-left: 50px;}
.checkout_page .group-button { position: relative; border-top: 1px solid #DDDDDD; padding-left: unset;}
.checkout_page .group-button button { margin-top: 11px; width: 100%; text-transform: uppercase; padding: 12px 5px;}
.checkout_page .group-button button:first-child{ background-color: #1AA81F; }
.checkout_page .group-button button:last-child { background-color:#1E407B; }
.checkout_page .woocommerce-checkout-payment .group-button { display: flex; flex-wrap: wrap; }

/*Input*/
.woocommerce form .form-row-wide { width: 50%;}
#billing_email_field { width: 100%; }
.woocommerce .custom-form .form-row-wide .woocommerce-input-wrapper { width: 100%; position: relative;}
.woocommerce .custom-form .form-row-wide input, .product-search-field { width: 100%; border: 1px solid #BEBEBE; height: 40px; padding-left: 11px; border-radius: 5px; }
.woocommerce form .form-row textarea{width: 100%; border: 1px solid #BEBEBE; height: 46px; padding: 11px; border-radius: 5px; }
.woocommerce form .form-row.my-field-class { width: 100%; }
.woocommerce form .form-row label.error { color: #ED3237; font-size: 12px; font-style: italic; margin-bottom: 0; bottom: -23px; position: absolute;}
.woocommerce form .form-row-wide span.optional { display: none; }
.checkout-info .info-header .text {flex: 1; font-weight: 600; font-size: 14px; line-height: 1.43; text-transform: uppercase; color: #303D50; align-self: center; } 
.checkout-info .info-body-content .label {font-size: 12px; color: #616286; font-weight: bold; line-height: 1.5; margin-bottom: 4px; padding-left: 10px; }



/* --- 1. Cấu hình Wrapper (Khung chứa) --- */
.woocommerce-notices-wrapper {
    position: fixed;
    top: 120px;
    right: 20px;
    z-index: 999999;
    width: 100%;
    max-width: 400px;
    pointer-events: none; /* Để bấm xuyên qua vùng trống */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- 2. Style chung cho cả Popup AJAX và Thông báo mặc định --- */
/* .qd-toast là class ta tự tạo, .woocommerce-message/error là class mặc định */
.qd-toast, 
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    position: relative;
    pointer-events: auto;
    animation: slideInRight 0.5s ease forwards;
    display: flex !important; /* Ép hiển thị flex */
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    border-top: 0 !important; /* Bỏ border top mặc định của Woo */
    margin-bottom: 0 !important;
}

/* --- 3. Phân loại màu sắc --- */
/* Thành công (Màu xanh) */
.qd-toast.success, 
.woocommerce-notices-wrapper .woocommerce-message {
    border-left: 5px solid #2ecc71 !important;
}

/* Lỗi (Màu đỏ) */
.qd-toast.error, 
.woocommerce-notices-wrapper .woocommerce-error {
    border-left: 5px solid #e74c3c !important;
}
.woocommerce-notices-wrapper .woocommerce-error li {
    margin: 0; /* Reset style list lỗi mặc định */
    list-style: none;
}

/* Thông tin (Màu xanh dương) */
.qd-toast.info, 
.woocommerce-notices-wrapper .woocommerce-info {
    border-left: 5px solid #3498db !important;
}

/* --- 4. Ẩn nút "Xem giỏ hàng" mặc định nếu còn sót --- */
.woocommerce-notices-wrapper .button.wc-forward {
    display: none !important;
}

/* Hiệu ứng trượt */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


.infomation-product {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    border: 2px solid #c8204e; /* Viền đỏ bao quanh */
    border-radius: 12px;
    overflow: hidden; /* Để bo góc nội dung bên trong */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Phần Header đỏ */
.infomation-product .header {
    background-color: #c8204e;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    overflow: hidden; /* Để cắt phần trang trí tròn */
}

/* Icon ngọn lửa */
.infomation-product .header svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}

/* Họa tiết tròn trang trí góc phải (CSS thuần) */
.infomation-product .header::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    box-shadow: -20px 20px 0 -2px rgba(255,255,255,0.3); /* Tạo vòng tròn thứ 2 */
}

/* Phần danh sách UL */
.infomation-product ul {
    list-style: none;
    padding: 10px 20px;
}

/* Cấu trúc .info ul li theo yêu cầu */
.infomation-product ul li {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee; /* Đường kẻ mờ ngăn cách */
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}

/* Xóa đường kẻ ở dòng cuối cùng */
.infomation-product ul li:last-child {
    border-bottom: none;
}

/* Icon dấu tích đỏ trong thẻ li */
.infomation-product ul li .icon-check {
    width: 20px;
    height: 20px;
    min-width: 20px; /* Chống méo khi xuống dòng */
    background-color: #c8204e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* Vẽ dấu tích trắng bằng CSS/SVG */
.infomation-product ul li .icon-check svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}

/* Chữ đậm */
.infomation-product ul li strong {
    font-weight: bold;
    color: #121212;
    margin: 0 4px;
}