/* Thẻ Vẹn Tròn (thẻ nạp tiền trước, 03/11/2026): khối ở Menu thẻ, gói; dòng và hộp "Trả bằng thẻ Vẹn Tròn" ở Thanh toán; số dư ở màn Khách hàng, Kích hoạt.
   Dùng lại biến màu của quầy (menu.css, gio-hang.css, khach-hang.css). Chữ từ 13px, vùng bấm từ 44px. */

/* ----- Menu: khối 4 mức nạp ----- */
.vt-khoi { --mau: var(--xanh-dam); background: linear-gradient(135deg, #D8ECCF, #FBF7E8); border: 1.5px solid #C9DDB9; }
.vt-khoi .mn-goi-dau { flex-wrap: wrap; row-gap: 2px; }
.vt-nhan { margin-left: auto; font-size: calc(12px * var(--co-chu)); font-weight: 700; color: #8A6A12; background: #FFF4CF; border-radius: 999px; padding: 3px 10px; }
.vt-rieng { margin-top: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .7); }
.vt-rieng > b { font-size: calc(12.5px * var(--co-chu)); color: #8A6A12; margin-left: -1px; }
.vt-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.vt-ds .mn-goi:nth-child(4) { border-top: 1px solid rgba(60, 40, 20, .12); }
.vt-ds .mn-goi { min-height: 56px; }
.vt-ten { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vt-ten b { font-size: calc(15px * var(--co-chu)); font-weight: 700; }
.vt-ten small { font-size: calc(12.5px * var(--co-chu)); color: var(--chu-phu); line-height: 1.35; }
@media (max-width: 720px) { .vt-ds { grid-template-columns: minmax(0, 1fr); } }

/* ----- Thanh toán: dòng chọn thẻ ----- */
.hd-the-vt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1.5px dashed #BFB79F; background: #fff; color: var(--chu); font: inherit; text-align: left; }
.hd-the-vt.da-chon { border-style: solid; border-color: var(--xanh-rung); background: var(--bac-ha); }
.hd-the-vt .hd-uu-ten { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.hd-the-vt .hd-uu-ten > span { display: flex; flex-direction: column; min-width: 0; }
.hd-the-vt small { font-size: 13px; color: var(--chu-phu); font-weight: 400; }
.hd-the-vt .hd-uu-phai { display: flex; align-items: center; gap: 6px; flex: none; color: var(--chu-phu); }

/* ----- Hộp chọn thẻ ----- */
.vt-tim { display: flex; gap: 8px; }
.vt-tim input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CFC8B5; font: inherit; font-size: 16px; background: #fff; }
.vt-tim button { flex: none; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--xanh-rung); color: #fff; font: inherit; font-weight: 700; }
.vt-tim button:disabled { opacity: .55; }
.vt-ds-the { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vt-the { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid #D9D2BE; background: #fff; text-align: left; font: inherit; color: var(--chu); }
.vt-the.chon { border-color: var(--xanh-rung); background: var(--bac-ha); box-shadow: 0 0 0 2px rgba(45, 102, 53, .15); }
.vt-the[aria-disabled="true"] { opacity: .6; }
.vt-the .vt-the-noi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vt-the .vt-the-noi b { font-size: 15px; }
.vt-the .vt-the-noi small { font-size: 13px; color: var(--chu-phu); }
.vt-the .vt-the-so { flex: none; text-align: right; font-weight: 700; font-size: 16px; color: var(--xanh-dam); }
.vt-the .vt-the-so small { display: block; font-size: 12.5px; font-weight: 400; color: var(--chu-phu); }
.vt-khong { color: #9A4A0E; font-size: 13px; }
.vt-so-tien { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #FBF7E8; border: 1.5px solid #E7DCAE; display: flex; flex-direction: column; gap: 8px; }
.vt-so-tien label { font-weight: 700; font-size: 14px; }
.vt-so-tien input { min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #CFC8B5; font: inherit; font-size: 20px; font-weight: 700; text-align: right; background: #fff; }
.vt-nhanh { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-nhanh button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #CFC8B5; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--chu); }
.vt-nhanh button.on { border-color: var(--xanh-rung); background: var(--bac-ha); color: var(--xanh-dam); }
.vt-loi { margin-top: 10px; color: #9A2B1C; font-size: 14px; }

/* ----- Khách hàng: ô thẻ có số dư ----- */
.kh-so-du { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.kh-so-du-chu { font-size: 13.5px; line-height: 1.45; color: var(--chu); }
.kh-so-du-chu b { color: var(--xanh-dam); }
.kh-so-cai { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid #E6E2D6; }
.kh-so-cai li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid #F0ECE2; font-size: 13.5px; }
.kh-so-cai li small { grid-column: 1 / -1; color: var(--chu-phu); font-size: 12.5px; }
.kh-so-cai .cong { color: var(--xanh-rung); font-weight: 700; }
.kh-so-cai .tru { color: #9A4A0E; font-weight: 700; }
.kh-hop-vt { grid-column: 1 / -1; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: #FBF7E8; border: 1.5px solid #E7DCAE; font-size: 14px; line-height: 1.5; }
.kh-hop-vt b { color: var(--xanh-dam); }