/* =====================================================================
 * TRANG GIỚI THIỆU SẢN PHẨM — lớp trình bày dùng chung
 * Tạo 18/09/2026
 * ---------------------------------------------------------------------
 * Một tệp cho ba trang, thay cho ba khối <style> riêng nằm trong từng
 * trang (18 + 18 + 119 dòng):
 *
 *   toolintroduce/Introtradingview.php   → .gt-tv
 *   toolintroduce/Introcopytrade.php     → .gt-copy
 *   toolintroduce/Introtrendbot.php      → .gt-vip
 *   toolintroduce/Introtradepanel.php    → .gt-tp    (19/09/2026)
 *   toolintroduce/Introsignaltrader.php  → .gt-st    (19/09/2026)
 *   toolintroduce/Introbroadcaster.php   → .gt-sb    (19/09/2026)
 *
 * (Trang DCA không dùng tệp này: toàn bộ nội dung của nó nằm trong
 *  intro_sections/smartdca.php, vốn đã có bộ khung riêng scope trong
 *  `.sdca`. Chỗ đó chỉ nối lại bộ biến cho khớp màu nhà.)
 *
 * NỘI DUNG KHÔNG ĐỔI. Tệp này bám đúng tên lớp đã có sẵn trong markup.
 *
 * MỘT SẮC CHO MỖI TRANG
 * Ba trang vốn mỗi trang tự đặt màu, và trong một trang lại nhiều màu
 * rời: riêng Introtrendbot có bảy thẻ giá viền bảy màu khác nhau và bốn
 * ô tính năng bốn màu biểu tượng khác nhau. Nay mỗi TRANG mang một sắc —
 * đúng sắc của sản phẩm đó ở trang chủ và bảng giá — khai một lần qua
 * biến `--gt`, mọi chi tiết bên dưới lấy theo.
 * ===================================================================== */

