/* =============================================
   VFT Shop — Giỏ hàng trên header + panel giỏ
   hàng xổ ra từ mép phải.

   Làm theo cách của nguyenlieusinhhoc.com
   (Flatsome, kiểu "off-canvas cart"): bấm vào giỏ
   hàng trên header thì panel trượt từ phải vào,
   nền mờ phía sau, ruột panel là mini cart của
   WooCommerce.

   Mục giỏ hàng trên menu desktop KHÔNG còn icon,
   chỉ còn chữ "Giỏ hàng" + số lượng. Header mobile
   vẫn giữ icon vì chỗ đó không có chữ.

   Màu lấy hết từ shop-tokens.css.
   Markup: inc/header-cart.php · JS: assets/js/mini-cart.js
   ============================================= */

/* ── Giỏ hàng trên thanh menu desktop ────── */
header.site-header .main-nav > ul > li.menu-item-vft-cart > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #333333;
    cursor: pointer;
}

header.site-header .main-nav > ul > li.menu-item-vft-cart > a:hover {
    color: var(--vft-primary);
}

header.site-header .main-nav > ul > li.menu-item-vft-cart .vft-cart-count {
    background: var(--vft-danger);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 9px;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-block;
}

header.site-header .main-nav > ul > li.menu-item-vft-cart .vft-cart-count.vft-cart-empty {
    display: none !important;
}

/* ── Icon giỏ hàng trên header mobile ────── */
.header_item.cart_switcher {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.header_item.cart_switcher .vft-header-cart-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.header_item.cart_switcher .vft-cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header_item.cart_switcher .vft-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--vft-danger);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 9px;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    border: 1.5px solid #ffffff;
    box-sizing: border-box;
    display: inline-block;
}

.header_item.cart_switcher .vft-cart-count.vft-cart-empty {
    display: none !important;
}

/* ── Giỏ hàng trong menu mobile (#mobile_menu) ── */
#mobile_menu .menu-item-vft-cart > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

#mobile_menu .menu-item-vft-cart .vft-cart-count {
    background: var(--vft-danger);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 9px;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-block;
}

#mobile_menu .menu-item-vft-cart .vft-cart-count.vft-cart-empty {
    display: none !important;
}

/* =============================================
   PANEL GIỎ HÀNG
   ============================================= */

/* Header của theme để z-index 9999, popup tìm kiếm 99999
   (themes/thuythu/assets/css/frontend.css) nên panel phải cao hơn cả hai. */
.vft-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
}

.vft-cart-drawer--open {
    visibility: visible;
    pointer-events: auto;
}

/* Nền mờ và chuyển động lấy đúng thông số của Flatsome bên
   nguyenlieusinhhoc.com (`.mfp-bg` và `.off-canvas-right .mfp-content` trong
   themes/flatsome/assets/css/flatsome.css):
     - nền  #0b0b0b, opacity 0 -> .6, transition .25s
     - panel translateX(270px) -> 0, transition .2s
     - đổ bóng 0 0 10px rgba(0,0,0,.5)
   Đổi mấy con số này là panel "cảm giác" khác site gốc ngay. */
.vft-cart-drawer__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0b0b0b;
    opacity: 0;
    transition: opacity .25s;
}

.vft-cart-drawer--open .vft-cart-drawer__overlay {
    opacity: .6;
}

.vft-cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.25, .8, .25, 1);
    overscroll-behavior: contain;
}

.vft-cart-drawer--open .vft-cart-drawer__panel {
    transform: translateX(0);
}

/* Giữ thanh cuộn ổn định, không để layout trang web bên dưới bị giật/nhảy khi mở panel */
html {
    scrollbar-gutter: stable;
}

body.vft-cart-drawer-open {
    touch-action: pan-y;
}

/* Nút liên hệ nổi ở góc phải (plugin button-contact-vr) và bong bóng chat Zalo
   đặt z-index rất cao (cái Zalo tới 2147483644), đè lên đúng chỗ 2 nút "Xem giỏ
   hàng" / "Thanh toán". Làm mờ êm dịu thay vì display:none để không gây giật/nháy DOM. */
