/* gioi-thieu.css — trang bán hàng "Dữ liệu xuất nhập khẩu". Token màu + .wrap
   nạp từ tier-a.css (link TRƯỚC file này); .hstat/.hstat-n/.hstat-l tái dùng
   từ tier-a.css. .legal-note (khối miễn trừ trách nhiệm) cũng tái dùng từ
   tier-a.css, không định nghĩa lại ở đây.

   Cấu trúc bám công thức longlivestock/web/index.html:411-624 (đọc trước khi
   sửa file này) — namespace mọi class riêng bằng tiền tố gt- để không đụng
   .hero/.mcard/.plan v.v. có thể xuất hiện ở trang khác trong site:
   hero -> giá trị 3 card -> cách hoạt động 4 bước -> bằng chứng 3 số ->
   funnel 3 cột -> bảng giá -> FAQ -> disclaimer (.legal-note) -> footer. */

.gt-hero { padding: 68px 0 40px; text-align: center; }
.gt-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.gt-hero .eyebrow::before { content: "● "; }
.gt-hero h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 14px auto 14px;
  max-width: 22ch;
}
.gt-hero h1 .g { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-hero .lead { font-size: 16px; color: var(--text-2); max-width: 62ch; margin: 0 auto; line-height: 1.65; }
.gt-cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.gt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: 0.16s; border: 1px solid transparent; }
.gt-btn-primary { background: var(--grad-accent); color: #04231f; }
.gt-btn-primary:hover { filter: brightness(1.08); }
.gt-btn-outline { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.gt-btn-outline:hover { border-color: var(--accent-2); color: var(--accent); }
.gt-hero .micro { font-size: 12px; color: var(--text-3); margin-top: 16px; }
/* 4 stat thật trong hero — reuse .hstat/.hstat-n/.hstat-l (tier-a.css), grid riêng canh giữa */
.gt-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px auto 0; max-width: 780px; text-align: left; }

/* ===== Giá trị 3 card — mirror index.html:436-445 .moat/.mcard/.tagp ===== */
.gt-value-sec { padding: 38px 0; }
.gt-value-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.gt-value-sec .sub { color: var(--text-2); font-size: 14px; max-width: 70ch; margin-top: 6px; }
.gt-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.gt-vcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 22px; position: relative; }
.gt-vcard .ix { font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.gt-vcard h3 { font-size: 17px; font-weight: 700; margin: 10px 0 8px; }
.gt-vcard p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.gt-vcard .tagp { display: inline-block; margin-top: 12px; font-size: 10.5px; font-weight: 700; color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 999px; padding: 2px 9px; }
.gt-vcard .tagp.free { color: var(--up); border-color: var(--up); }
.gt-vcard .tagp + .tagp { margin-left: 6px; }

/* ===== Cách hoạt động 4 bước — mirror index.html:447-458 .steps/.step ===== */
.gt-how-sec { padding: 44px 0; }
.gt-how-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.gt-how-sec .sub { color: var(--text-2); font-size: 14px; max-width: 70ch; margin-top: 6px; }
.gt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.gt-step { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; position: relative; }
.gt-step .no { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.gt-step h3 { font-size: 14.5px; font-weight: 700; margin: 11px 0 5px; }
.gt-step p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.gt-step .arr { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 18px; z-index: 2; }
.gt-edge { margin-top: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border: 1px solid var(--accent-2); border-radius: 14px; padding: 16px 20px; font-size: 14.5px; color: var(--text); }
.gt-edge b { color: var(--accent); }

/* ===== Bằng chứng 3 số — mirror index.html:460-469 .moat/.mcard (lead số lớn) ===== */
.gt-proof-sec { padding: 38px 0; }
.gt-proof-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.gt-proof-sec .sub { color: var(--text-2); font-size: 14px; max-width: 70ch; margin-top: 6px; }
.gt-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.gt-proof-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.gt-proof-card .ix { font-size: 12.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.gt-proof-card .num { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--accent); margin: 8px 0 4px; }
.gt-proof-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.gt-proof-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

/* ===== Funnel 3 cột out/free/paid — mirror index.html:494-512 .funnel/.fc ===== */
.gt-funnel-sec { padding: 44px 0; }
.gt-funnel-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.gt-funnel-sec .sub { color: var(--text-2); font-size: 14px; max-width: 70ch; margin-top: 6px; }
.gt-funnel-note { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 6px; }
.gt-funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.gt-fc { border-radius: 16px; padding: 20px; border: 1px solid var(--border-soft); background: var(--surface); }
.gt-fc.out { border-color: var(--border); }
.gt-fc.free { border-color: var(--accent-2); }
.gt-fc.paid { border-color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.gt-fc .ft { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.gt-fc.out .ft { color: var(--text-3); }
.gt-fc.free .ft { color: var(--accent); }
.gt-fc.paid .ft { color: var(--gold); }
.gt-fc .fp { font-size: 13px; color: var(--text-3); margin: 4px 0 12px; }
.gt-fc ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.gt-fc li { font-size: 13.5px; color: var(--text-2); display: flex; gap: 8px; }
.gt-fc li .c { flex: none; font-weight: 800; }
.gt-fc li.yes .c { color: var(--up); }
.gt-fc li.no .c { color: var(--text-3); }
.gt-fc li.pre .c { color: var(--gold); }

/* ===== #pricing — mirror index.html:153-192 (inline style gốc) + :514-571 markup ===== */
.gt-pricing-sec { padding: 44px 0; }
.gt-pricing-stage { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--border-soft); background: radial-gradient(680px 360px at 50% -12%, rgba(52, 211, 194, 0.12), transparent 60%), var(--surface); padding: 48px 28px 54px; box-shadow: var(--shadow); text-align: center; }
.gt-pricing-stage h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.6px; margin: 8px 0 6px; }
.gt-pricing-stage .sub { color: var(--text-2); font-size: 14px; max-width: 60ch; margin: 0 auto; }
.gt-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px auto 0; max-width: 920px; align-items: stretch; }
.gt-plan { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 20px; padding: 26px 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s; }
.gt-plan:hover { transform: translateY(-5px); border-color: rgba(52, 211, 194, 0.34); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42); }
.gt-plan.best { border-color: rgba(52, 211, 194, 0.42); background: linear-gradient(160deg, rgba(52, 211, 194, 0.15), rgba(255, 255, 255, 0.03)); box-shadow: 0 0 0 1px rgba(52, 211, 194, 0.22), var(--glow); transform: scale(1.045); }
.gt-plan.best:hover { transform: scale(1.045) translateY(-5px); }
.gt-plan .tag-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-accent); color: #04231f; font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 999px; letter-spacing: 0.03em; white-space: nowrap; box-shadow: var(--glow); }
.gt-plan .nm { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; color: var(--text); line-height: 1.08; }
.gt-plan .desc { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.gt-plan .price { display: flex; align-items: baseline; gap: 7px; margin: 20px 0 2px; }
.gt-plan .pr {
  font-size: 38px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.gt-plan .permo { font-size: 13px; color: var(--text-3); font-weight: 600; }
.gt-plan .save { font-size: 12px; color: var(--up); font-weight: 700; min-height: 16px; margin-top: 5px; }
.gt-plan .pdiv { height: 1px; width: 100%; margin: 18px 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent); }
.gt-plan .feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; }
.gt-plan .feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.gt-plan .feats svg { flex: none; width: 16px; height: 16px; color: var(--accent); margin-top: 1px; }
.gt-plan .gt-btn { margin-top: auto; width: 100%; justify-content: center; padding: 12px; border-radius: 13px; font-size: 14px; }
.gt-plan .gt-btn.ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text); }
.gt-plan .gt-btn.ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(52, 211, 194, 0.42); color: var(--text); }
.gt-plan .gt-btn.gold { background: linear-gradient(135deg, #f5b942, #caa137); color: #241803; border: none; box-shadow: var(--glow-gold); }
.gt-price-note { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* ===== FAQ — mirror index.html:195-202 + :573-584 ===== */
.gt-faq-sec { padding: 44px 0; }
.gt-faq-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }
.gt-faq { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.gt-faq details { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); padding: 0 16px; }
.gt-faq summary { cursor: pointer; list-style: none; padding: 16px 2px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.gt-faq summary::-webkit-details-marker { display: none; }
.gt-faq summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 20px; flex: none; transition: 0.2s; }
.gt-faq details[open] summary { color: var(--accent); }
.gt-faq details[open] summary::after { content: "\2013"; }
.gt-faq .ans { padding: 0 2px 18px; color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 80ch; }

/* ===== Footer — dòng pháp lý thêm cạnh footer.sitefoot có sẵn ===== */
.gt-foot-mst { font-size: 11px; color: var(--text-3); margin-top: 8px; }

@media (max-width: 860px) {
  .gt-hero h1 { font-size: 30px; }
  .gt-hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
  .gt-vgrid, .gt-steps, .gt-proof-grid, .gt-funnel, .gt-pricing { grid-template-columns: 1fr; }
  .gt-step .arr { display: none; }
  .gt-plan.best { transform: none; }
  .gt-plan.best:hover { transform: translateY(-5px); }
}

/* ===== Pricing glassy (port longlivestock/web/index.html:153-192) ===== */
.pricing-stage{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border-soft);
  background:radial-gradient(680px 360px at 50% -12%,rgba(52,211,194,.12),transparent 60%),var(--surface);
  padding:48px 28px 54px;box-shadow:var(--shadow)}
.pricing-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:.32;pointer-events:none}
.pricing-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(820px 420px at 50% 118%,transparent,rgba(7,16,30,.62))}
.pricing-inner{position:relative;z-index:2;text-align:center}
.pricing-inner .eyebrow{display:block}
.pricing-inner h2{font-size:30px;font-weight:800;letter-spacing:-.7px;margin:8px 0 6px}
.pricing-inner .sub{color:var(--text-2);font-size:15px;max-width:60ch;margin:0 auto}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px auto 0;max-width:920px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:20px;padding:26px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.26);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.plan:hover{transform:translateY(-5px);border-color:rgba(52,211,194,.34);box-shadow:0 20px 48px rgba(0,0,0,.42)}
.plan.best{border-color:rgba(52,211,194,.42);
  background:linear-gradient(160deg,rgba(52,211,194,.15),rgba(255,255,255,.03));
  box-shadow:0 0 0 1px rgba(52,211,194,.22),var(--glow);transform:scale(1.045)}