.gt{ --gt: var(--ta-accent); --gt-dam: var(--ta-accent-ink); }
.gt-tv  { --gt:#27479E; --gt-dam:#1D3579; }   /* TradingView Bot */
.gt-copy{ --gt:#5B3A8E; --gt-dam:#472C70; }   /* Copytrade Online */
.gt-vip { --gt:#8A5D03; --gt-dam:#6E4A02; }   /* VipTrend Bot — GOLD */
.gt-tp  { --gt:#4A5664; --gt-dam:#3A4450; }   /* Quang Trade Panel */
.gt-st  { --gt:#8A2F62; --gt-dam:#6E244E; }   /* Copy Signal → MT5 */
.gt-sb  { --gt:#A62222; --gt-dam:#851B1B; }   /* Signal Broadcaster */


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ---------------------------------------------------------------------
 * Cả hai lớp `.setup-hero` và `.viptrend-hero` đều là một thứ: dải mở
 * đầu. Trước đây mỗi trang định nghĩa lại từ đầu, và đều kéo ra khỏi
 * khung bằng `margin: -24px -12px 40px -12px` — ba con số đoán, không
 * khớp với padding thật của khung nên hai mép lệch. Nay dải nằm NGOÀI
 * .container nên tự chạy hết bề ngang.
 * ===================================================================== */
.setup-hero,
.viptrend-hero{
  background: linear-gradient(165deg, #172026 0%, #132A2C 55%, #0F2C2E 100%);
  color: #fff;
  padding-block: clamp(40px, 5.5vw, 68px);
  padding-inline: max(20px, calc(50% - 640px));
  text-align: center;
  position: relative; overflow: hidden;
  margin: 0 0 clamp(30px, 4vw, 46px);
}
.viptrend-hero::before{ display: none; }   /* hoa văn chấm cũ, bỏ */
.setup-hero::after,
.viptrend-hero::after{
  content:""; position:absolute; inset:auto -10% -70% 50%; height:340px;
  background: radial-gradient(closest-side, rgba(15,118,110,.24), transparent);
  pointer-events:none;
}
.setup-hero h1,
.viptrend-hero h1{
  font-size: clamp(25px, 3.4vw, 38px) !important;
  font-weight: 800; letter-spacing: -.035em; line-height: 1.16;
  color: #fff; position: relative; text-shadow: none;
  margin: 0 auto 0; max-width: 22ch;
}
.setup-hero p,
.viptrend-hero p{
  font-size: 16px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.76); opacity: 1;
  max-width: 62ch; margin: 14px auto 0; position: relative;
}
/* Nhãn dưới tiêu đề ở trang VipTrend */
.badge-gold{
  display: inline-block; margin-top: 18px; position: relative;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20);
  color: #fff !important;
  font: 600 12.5px/1 var(--ta-font) !important;
  padding: 9px 18px !important; border-radius: var(--ta-r-pill) !important;
}


/* =====================================================================
 * 2 · TIÊU ĐỀ MỤC
 * ===================================================================== */
.gt .section-title{
  font-size: clamp(21px, 2.5vw, 29px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg);
  padding-left: 14px; border-left: 4px solid var(--gt);
  display: inline-block; margin-bottom: 4px;
}
.gt .section-subtitle{
  font-size: 15.5px; font-weight: 300; color: var(--ta-fg-2); margin-top: 8px;
}
.gt .lead{
  font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var(--ta-fg-2);
}
.gt .lead strong, .gt p strong{ color: var(--ta-fg); font-weight: 600; }
.gt h2, .gt h3, .gt h4, .gt .h4, .gt .h5{ color: var(--ta-fg); }
.gt p{ line-height: 1.7; color: var(--ta-fg-2); }


/* =====================================================================
 * 3 · THẺ
 * ===================================================================== */
.gt .card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line) !important;
  border-radius: var(--ta-r-lg) !important;
  box-shadow: var(--e1) !important;
  overflow: hidden;
}
.gt .card-header{
  background: linear-gradient(150deg, var(--gt), var(--gt-dam)) !important;
  color: #fff !important;
  border: 0 !important;
  font: 600 12px/1 var(--ta-mono) !important;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 14px 18px !important;
}
.gt .card-body{
  padding: 18px 20px !important; color: var(--ta-fg-2) !important;
}
.gt .card-title{ color: var(--ta-fg); font-weight: 650; }
.gt .card-text{ color: var(--ta-fg-2); font-size: 14px; }
/* Bootstrap đặt viền theo `.border-info` / `.border-primary` / `.border-success`
   — ba lớp đó có ở ba trang khác nhau và cho ba màu khác nhau. Dồn về một. */
.gt .border-info, .gt .border-primary, .gt .border-success, .gt .border-warning{
  border-color: var(--ta-line) !important;
}
/* Ô nổi bật: thẻ có `.highlight-card` */
.gt .highlight-card{
  background: var(--ta-surface-2) !important;
  transition: box-shadow .18s, transform .18s;
}
.gt .highlight-card:hover{ box-shadow: var(--e2) !important; transform: translateY(-2px); }

.gt ul li, .gt ol li{ color: var(--ta-fg-2); line-height: 1.7; }
.gt .list-group-item{
  background: transparent !important;
  border-color: var(--ta-line-2) !important;
  color: var(--ta-fg-2) !important;
  padding: 11px 4px !important;
  font-size: 14px;
}
.gt code{ font-size: .9em; }


/* =====================================================================
 * 4 · Ô BIỂU TƯỢNG VÀ SỐ THỨ TỰ
 * ---------------------------------------------------------------------
 * Bốn ô tính năng ở trang VipTrend vốn mỗi ô một màu viết thẳng trong
 * thẻ (xanh lá, vàng, xanh dương, đỏ). Bốn màu đó không nói lên điều gì
 * về bốn tính năng — nay cùng một sắc của trang.
 * ===================================================================== */
.gt .feature-icon{
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 14px;
  background: var(--ta-accent-soft) !important;
  color: var(--gt) !important;
}
.gt .step-number{
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--gt); color: #fff;
  font: 700 15px/1 var(--ta-mono);
}


/* =====================================================================
 * 5 · THẺ GIÁ VIP (trang VipTrend)
 * ---------------------------------------------------------------------
 * Bảy thẻ vốn có bảy màu viền khác nhau, đặt thẳng trong thẻ. Đây là chỗ
 * khách so sánh nên số phải thẳng cột, và bảy thẻ phải cùng một mặt.
 * ===================================================================== */
.gt .pricing-vip-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line) !important;
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.gt .pricing-vip-card:hover{ box-shadow: var(--e2); transform: translateY(-2px); }
.gt .pricing-vip-card.popular{
  border-color: var(--gt) !important;
  box-shadow: 0 0 0 1px var(--gt), var(--e2);
}
.gt .pricing-vip-card .card-header{
  font: 700 13px/1 var(--ta-font) !important;
  letter-spacing: 0; text-transform: none;
  text-align: center;
}
.gt .pricing-vip-card .card-body{ padding: 18px 16px !important; }
.gt .price-tag{
  font: 700 30px/1.1 var(--ta-mono); letter-spacing: -.035em;
  color: var(--ta-fg); font-variant-numeric: tabular-nums;
}
.gt .price-period{ font-size: 12.5px; color: var(--ta-fg-3); margin-top: 3px; }
.gt .pricing-vip-card hr{
  border-color: var(--ta-line-2); opacity: 1; margin: 14px 0;
}
/* Sáu dòng số: nhãn trái, số phải, thẳng cột */
.gt .pricing-vip-card .d-flex{ padding: 3px 0; align-items: baseline; }
.gt .pricing-vip-card .text-muted{ color: var(--ta-fg-3) !important; }
.gt .pricing-vip-card strong{
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  color: var(--ta-fg); white-space: nowrap; font-weight: 600;
}
.gt .pricing-vip-card .text-success{ color: var(--ta-ok) !important; }


/* =====================================================================
 * 6 · NÚT, NHÃN, KHUNG VIDEO
 * ===================================================================== */
.gt .btn{
  border-radius: var(--ta-r-sm) !important;
  font-weight: 600; border: 1px solid transparent;
}
.gt .btn-warning, .gt .btn-primary{
  background: var(--gt) !important; color: #fff !important; border-color: transparent !important;
}
.gt .btn-warning:hover, .gt .btn-primary:hover{ background: var(--gt-dam) !important; }
.gt .btn-danger{
  background: var(--ta-err) !important; color: #fff !important; border-color: transparent !important;
}
.gt .btn-lg{ padding: 13px 26px !important; font-size: 15px !important; }

.gt .badge{
  border-radius: var(--ta-r-pill) !important;
  font: 600 10.5px/1 var(--ta-mono) !important; letter-spacing: .06em;
  padding: 5px 10px !important;
}
.gt .badge.bg-danger{ background: var(--ta-err-soft) !important; color: var(--ta-err) !important; }
.gt .badge.bg-light { background: var(--ta-sunken) !important; color: var(--ta-fg-2) !important; }

/* Khung video: bo góc cho khớp với thẻ, và một viền mảnh để nó không
   trôi lơ lửng giữa nền. */
.gt .ratio{
  border-radius: var(--ta-r-lg); overflow: hidden;
  border: 1px solid var(--ta-line); box-shadow: var(--e1);
  /* Be rong nay truoc do dat thang trong the: `style="max-width:700px;
     margin:0 auto"`. Luc go cac thuoc tinh style= dat mau, toi go nham
     ca no (chuoi co chu "margin") nen video phong to het khung. Dat lai
     o day moi dung cho. */
  max-width: 760px; margin-inline: auto;
}

.gt .alert{
  border-radius: var(--ta-r) !important;
  border: 1px solid var(--ta-line) !important;
  font-size: 14px;
}
.gt .alert-warning{
  background: var(--ta-warn-soft) !important; color: var(--ta-warn) !important;
  border-color: #EBD9A8 !important;
}
.gt .alert-heading{ color: inherit !important; font-size: 15px; font-weight: 650; }

.gt .text-muted{ color: var(--ta-fg-3) !important; }
.gt .text-success{ color: var(--ta-ok) !important; }
.gt .text-warning{ color: var(--ta-warn) !important; }
.gt .text-danger { color: var(--ta-err) !important; }


/* =====================================================================
 * 7 · KHỐI TẢI VỀ
 * ---------------------------------------------------------------------
 * Một dải ngang: ảnh — thông số — nút. Nội dung do
 * intro_sections/tai_ve.php dựng, đọc thẳng từ bảng `product`.
 *
 * ẢNH HAI KIỂU KHÁC HẲN NHAU: Trade Panel là ảnh chụp panel 1116×821,
 * hai cái còn lại là logo vuông 256×256. Nên chề theo CHIỀU CAO chứ
 * không theo chiều ngang — chề ngang thì logo vuông bị kéo cao lấn hết
 * dải, còn ảnh chụp thì bị bóp lại bé tí. `width: auto` để cả hai giữ
 * đúng tỉ lệ.
 * ===================================================================== */
.gt-tai{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px 26px;
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
  box-shadow: var(--e1);
  padding: 20px 24px;
}
.gt-tai__anh{
  flex: none;
  max-height: 104px; width: auto; max-width: 190px;
  border-radius: var(--ta-r-sm);
}
.gt-tai__chu{ flex: 1 1 200px; min-width: 0; }
.gt-tai__tieude{
  font-size: 19px; font-weight: 700; color: var(--ta-fg);
  margin: 0 0 10px;
}
/* Thông số: nhãn nhỏ xám đứng trên, giá trị đậm đứng dưới, ba cụm
   nằm ngang. Dùng `dl` vì đúng là cặp nhãn — giá trị, không phải một
   danh sách thường. */
.gt-tai__meta{
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin: 0;
}
.gt-tai__meta dt{
  font: 600 10.5px/1 var(--ta-mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ta-fg-3);
  margin-bottom: 3px;
}
.gt-tai__meta dd{
  margin: 0;
  font-size: 14.5px; font-weight: 600; color: var(--ta-fg);
  font-variant-numeric: tabular-nums;
}
.gt-tai__nut{
  flex: none; display: flex; flex-direction: column;
  align-items: stretch; gap: 7px; max-width: 260px;
}
/* Mang `.btn` trên markup là có chủ ý: trangcong.css có một luật màu
   liên kết `a:not(.btn):not(...)` với `!important` và sáu lớp độ đặc
   hiệu — không có `.btn` thì chữ nút thành xanh liên kết trên nền
   màu, 1,2:1. */
.gt-tai__btn{
  background: var(--gt) !important;
  color: #fff !important;
  border: 1px solid transparent;
  font-size: 14px; font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--ta-r-sm);
  white-space: nowrap;
}
.gt-tai__btn:hover{ background: var(--gt-dam) !important; color: #fff !important; }
.gt-tai__ghichu{
  font-size: 12px; line-height: 1.5; color: var(--ta-fg-3);
  text-align: center;
}


/* =====================================================================
 * 8 · MÀN HÌNH HẸP
 * ===================================================================== */
@media (max-width: 767.98px){
  .gt .price-tag{ font-size: 26px; }
  .gt .feature-icon{ width: 48px; height: 48px; font-size: 23px; }

  /* Dải tải về xuống một cột, canh giữa. Nút chạy hết bề ngang vì đó
     là việc duy nhất của dải này trên điện thoại. */
  .gt-tai{ flex-direction: column; text-align: center; padding: 20px 18px; }
  .gt-tai__meta{ justify-content: center; }
  .gt-tai__nut{ max-width: none; width: 100%; }
}