body.vft-cart-drawer-open #button-contact-vr,
body.vft-cart-drawer-open .phone-bar,
body.vft-cart-drawer-open .zalo-chat-widget {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vft-cart-drawer__overlay,
    .vft-cart-drawer__panel {
        transition: none;
    }
}

/* ── Thanh tiêu đề ───────────────────────── */
.vft-cart-drawer__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--vft-primary);
    color: #fff;
}

.vft-cart-drawer__title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.3;
}

.vft-cart-drawer__close {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}

.vft-cart-drawer__close:hover,
.vft-cart-drawer__close:focus {
    background: rgba(255, 255, 255, .32);
}

/* ── Ruột panel ──────────────────────────────
   `.widget_shopping_cart_content` là mẩu HTML mà
   WooCommerce thay nguyên khối mỗi lần giỏ đổi
   (fragment), nên bố cục dọc phải đặt trên chính
   nó chứ không đặt ở thẻ bọc bên ngoài.
   ─────────────────────────────────────────── */
.vft-cart-drawer__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.vft-cart-drawer__body > .widget_shopping_cart_content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* ── Danh sách sản phẩm ──────────────────────
   `flex: 0 1 auto` (KHÔNG phải 1 1 auto): danh sách
   chỉ cao đúng bằng số hàng đang có, nên ít hàng thì
   cụm tạm tính + 2 nút nằm ngay dưới sản phẩm cuối,
   không bị đẩy xuống đáy panel. Nhiều hàng thì danh
   sách chạm trần chiều cao còn lại rồi tự cuộn, hai
   nút đứng yên ở đáy.
   ─────────────────────────────────────────── */
.vft-cart-drawer ul.woocommerce-mini-cart {
    flex: 0 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 0 20px;
    list-style: none;
}

.vft-cart-drawer li.woocommerce-mini-cart-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    margin: 0;
    padding: 16px 32px 16px 0;
    border-bottom: 1px solid var(--vft-line);
    list-style: none;
}

.vft-cart-drawer li.woocommerce-mini-cart-item:last-child {
    border-bottom: 0;
}

/* Thẻ <a> bọc ảnh + tên sản phẩm, chiếm trọn dòng đầu. */
.vft-cart-drawer li.woocommerce-mini-cart-item > a:not(.remove) {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--vft-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
}

.vft-cart-drawer li.woocommerce-mini-cart-item > a:not(.remove):hover {
    color: var(--vft-primary);
}

.vft-cart-drawer li.woocommerce-mini-cart-item img {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--vft-line);
    border-radius: var(--vft-radius-sm);
}

/* Quy cách + dòng "2 × 275.000đ" thụt vào cho thẳng hàng với tên sản phẩm. */
.vft-cart-drawer li.woocommerce-mini-cart-item dl.variation,
.vft-cart-drawer li.woocommerce-mini-cart-item .quantity {
    flex: 1 1 100%;
    margin: 0 0 0 76px;
    font-size: 14px;
    color: var(--vft-muted);
}

.vft-cart-drawer li.woocommerce-mini-cart-item dl.variation {
    font-size: 13px;
}

.vft-cart-drawer li.woocommerce-mini-cart-item dl.variation dt,
.vft-cart-drawer li.woocommerce-mini-cart-item dl.variation dd,
.vft-cart-drawer li.woocommerce-mini-cart-item dl.variation p {
    display: inline;
    margin: 0;
}

.vft-cart-drawer li.woocommerce-mini-cart-item .quantity .amount {
    color: var(--vft-text);
    font-weight: 700;
}

.vft-cart-drawer li.woocommerce-mini-cart-item a.remove {
    position: absolute;
    top: 16px;
    right: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--vft-muted) !important;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.vft-cart-drawer li.woocommerce-mini-cart-item a.remove:hover {
    background: var(--vft-danger);
    color: #fff !important;
}

/* Đang gửi lệnh xoá — mờ dòng hàng lại và chặn bấm thêm lần nữa
   (xem assets/js/mini-cart.js). */
.vft-cart-drawer li.woocommerce-mini-cart-item.vft-item-removing {
    opacity: .45;
    pointer-events: none;
}

