/* =====================================================================
 * BẢNG GIÁ — lớp trình bày
 * Tạo 18/09/2026, thay cho khối <style> nằm trong pages/site/pricing.php
 * ---------------------------------------------------------------------
 * NỘI DUNG TRANG KHÔNG ĐỔI. File này bám đúng những tên lớp đã có sẵn
 * trong pricing.php, nên không phải viết lại markup.
 *
 * VÌ SAO TRANG NÀY CẦN LÀM KỸ HƠN TRANG KHÁC
 * Đây là chỗ khách SO SÁNH. Bảy thẻ VIP đứng cạnh nhau, mỗi thẻ sáu con
 * số — winrate, profit factor, số lệnh, vốn. Muốn so được thì:
 *
 *   1. Số phải THẲNG CỘT. Dùng tabular-nums và font mono, nếu không thì
 *      "41.67%" với "8.00%" lệch nhau, mắt phải đọc lại từng dòng.
 *   2. Bảy thẻ phải CÙNG MỘT MẶT. Đo được trang cũ dùng 14 mã màu khác
 *      nhau cho bảy thẻ (tím, cam, xanh lá, mận…), mỗi thẻ một màu tên
 *      và một màu giá. Màu đó không mang nghĩa gì — nó chỉ làm mắt phải
 *      học lại bảng màu ở từng thẻ, đúng lúc đang cần so sánh.
 *   3. Thẻ được đề cử chỉ dùng MỘT sắc. Trang cũ có ba thẻ viền dày, mỗi
 *      thẻ một màu khác nhau; ba màu cùng đòi chú ý thì không màu nào
 *      nổi lên. Vẫn giữ nguyên ba thẻ được đánh dấu — đó là nội dung,
 *      không phải trình bày — chỉ cho chúng chung một sắc nhấn.
 *
 * Màu sắc nay dồn về phần ĐẦU MỤC: mỗi dòng sản phẩm một sắc, đúng bốn
 * sắc đã dùng ở trang chủ, để khách đi từ trang chủ sang nhận ra ngay.
 * ===================================================================== */