.plan.best:hover{transform:scale(1.045) translateY(-5px)}
.plan .tag-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-accent);
  color:#04231f;font-size:11px;font-weight:800;padding:4px 14px;border-radius:999px;letter-spacing:.03em;white-space:nowrap;box-shadow:var(--glow)}
.plan .nm{font-size:34px;font-weight:300;letter-spacing:-.02em;color:var(--text);line-height:1.08}
.plan .desc{font-size:13px;color:var(--text-3);margin-top:4px}
.plan .price{display:flex;align-items:baseline;gap:7px;margin:20px 0 2px}
.plan .pr{font-size:42px;font-weight:300;letter-spacing:-.02em;color:var(--text);line-height:1}
.plan .permo{font-size:13px;color:var(--text-3);font-weight:600}
.plan .save{font-size:12px;color:var(--up);font-weight:700;min-height:16px;margin-top:5px}
.plan .pdiv{height:1px;width:100%;margin:18px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent)}
.plan .feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0 0 22px;padding:0}
.plan .feats li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-2);line-height:1.45}
.plan .feats svg{flex:none;width:16px;height:16px;color:var(--accent);margin-top:1px}
.plan .btn{margin-top:auto;width:100%;justify-content:center;padding:12px;border-radius:13px;font-size:14px}
.plan .btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--text);box-shadow:none}
.plan .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(52,211,194,.42);color:var(--text)}
.btn.gold{background:linear-gradient(135deg,#f5b942,#caa137);color:#241803;border:none;box-shadow:var(--glow-gold)}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
.btn.gold .rip{background:rgba(36,24,3,.28)}
@keyframes rip{to{transform:scale(1);opacity:0}}
@media(max-width:860px){.pricing-stage{padding:36px 14px 42px}.plan.best{transform:none}.plan.best:hover{transform:translateY(-5px)}.pricing{max-width:420px}}