/* the-zalo.css — thẻ «Vào nhóm Zalo» dùng chung cho mọi trang quà (vẽ bởi the-zalo.js vào <div data-the-zalo>).
   Style Gobi theo bản vẽ zalo-cam-on-1610: Be Vietnam Pro, MỘT nút vàng, không lime.
   Mọi luật nằm dưới `.the-zalo` (gốc dùng `.the-zalo.zalo.card` để thắng `.card` của trang chứa) để không đè / không bị đè CSS trang chứa; token khai riêng, không xài biến của trang.
   Cặp màu đã đo: text #E8EDE5 / #18221B ≈ 14:1 · muted #9FAE9C / #18221B ≈ 7:1 · ink #0F1713 / vàng #E3B04B ≈ 9.4:1 */
.the-zalo.zalo.card{
  --tz-surface:#18221B; --tz-surface-2:#131C16; --tz-text:#E8EDE5; --tz-muted:#9FAE9C;
  --tz-accent:#E3B04B; --tz-ink:#0F1713; --tz-ok:#8FD694; --tz-line:#1F2D24;
  box-sizing:border-box; display:block; min-width:0; max-width:100%; margin:0;
  background:var(--tz-surface); border:1px solid rgb(227 176 75 / 35%); border-radius:20px; padding:20px;
  color:var(--tz-text); font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; font-weight:400; line-height:1.6; text-align:left; letter-spacing:normal; text-transform:none;
  box-shadow:none; transform:none; -webkit-font-smoothing:antialiased;
}
/* Đặt lại hẳn các phần tử con trước khi áp kiểu bản vẽ: trang chứa hay có luật trần (h2{…}, a{…}) hoặc luật lớp (.card h2…)
   kẻ vạch / đổi margin / đổi màu. Tiền tố `.the-zalo.zalo.card` (3 lớp) + luật đặt SAU khối này thắng cả hai loại, không cần !important. */
.the-zalo.zalo.card :is(h2,p,ul,li,a,small,img,span){
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:0;color:inherit;
  font:inherit;text-transform:none;letter-spacing:normal;text-decoration:none;text-shadow:none;list-style:none;
  float:none;position:static;transform:none;filter:none;opacity:1;width:auto;height:auto;max-width:none;
}
.the-zalo.zalo.card :is(h2,p,ul,li)::before,.the-zalo.zalo.card :is(h2,p,ul,li)::after{content:none}
.the-zalo.zalo.card *,.the-zalo.zalo.card *::before,.the-zalo.zalo.card *::after{box-sizing:border-box}
.the-zalo.zalo.card .tag{display:inline-block;margin:0 0 12px;padding:3px 10px;border:0;border-radius:999px;background:var(--tz-surface-2);color:var(--tz-muted);font-size:12px;font-weight:600;line-height:1.6;letter-spacing:normal;text-transform:none}
.the-zalo.zalo.card .zalo-body{display:block}
.the-zalo.zalo.card h2{margin:0 0 8px;padding:0;color:var(--tz-text);font-family:inherit;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:normal;text-transform:none}
.the-zalo.zalo.card p{margin:0;padding:0;color:var(--tz-muted);font-size:15px;font-weight:400;line-height:1.6}
.the-zalo.zalo.card .loi{display:grid;gap:10px;list-style:none;margin:16px 0 20px;padding:0}
.the-zalo.zalo.card .loi li{position:static;display:flex;gap:10px;margin:0;padding:0;color:var(--tz-text);font-size:15px;line-height:1.6}
.the-zalo.zalo.card .loi li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--tz-accent)}
.the-zalo.zalo.card .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin:0;padding:0 28px;border:0;border-radius:999px;background:var(--tz-accent);color:var(--tz-ink);font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:normal;text-decoration:none;text-transform:none;box-shadow:none;transform:none;cursor:pointer}
.the-zalo.zalo.card .btn:hover{background:var(--tz-accent);color:var(--tz-ink);box-shadow:none;transform:none;filter:brightness(1.06)}
.the-zalo.zalo.card .btn:focus-visible{outline:2px solid var(--tz-accent);outline-offset:3px}
.the-zalo.zalo.card .btn svg{flex:none;width:22px;height:22px}
.the-zalo.zalo.card .sub{display:block;margin:10px 0 0;color:var(--tz-muted);font-size:13.5px;line-height:1.6;text-align:center}
.the-zalo.zalo.card .qr-wrap{display:none}
.the-zalo.zalo.card .qr{width:176px;height:176px;padding:12px;border-radius:14px;background:#fff}
.the-zalo.zalo.card .qr img{display:block;width:100%;height:100%;max-width:none;border:0;border-radius:0}
.the-zalo.zalo.card .trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--tz-line);color:var(--tz-muted);font-size:13.5px;line-height:1.6}
.the-zalo.zalo.card .trust span::before{content:"✓ ";color:var(--tz-ok)}

/* Kiểu phụ: trang đã có nút vàng chính của chính nó ⇒ nút Zalo chỉ viền vàng (một màn một nút nền vàng) */
.the-zalo.zalo.card[data-the-zalo-kieu="phu"] .btn{background:transparent;border:1.5px solid var(--tz-accent);color:var(--tz-accent);min-height:52px}
.the-zalo.zalo.card[data-the-zalo-kieu="phu"] .btn:hover{background:rgb(227 176 75 / 12%);color:var(--tz-accent);filter:none}

/* ≥900px: chữ bên trái, QR bên phải (người đọc trên máy tính dùng Zalo ở điện thoại) */
@media (min-width:900px){
  .the-zalo.zalo.card{padding:32px}
  .the-zalo.zalo.card h2{font-size:26px}
  .the-zalo.zalo.card .zalo-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
  .the-zalo.zalo.card .qr-wrap{display:block;text-align:center}
  .the-zalo.zalo.card .qr-wrap small{display:block;max-width:176px;margin:10px 0 0;color:var(--tz-muted);font-size:13px;line-height:1.6}
  .the-zalo.zalo.card .btn{display:inline-flex;width:auto}
  .the-zalo.zalo.card .sub{text-align:left}
}