/* ── Tạm tính + 2 nút ────────────────────── */
.vft-cart-drawer .woocommerce-mini-cart__total {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--vft-line);
    background: var(--vft-bg-soft);
    font-size: 15px;
    color: var(--vft-text);
}

.vft-cart-drawer .woocommerce-mini-cart__total strong {
    font-weight: 600;
}

.vft-cart-drawer .woocommerce-mini-cart__total .amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--vft-accent);
}

.vft-cart-drawer .woocommerce-mini-cart__buttons {
    flex: none;
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    margin: 0;
    padding: 0 20px 10px;
    background: var(--vft-bg-soft);
}

.vft-cart-drawer .woocommerce-mini-cart__buttons a.button,
.vft-cart-drawer .woocommerce-mini-cart__buttons a.button:visited {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0;
    line-height: 44px;
    box-sizing: border-box;
    border: 1px solid var(--vft-primary);
    border-radius: var(--vft-radius-sm);
    background: var(--vft-primary) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

.vft-cart-drawer .woocommerce-mini-cart__buttons a.button:before {
    display: none !important;
}

.vft-cart-drawer .woocommerce-mini-cart__buttons a.button:hover,
.vft-cart-drawer .woocommerce-mini-cart__buttons a.button:focus {
    background: var(--vft-primary-hover) !important;
    border-color: var(--vft-primary-hover);
    color: #fff !important;
}

.vft-cart-drawer .woocommerce-mini-cart__buttons a.checkout,
.vft-cart-drawer .woocommerce-mini-cart__buttons a.checkout:visited {
    border-color: var(--vft-primary);
    background: var(--vft-primary) !important;
    color: #fff !important;
}

.vft-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover,
.vft-cart-drawer .woocommerce-mini-cart__buttons a.checkout:focus {
    border-color: var(--vft-primary-hover);
    background: var(--vft-primary-hover) !important;
    color: #fff !important;
}

/* ── Nút "Tra cứu đơn hàng" ───────────────────
   Site mẫu có đúng nút này trong mini cart, để dưới 2 nút chính và dùng màu
   khác hẳn (bên đó xanh lá) cho khỏi lẫn với nút Thanh toán.
   ─────────────────────────────────────────── */
.vft-cart-drawer__lookup {
    flex: none;
    padding: 0 20px 20px;
    background: var(--vft-bg-soft);
}

.vft-cart-drawer__lookup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--vft-radius-sm);
    background: var(--vft-success);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s;
}

.vft-cart-drawer__lookup-btn:hover {
    background: #14652f;
}

/* ── Giỏ trống ───────────────────────────────
   Căn đỉnh (top-aligned) giống bố cục nguyenlieusinhhoc.com:
   Dòng thông báo giỏ trống nằm ngay dưới header,
   các nút hành động xếp ngay bên dưới với chiều rộng full-width (100%),
   chiều cao 44px chuẩn, màu sắc thương hiệu giữ nguyên.
   ─────────────────────────────────────────── */
.vft-cart-drawer .woocommerce-mini-cart__empty-message {
    flex: 0 0 auto;
    margin: 0;
    padding: 28px 20px 16px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: var(--vft-muted);
}

.vft-cart-drawer__empty-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 20px 24px;
    box-sizing: border-box;
    width: 100%;
}

.vft-cart-drawer__empty-action .vft-cart-drawer__lookup-btn,
.vft-cart-drawer__empty-action .vft-cart-drawer__shop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: var(--vft-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    text-align: center;
    transition: background .2s, border-color .2s;
}

.vft-cart-drawer__empty-action .vft-cart-drawer__lookup-btn {
    border: 0;
    background: var(--vft-success);
    color: #fff !important;
}

.vft-cart-drawer__empty-action .vft-cart-drawer__lookup-btn:hover {
    background: #14652f;
}

.vft-cart-drawer__empty-action .vft-cart-drawer__shop-btn {
    border: 1px solid var(--vft-primary);
    background: var(--vft-primary);
    color: #fff !important;
}

.vft-cart-drawer__empty-action .vft-cart-drawer__shop-btn:hover {
    border-color: var(--vft-primary-hover);
    background: var(--vft-primary-hover);
}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 480px) {
    .vft-cart-drawer__panel {
        width: 100%;
        max-width: none;
    }
}