:root{
  --sp1:#0F766E; --sp1b:#0B5D57;   /* DCA Bot */
  --sp2:#8A5D03; --sp2b:#6E4A02;   /* VipTrend Bot */
  --sp3:#27479E; --sp3b:#1D3579;   /* TradingView Bot */
  --sp4:#5B3A8E; --sp4b:#472C70;   /* Copytrade Online */
  /* Ba cong cu bo sung 19/09/2026 - cung ba sac dung o trang chu, de
     khach di tu the san pham sang tab bao gia thi nhan ra ngay. */
  --sp5:#4A5664; --sp5b:#3A4450;   /* Quang Trade Panel */
  --sp6:#8A2F62; --sp6b:#6E244E;   /* Copy Signal -> MT5 */
  --sp7:#A62222; --sp7b:#851B1B;   /* Signal Broadcaster */
}


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ===================================================================== */
.pricing-hero{
  background: linear-gradient(165deg, #172026 0%, #132A2C 55%, #0F2C2E 100%);
  color: #fff;
  padding-block: clamp(40px, 5.5vw, 66px);
  /* Nằm NGOÀI .container (sửa markup 18/09/2026) nên tự chạy hết bề
     ngang. Trước đây nó ở trong khung và phải kéo ra bằng lề âm
     `margin: -24px -12px 40px -12px` — con số đoán, không khớp với padding
     thật của khung nên hai mép lệch nhau. */
  padding-inline: max(20px, calc(50% - 640px));
  text-align: center;
  position: relative; overflow: hidden;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.pricing-hero::before{ display: none; }   /* hoa văn chấm cũ, bỏ */
.pricing-hero::after{
  content:""; position:absolute; inset:auto -10% -70% 50%; height:340px;
  background: radial-gradient(closest-side, rgba(15,118,110,.26), transparent);
  pointer-events:none;
}
.pricing-hero h1{
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 800;
  letter-spacing: -.035em; color: #fff;
  position: relative; text-shadow: none;
  margin: 0 auto; max-width: 20ch;
}
.pricing-hero p{
  font-size: 16px; font-weight: 300; color: rgba(255,255,255,.76);
  opacity: 1; max-width: 60ch; margin: 14px auto 0; position: relative;
}


/* =====================================================================
 * 2 · HÀNG THẺ CHỌN SẢN PHẨM
 * ===================================================================== */
.tab-nav-pricing{ gap: 8px; }
.tab-nav-pricing .nav-link{
  background: var(--ta-surface-2) !important;
  border: 1px solid var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
  font-size: 14px; font-weight: 600;
  padding: 10px 18px !important;
  border-radius: var(--ta-r-pill) !important;
}
.tab-nav-pricing .nav-link:hover{
  background: var(--ta-sunken) !important; color: var(--ta-fg) !important;
}
.tab-nav-pricing .nav-link.active{
  background: var(--ta-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(15,118,110,.30);
}


/* Bootstrap dùng hiệu ứng mờ dần khi chuyển tab (`.fade`). Quan sát trên
   máy chủ thật: ô vừa mở đứng lại ở trạng thái mờ, đo được opacity 0
   trong khi thẻ đã mang lớp `.show`. Có từ trước, không phải do lần sửa
   này — bản cũ không có quy tắc nào chạm tới `.fade`.
   Bảng giá là chỗ khách đọc số, không được phép mờ. Ô đang mở thì hiện
   rõ, dù hiệu ứng có chạy xong hay không. */
.tab-content > .tab-pane.active{ opacity: 1 !important; }


/* =====================================================================
 * 3 · ĐẦU MỤC TỪNG SẢN PHẨM
 * ---------------------------------------------------------------------
 * Màu dồn về đây: một vạch màu bên trái, đúng sắc của sản phẩm đó ở
 * trang chủ. Đủ để phân biệt bốn mục mà không phải nhuộm cả trăm chi
 * tiết bên dưới.
 * ===================================================================== */
.product-section-title{
  font-size: clamp(21px, 2.5vw, 29px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg) !important;
  padding-left: 14px; border-left: 4px solid var(--ta-accent);
  text-align: left; display: inline-block;
}
.product-section-subtitle{
  font-size: 15.5px; font-weight: 300; color: var(--ta-fg-2);
  margin-top: 11px;
}
#viptrend   .product-section-title{ border-left-color: var(--sp2); }
#dca        .product-section-title{ border-left-color: var(--sp1); }
#tvbot      .product-section-title{ border-left-color: var(--sp3); }
#copytrade  .product-section-title{ border-left-color: var(--sp4); }
#tradepanel .product-section-title{ border-left-color: var(--sp5); }
#signaltrader .product-section-title{ border-left-color: var(--sp6); }
#signalbroadcaster .product-section-title{ border-left-color: var(--sp7); }

.section-divider{
  border: 0; height: 1px; background: var(--ta-line);
  margin-block: clamp(34px, 4.5vw, 52px);
}


/* =====================================================================
 * 4 · THẺ GIÁ VIP
 * ===================================================================== */
.vip-price-card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 20px 18px;
  text-align: center;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.vip-price-card:hover{ box-shadow: var(--e2); transform: translateY(-2px); }

/* Thẻ được đề cử. Trang cũ có BA thẻ viền dày ba màu khác nhau; ba thứ
   cùng nổi thì không thứ nào nổi. Nay chỉ một sắc, và là màu nhấn. */
.vip-price-card.noi-bat{
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 1px var(--ta-accent), var(--e2);
}

.vip-name{
  font-size: 15px !important; font-weight: 700;
  color: var(--ta-fg) !important; letter-spacing: -.01em;
}
.vip-price{
  font: 700 27px/1.1 var(--ta-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  color: var(--ta-fg) !important;
  margin-top: 8px;
}
.vip-period{
  font-size: 12.5px; color: var(--ta-fg-3); margin-top: 2px;
}

/* Nhãn khung giờ / bậc: một hình dạng chung thay cho mỗi thẻ một màu nền */
.vip-price-card .badge{
  background: var(--ta-accent-soft) !important;
  color: var(--ta-accent-ink) !important;
  font: 600 10.5px/1 var(--ta-mono) !important;
  letter-spacing: .05em;
  padding: 5px 10px !important;
  border-radius: var(--ta-r-pill) !important;
}
/* Nhãn góc (Hot / P&L cao nhất / Mới): màu chú ý, vì chúng nói điều khác */
.vip-price-card .badge.position-absolute{
  background: var(--ta-warn-soft) !important;
  color: var(--ta-warn) !important;
  font-size: 9.5px !important;
  padding: 4px 8px !important;
}

/* --- sáu dòng số: nhãn trái, số phải, THẲNG CỘT --- */
.vip-stats{
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--ta-line-2);
  text-align: left;
  flex: 1;
}
.vip-stats > div{
  padding: 4px 0;
  font-size: 12.5px;
  align-items: baseline;
}
.vip-stats .text-muted{
  color: var(--ta-fg-3) !important; font-weight: 400;
}
.vip-stats strong{
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600; color: var(--ta-fg);
  white-space: nowrap;
}
.vip-stats .text-success{ color: var(--ta-ok) !important; }

/* Bang nho so sanh 6A / 6B nam trong mot the VIP: cung luat nhu sau dong
   so o tren - nhan trai, so phai, thang cot. */
.vip-price-card table{
  margin-top: 14px; font-size: 12.5px; border-collapse: collapse;
}
.vip-price-card table th{
  font: 600 10.5px/1 var(--ta-mono); letter-spacing: .06em;
  color: var(--ta-fg-3); text-align: center;
  padding: 6px 4px; border-bottom: 1px solid var(--ta-line-2);
}
.vip-price-card table td{
  padding: 5px 4px; border-bottom: 1px solid var(--ta-line-2);
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ta-fg); white-space: nowrap;
}
.vip-price-card table td.text-muted{
  font-family: var(--ta-font); color: var(--ta-fg-3) !important;
  text-align: left; font-variant-numeric: normal;
}
.vip-price-card table tr:last-child td{ border-bottom: 0; }
.vip-price-card table .text-success{ color: var(--ta-ok) !important; }

.vip-price-card .btn{
  background: var(--ta-accent) !important;
  border: 0 !important; color: #fff !important;
  font-size: 13px !important; font-weight: 600;
  padding: 10px 14px !important;
  border-radius: var(--ta-r-sm) !important;
  margin-top: 14px !important;
}
.vip-price-card .btn:hover{ background: var(--ta-accent-ink) !important; }


/* =====================================================================
 * 5 · THẺ GIÁ CỦA BA SẢN PHẨM CÒN LẠI
 * ===================================================================== */
.price-card{
  background: var(--ta-surface) !important;
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  overflow: hidden;
  box-shadow: var(--e1);
  color: var(--ta-fg) !important;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.price-card:hover{ box-shadow: var(--e2); transform: translateY(-2px); }
.price-card.popular{
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 1px var(--ta-accent), var(--e2);
}
/* Nhãn “Phổ biến”: markup có sẵn `<span class="badge-popular">` nhưng
   không trình nào đặt kiểu cho nó, nên nó nằm thành một dòng chữ trắng
   đẩy đầu thẻ tụt xuống. Đặt nó lên góc thẻ. */
.price-card{ position: relative; }
.badge-popular{
  /* Nam TRONG the, khong tho ra ngoai: .price-card co overflow:hidden de
     bo goc dau the, nen cai gi tho ra deu bi cat. */
  position: absolute; top: 9px; right: 11px; z-index: 2;
  background: #FFFFFF; color: var(--ta-fg);
  font: 700 9.5px/1 var(--ta-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--ta-r-pill);
  box-shadow: 0 2px 8px rgba(23,32,38,.22);
}

.price-card .card-header{
  font: 600 12px/1 var(--ta-mono) !important;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 14px 18px !important;
  border: 0 !important;
  color: #fff !important;
}
/* Đầu thẻ mang sắc của dòng sản phẩm, giống hệt trang chủ */
#dca       .price-card .card-header{ background: linear-gradient(150deg, var(--sp1), var(--sp1b)) !important; }
#tvbot     .price-card .card-header{ background: linear-gradient(150deg, var(--sp3), var(--sp3b)) !important; }
#copytrade .price-card .card-header{ background: linear-gradient(150deg, var(--sp4), var(--sp4b)) !important; }
#viptrend  .price-card .card-header{ background: linear-gradient(150deg, var(--sp2), var(--sp2b)) !important; }
#tradepanel .price-card .card-header{ background: linear-gradient(150deg, var(--sp5), var(--sp5b)) !important; }
#signaltrader .price-card .card-header{ background: linear-gradient(150deg, var(--sp6), var(--sp6b)) !important; }
#signalbroadcaster .price-card .card-header{ background: linear-gradient(150deg, var(--sp7), var(--sp7b)) !important; }

/* Nút "Xem chi tiết tính năng" dưới ba khung giá mới.
   Không dùng `.btn-outline-secondary` của Bootstrap: chữ #6c757d nằm
   thẳng trên nền trang chỉ được 3,98:1. */
.bg-xemthem{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  color: var(--ta-fg-2) !important;
  font-weight: 600;
}
.bg-xemthem:hover{
  background: var(--ta-sunken);
  color: var(--ta-fg) !important;
}

.price-card .card-body{
  padding: 20px 18px !important;
  color: var(--ta-fg-2) !important;
  flex: 1; display: flex; flex-direction: column;
}
.price-card .card-body h4,
.price-card .card-body h5{
  font-size: 17px; font-weight: 650; color: var(--ta-fg);
}
/* Con số giá trong thân thẻ */
.price-card .card-body .fw-bold{ color: var(--ta-fg); }
.price-card .card-body .d-flex{ font-size: 13.5px; padding: 4px 0; }
.price-card .card-body .d-flex .text-muted{ color: var(--ta-fg-3) !important; }
.price-card .card-body .d-flex strong{
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  color: var(--ta-fg); white-space: nowrap;
}
/* Nhãn trong thẻ giá. `.bg-info` của Bootstrap là #0DCAF0 — đọc được
   (lớp vá tương phản đã đổi chữ sang màu đậm) nhưng nổi hẳn lên giữa
   một trang toàn số. Dùng cặp màu mềm của bộ biến: nền nhạt, chữ đậm. */
.price-card .badge{
  font-weight: 600; border-radius: var(--ta-r-pill) !important;
  padding: 4px 10px !important;
}
.price-card .badge.bg-info{
  background: var(--ta-info-soft) !important; color: var(--ta-info) !important;
}
.price-card .badge.bg-success{
  background: var(--ta-ok-soft) !important; color: var(--ta-ok) !important;
}

.price-card .btn{
  border-radius: var(--ta-r-sm) !important;
  font-size: 13.5px !important; font-weight: 600;
  padding: 10px 14px !important;
  background: var(--ta-accent) !important; color: #fff !important;
  border: 0 !important; margin-top: auto;
}
.price-card .btn:hover{ background: var(--ta-accent-ink) !important; }
.price-card .btn.btn-outline-primary,
.price-card .btn.btn-outline-secondary{
  background: var(--ta-surface-2) !important;
  border: 1px solid var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
}


/* =====================================================================
 * 6 · KHỐI GHI CHÚ
 * ===================================================================== */
.note-card{
  background: var(--ta-accent-soft) !important;
  border: 1px solid #C9E4E0 !important;
  border-radius: var(--ta-r-lg) !important;
  box-shadow: none !important;
}
.note-card .card-body{ padding: 22px 24px !important; }
.note-card h5{
  font-size: 16px; font-weight: 650;
  color: var(--ta-accent-ink) !important;
}
.note-card p, .note-card li, .note-card div{
  font-size: 13.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.note-card strong{ color: var(--ta-fg); }
.note-card .text-muted{ color: var(--ta-fg-3) !important; }
.note-card .text-success{ color: var(--ta-ok) !important; }


/* =====================================================================
 * 7 · MÀN HÌNH HẸP
 * ===================================================================== */
@media (max-width: 991.98px){
  .vip-price{ font-size: 24px !important; }
  .vip-stats > div{ font-size: 12px; }
}
@media (max-width: 575.98px){
  .tab-nav-pricing .nav-link{ font-size: 13px; padding: 8px 13px !important; }
  .vip-price-card{ padding: 18px 15px; }
}

/* =====================================================================
 * QUY ĐỔI CREDIT
 * ---------------------------------------------------------------------
 * Đặt một lần dưới dải mở đầu, không đặt cạnh từng giá: cả bốn sản phẩm
 * đều niêm bằng credit, ghi bốn lần thì thành tiếng ồn, mà người đọc chỉ
 * cần biết một lần là quy được hết.
 * ===================================================================== */
.bg-quydoi{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px;
  background: var(--ta-accent-soft);
  border: 1px solid #C9E4E0;
  border-radius: var(--ta-r);
  padding: 14px 20px;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.bg-quydoi__so{
  flex: none;
  background: var(--ta-accent); color: #FFFFFF;
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  padding: 6px 13px; border-radius: var(--ta-r-pill);
}
.bg-quydoi__chu{
  font-size: 14.5px; line-height: 1.6; color: var(--ta-accent-ink);
}
@media (max-width: 575.98px){
  .bg-quydoi{ flex-direction: column; align-items: flex-start; }
}