/* ==========================================================================
   Trang Giỏ hàng (woocommerce/cart/cart.php + inc/block-cart-page.php).
   Bundle này KHÔNG có bản gốc để tải (xem download-theme-assets.sh) vì DOM desktop
   của bản gốc được Bizweb dựng bằng JS phía client (không có sẵn trong HTML tĩnh) -
   CSS bên dưới viết tay bám theo đúng tên class lấy từ template JS đó
   (Bizweb.updateCartPageForm) + ảnh chụp giao diện thật.
   ========================================================================== */

/* Spinner cho blockUI khi tang/giam so luong (xem custom.js) - moi lan bam mat khoang 2-3s
   de server xu ly xong (tai lai toan bo WordPress + plugin cho MOI request ajax, khong lien
   quan gio hang), nen bat buoc phai co dau hieu dang chay ro rang, tranh nguoi dung tuong bi
   treo/loi. */
.huydev-qty-spinner{
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border: 3px solid rgba(28, 28, 28, .15);
    border-top-color: #1c1c1c;
    border-radius: 50%;
    animation: huydev-spin .6s linear infinite;
}
@keyframes huydev-spin{
    to{ transform: rotate(360deg); }
}

.lbl-shopping-cart{
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ebebeb;
    font-family: var(--th-font-main);
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lbl-shopping-cart span{
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #898989;
}

/* --- Danh sách sản phẩm (cột trái, desktop) --- */
/* .cart-collaterals trùng tên với class gốc của WooCommerce (woocommerce-layout.css có sẵn
   ".woocommerce-page .cart-collaterals{width:100%}", đặc trưng 2 lớp) khiến cột phải bị đẩy
   xuống full-width thay vì nằm cạnh cột trái. Ghi đè lại đúng tỉ lệ 75/25 với cùng mức đặc
   trưng (2 lớp) để thắng - xem woocommerce/assets/css/woocommerce-layout.css. */
.shopping-cart-table .cart-col-1{
    width: 75%;
    padding-right: 30px;
}
.shopping-cart-table .cart-col-2{
    width: 25%;
}
/* .cart_desktop_page .cart cũng trùng tên với class gốc của WooCommerce - "woocommerce.css"
   có sẵn ".cart{margin-bottom:2em}" (1 lớp), thêm khoảng trắng thừa dưới 2 cột. Ghi đè bằng
   đặc trưng 2 lớp (chắc thắng, không phụ thuộc thứ tự nạp CSS). */
.cart_desktop_page .cart{
    margin-bottom: 0;
}
.shopping-cart-item{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid #ebebeb;
}
.cart-tbody .shopping-cart-item:first-child{
    padding-top: 0;
}
.shopping-cart-item .img-thumnail-custom{
    width: 90px;
    flex: 0 0 90px;
    padding: 0;
}
.shopping-cart-item .img-thumnail-custom .image{
    margin: 0;
    display: block;
    overflow: hidden;
}
.shopping-cart-item .img-thumnail-custom img{
    width: 100%;
    height: auto;
    display: block;
}
.shopping-cart-item .col-right{
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.shopping-cart-item .box-info-product{
    flex: 1 1 auto;
    min-width: 200px;
    padding-right: 15px;
}
.shopping-cart-item .box-info-product .name{
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.shopping-cart-item .box-info-product .name a{
    color: #1c1c1c;
}
.shopping-cart-item .box-info-product .name a:hover{
    color: #dc4e3f;
}
.shopping-cart-item .box-info-product .action{
    margin: 0;
}
.shopping-cart-item .box-info-product .action .remove-item-cart{
    padding: 0;
    font-size: 13px;
    color: #dc4e3f;
    text-decoration: none;
    background: none;
    border: none;
}
.shopping-cart-item .box-info-product .action .remove-item-cart:hover{
    text-decoration: underline;
}
.shopping-cart-item .box-price{
    flex: 0 0 120px;
    text-align: right;
    padding-right: 30px;
}
.shopping-cart-item .box-price .price{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #dc4e3f;
    white-space: nowrap;
}
/* Rong dung bang 30(nut -) + 40(o so) + 30(nut +) + 2(border trai/phai) = 102px. Truoc day
   dat 110px (rong hon nhu cau thuc) trong khi o so bi max-width:40px chan lai khong the
   flex-grow lap day phan du 8px do, de lai 1 khoang trong o CUOI hang (ben phai nut +, vi
   justify-content mac dinh la flex-start) - dung dung 102px de khong con phan du nao. */
.shopping-cart-item .quantity-block{
    flex: 0 0 102px;
}
.shopping-cart-item .input-group.bootstrap-touchspin{
    display: flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    overflow: hidden;
}
.shopping-cart-item .input-group-btn{
    display: flex;
    align-items: stretch;
    width: 100%;
}
/* Nút +/- vẫn giữ nguyên class "btn btn-default" từ HTML gốc (để khớp cấu trúc), nhưng vì
   vậy bị dính rất nhiều style mặc định không mong muốn đang chồng lên nhau:
   - Bootstrap: ".input-group-btn:first-child > .btn{margin-right:-1px}" VÀ
     ".input-group-btn:last-child > .btn{margin-left:-1px}" - do .input-group-btn của mình
     là con DUY NHẤT trong .input-group nên nó vừa là :first-child vừa là :last-child, khiến
     CẢ HAI nút +/- đều bị áp margin-left VÀ margin-right: -1px, đè nút + lấn 1px vào đúng chỗ
     border-left của ô số lượng, làm mất hẳn đường viền phân cách (đây là điều đã thấy: nút +
     "chưa có border-left").
   - Theme (index.scss.css hoặc evo-watch.scss.css): ".btn, input[type=submit]{height:40px;
     padding:0 20px}" đè luôn chiều cao 34px định sẵn cho ô số lượng, khiến nút và ô input
     không còn cùng chiều cao, layout bị lệch.
   Phải dùng !important vì các rule trên đặc trưng cao (".input-group-btn:first-child > .btn"
   = 3 lớp/pseudo-class) hoặc nạp sau trong chuỗi phụ thuộc - không thể thắng bằng cách tăng
   số lớp chọn thông thường một cách chắc chắn. */
.shopping-cart-item .items-count{
    flex: 0 0 30px;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fff;
    color: #1c1c1c;
    font-size: 15px;
    line-height: 32px !important;
    cursor: pointer;
}
.shopping-cart-item .items-count:hover{
    background: #f2f2f2;
}
.shopping-cart-item .items-count:disabled{
    color: #ccc;
    cursor: not-allowed;
    background: #fff;
}
.shopping-cart-item .quantity.qty{
    /* Rong co dinh (khong con flex-grow) de khop dung voi be rong 102px co dinh cua
       .quantity-block o tren - tranh moi phan du/thieu do lam tron hay thay doi sau nay. */
    flex: 0 0 40px;
    width: 40px;
    max-width: 40px;
    /* min-height:40px tren "input[type=text],..." khong bi height ghi de (2 thuoc tinh khac
       nhau - used height = max(height, min-height)), phai tu dat lai min-height moi thang. */
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 32px !important;
    border: none !important;
    border-left: 1px solid #d8d8d8 !important;
    border-right: 1px solid #d8d8d8 !important;
    background: #fff;
    color: #1c1c1c;
    text-align: center;
}

/* --- Sidebar tổng tiền + nút thanh toán (cột phải, desktop) --- */
.cart-collaterals{
    padding-left: 10px;
}
.cart-collaterals .box-style.fee{
    padding: 14px 0;
    border-bottom: 1px solid #ebebeb;
}
.cart-collaterals .list-info-price{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    font-size: 14px;
}
.cart-collaterals .list-info-price .totals_price{
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1c;
}
.cart-collaterals .total2{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
/* .total2 (và .title-cart mobile bên dưới) giữ nguyên class "clearfix" từ HTML gốc, nhưng
   .clearfix:before/:after của Bootstrap tạo content:" "/"" + display:table - khi phần tử đó
   lại là display:flex (như ở đây), 2 pseudo-element rỗng này biến thành FLEX ITEM THẬT,
   khiến .total2 có 4 flex item thay vì 2 (rỗng-đầu, label, giá, rỗng-cuối). justify-content:
   space-between khi đó chia đều 3 khoảng trống giữa 4 item, làm label/giá trông bị thụt vào
   2 bên thay vì áp sát mép - đây là lỗi kinh điển "clearfix trên flex container". Tắt hẳn 2
   pseudo-element đó cho các dòng flex này (clearfix vốn dùng để chứa float, không cần khi
   đã là flex). */
.cart-collaterals .total2.clearfix::before,
.cart-collaterals .total2.clearfix::after,
.cart-mobile .header-cart-price .title-cart.clearfix::before,
.cart-mobile .header-cart-price .title-cart.clearfix::after{
    content: none;
    display: none;
}
.cart-collaterals .total2 .text-label{
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1c;
}
.cart-collaterals .total2 .amount p{
    margin: 0;
}
.cart-collaterals .total2 .amount .totals_price{
    font-size: 22px;
    font-weight: 700;
    color: #dc4e3f;
}
/* WooCommerce 10.x tự thêm sẵn style mặc định cho MỌI thẻ mang class "button" trong phạm vi
   .woocommerce (div bọc cứng quanh shortcode [woocommerce_cart], xem
   WC_Shortcodes::shortcode_wrapper()): ".woocommerce:where(body:not(...)) a.button{color:
   #515151;background-color:#e9e6ed}". Nhờ dùng :where() nên selector đó KHÔNG cộng dồn độ
   đặc trưng của phần :where(...), nhưng vẫn còn ".woocommerce"+"a"+".button" = 2 lớp + 1 thẻ
   (0,2,1,0) - đặc trưng HƠN ".cart-collaterals .btn-checkout" (0,2,0,0) dù nạp sau, nên vẫn
   thắng và đè mất màu đen/trắng đã đặt. Ghi đè bằng 3 lớp (.cart-collaterals.cart_submit
   .btn-checkout, cùng nằm trên 1 thẻ) để chắc chắn thắng bất kể WooCommerce đổi cách nạp CSS. */
/* Ngoài màu, còn có ".btn.btn-large{height:50px;line-height:50px}" (theme) VÀ
   ".woocommerce a.button{line-height:1}" (WC, đặc trưng cao hơn nhờ ".woocommerce"+"a"+
   ".button" nên thắng cả line-height:50px) cùng áp lên nút này - kết quả: khung cao 50px cố
   định nhưng dòng chữ chỉ cao đúng bằng font-size (13px) do line-height:1 thắng, chữ không
   được canh giữa theo chiều dọc mà lệch lên trên. Dùng flex căn giữa thay vì dựa vào
   line-height/padding để không còn phụ thuộc coi rule nào đang thắng cho 2 thuộc tính đó. */
.cart-collaterals.cart_submit .btn-checkout,
.cart-collaterals.cart_submit .btn-checkouts{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 13px 10px;
    border: 1px solid #1c1c1c;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cart-collaterals.cart_submit .btn-checkout{
    background: #1c1c1c;
    color: #fff;
}
.cart-collaterals.cart_submit .btn-checkout:hover,
.cart-collaterals.cart_submit .btn-checkout:focus{
    background: #dc4e3f;
    border-color: #dc4e3f;
    color: #fff;
}
.cart-collaterals.cart_submit .btn-checkouts{
    margin-top: 12px;
    background: #fff;
    color: #1c1c1c;
}
.cart-collaterals.cart_submit .btn-checkouts:hover,
.cart-collaterals.cart_submit .btn-checkouts:focus{
    background: #1c1c1c;
    color: #fff;
}

/* --- Giỏ hàng trống --- */
.cart-empty{
    padding: 60px 20px;
    text-align: center;
}
.cart-empty-icon{
    margin-bottom: 16px;
    font-size: 46px;
    color: #d8d8d8;
}
.cart-empty p{
    margin: 0 0 20px;
    color: #898989;
}
.cart-empty .btn-cart-empty .btn{
    display: inline-block;
    background: #f2f2f2;
    color: #1c1c1c;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background-color .2s ease, color .2s ease;
}
.cart-empty .btn-cart-empty .btn:hover,
.cart-empty .btn-cart-empty .btn:focus{
    background: #1c1c1c;
    color: #fff;
}

/* --- Mobile (visible-sm visible-xs) --- */
.cart-mobile .header-cart{
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
}
.cart-mobile .title-cart h3{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.cart-mobile .item-product{
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #ebebeb;
}
.cart-mobile .item-product-cart-mobile{
    flex: 0 0 80px;
    width: 80px;
}
.cart-mobile .item-product-cart-mobile img{
    width: 100%;
    height: auto;
    display: block;
}
.cart-mobile .title-product-cart-mobile{
    flex: 1 1 auto;
    padding: 0 10px;
}
.cart-mobile .title-product-cart-mobile h3{
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}
.cart-mobile .title-product-cart-mobile h3 a{
    color: #1c1c1c;
}
.cart-mobile .title-product-cart-mobile p{
    margin: 0;
    font-size: 13px;
    color: #898989;
}
.cart-mobile .title-product-cart-mobile .pricechange{
    color: #dc4e3f;
    font-weight: 600;
}
.cart-mobile .select-item-qty-mobile{
    flex: 0 0 90px;
    text-align: right;
}
.cart-mobile .txt_center{
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    height: 30px;
    margin-bottom: 8px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    overflow: hidden;
}
.cart-mobile .txt_center .items-count{
    flex: 0 0 26px;
    padding: 0;
    border: none;
    background: #fff;
    color: #1c1c1c;
    cursor: pointer;
}
.cart-mobile .txt_center .items-count:disabled{
    color: #ccc;
    cursor: not-allowed;
}
.cart-mobile .txt_center .qty{
    width: 30px;
    padding: 0;
    border: none;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    background: #fff;
    text-align: center;
}
/* .remove-item-cart o mobile van giu class "button" tu HTML goc de tuong thich JS/fidelity,
   nen cung dinh phai WooCommerce mac dinh (".woocommerce a.button{background:#e9e6ed;
   padding:.618em 1em;border-radius:3px}") giong het truong hop nut Thanh toan/Tiep tuc mua
   hang da gap - o day khien "Xoa" nhin thanh 1 nut hop bo vien thay vi chi la link chu do
   don gian. Selector nay da 3 lop (0,3,0,0) du thang ma khong can !important, chi la truoc
   day chua khai bao het cac thuoc tinh can reset. */
.cart-mobile .select-item-qty-mobile .remove-item-cart{
    display: inline-block;
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #dc4e3f;
}
.cart-mobile .header-cart-price{
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #ebebeb;
}
.cart-mobile .header-cart-price .title-cart{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.cart-mobile .header-cart-price h3{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.cart-mobile .totals_price_mobile{
    font-size: 18px;
    font-weight: 700;
    color: #dc4e3f;
}
.cart-mobile .checkout{
    margin-top: 14px;
}
/* Nút "Tiếp tục mua hàng" là sibling của .checkout (đúng bản gốc), không nằm trong nó. */
.cart-mobile .checkout + .btn-proceed-continues-mobile{
    margin-top: 10px;
}
.cart-mobile .btn-proceed-checkout-mobile,
.cart-mobile .btn-proceed-continues-mobile{
    display: block;
    width: 100%;
    padding: 13px 10px;
    border: 1px solid #1c1c1c;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cart-mobile .btn-proceed-checkout-mobile{
    margin-bottom: 10px;
    background: #1c1c1c;
    color: #fff;
}
.cart-mobile .btn-proceed-continues-mobile{
    background: #fff;
    color: #1c1c1c;
}

@media (max-width: 767px){
    .shopping-cart{
        padding: 0 15px;
    }
}