/* =====================================================================
 * TRANG CHỦ — lớp trình bày
 * Tạo 17/09/2026, thay cho khối <style> 320 dòng nằm trong index.php
 * ---------------------------------------------------------------------
 * NỘI DUNG TRANG KHÔNG ĐỔI. File này chỉ đổi cách trình bày, và bám đúng
 * những tên lớp đã có sẵn trong index.php — không phải viết lại markup,
 * nên không có chữ nào hay đường dẫn nào có thể mất.
 *
 * Nạp SAU trangcong.css, và dùng bộ biến của ta-tokens.css.
 *
 * BỐN SẮC SẢN PHẨM
 * Đầu thẻ vẫn có nền màu — bỏ màu đi thì trang đơn điệu. Nhưng bốn sắc
 * nay có luật: mỗi sắc gắn với thứ sản phẩm làm việc cùng, và cả bốn
 * CÙNG MỘT ĐỘ ĐẬM nên chữ trắng trên sắc nào cũng đạt ≥ 4,5:1.
 *
 *   Smart DCA EA   xanh ngọc   màu nhà
 *   VipTrend Bot   vàng đồng   nó đánh XAU/USD
 *   TradingView    xanh dương  màu của chính TradingView
 *   Copytrade      tím         nối nhiều tài khoản với nhau
 *
 * Trước đây bốn thẻ dùng bốn màu chuyển sắc không liên quan gì nhau
 * (navy, xanh lá, xanh tím, xanh lá), và giá thì mỗi thẻ một màu chữ —
 * mắt phải học lại bảng màu ở từng thẻ.
 * ===================================================================== */

:root{
  --sp1:#0F766E; --sp1b:#0B5D57;   /* Smart DCA EA */
  --sp2:#8A5D03; --sp2b:#6E4A02;   /* VipTrend Bot — GOLD */
  --sp3:#27479E; --sp3b:#1D3579;   /* TradingView Bot */
  --sp4:#5B3A8E; --sp4b:#472C70;   /* Copytrade Online */

  /* Ba cong cu bo sung 19/09/2026 - xem muc 2b. Ba sac nay tach han khoi
     bon sac tren de khach nhin thay ngay day la NHOM KHAC: khong phai bot
     chay lenh thay minh, ma cong cu ho tro tay minh danh.
     Do tren nen trang va nen the: 7,48 / 7,88 / 7,31 - deu qua 4,5. */
  --sp5:#4A5664; --sp5b:#3A4450;   /* Trade Panel   - xam chi, mot bang dieu khien */
  --sp6:#8A2F62; --sp6b:#6E244E;   /* Copy Signal   - do man, tin chay VAO may */
  --sp7:#A62222; --sp7b:#851B1B;   /* Broadcaster   - do, den phat song */
  /* The thu tam 19/09/2026. Xanh la dam - sac cuoi cung con lai chua
     dung, va hop voi mot dich vu lam tay. Do: 6,15 tren the, 5,56 tren
     nen trang, chu trang dat len no 6,54. */
  --sp8:#1B6B3A; --sp8b:#14522C;   /* Code Bot      - xanh la, dich vu lam tay */
  /* The thu chin 22/09/2026. Lay DUNG sac ma trang gioi thieu da chon
     (.gt-m5m trong gioithieu.css) - mot san pham thi chi nen co mot mau
     nhan dien, the o trang chu va dai dau trang gioi thieu phai trung
     nhau. Do: chu trang tren no 5,79; ban dam 8,17. */
  --sp9:#0D6E8C; --sp9b:#0A566E;   /* MT5 Manager   - lam dau, mot bang dieu khien nhieu terminal */
}


/* =====================================================================
 * 1 · DẢI MỞ ĐẦU
 * ===================================================================== */
.homepage-hero{
  background: linear-gradient(165deg, #172026 0%, #132A2C 55%, #0F2C2E 100%);
  color: #fff;
  padding-block: clamp(44px, 6vw, 74px);
  text-align: center;
  /* Dai nay nam NGOAI .container (sua markup 17/09/2026) nen tu no da
     chay het be ngang - khong phai keo ra bang le am. Cach keo bang le am
     `calc(50% - 50vw)` gan dung nhung lech 7px, vi 100vw tinh ca thanh
     cuon. Dem hai ben de chu thang hang voi phan noi dung o duoi. */
  padding-inline: max(20px, calc(50% - 640px));
  position: relative; overflow: hidden;
  margin-bottom: clamp(36px, 5vw, 60px);
}
/* Quầng sáng lệch phải, cùng hướng nguồn sáng với bóng đổ của bộ biến */
.homepage-hero::after{
  content:""; position:absolute; inset:auto -10% -70% 50%; height:380px;
  background: radial-gradient(closest-side, rgba(15,118,110,.26), transparent);
  pointer-events:none;
}
.homepage-hero h1{
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
  color: #fff; position: relative;
  max-width: 20ch; margin: 0 auto;
}
.homepage-hero .lead{
  font-size: 16.5px; font-weight: 300; line-height: 1.62;
  color: rgba(255,255,255,.76);
  max-width: 62ch; margin: 18px auto 0; position: relative;
}
.hero-badges{
  display:flex; gap:9px; justify-content:center; flex-wrap:wrap;
  margin-top: 26px; position: relative;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--ta-r-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hero-badge:hover{ background: rgba(255,255,255,.14); color:#fff; }
/* Nhãn đầu tiên là sản phẩm chủ lực — cho nó màu nhấn.
   Đổi từ `.badge-dca` sang `.badge-cb` ngày 20/09/2026: Code Bot đã
   lên thẻ đầu tiên, nên nhãn được tô cũng phải là nó — không thì
   màu nhấn rơi vào nhãn thứ hai, trông như đặt nhầm. */
.hero-badge.badge-cb{
  background: var(--ta-accent); border-color: transparent; color:#fff;
  box-shadow: 0 6px 20px rgba(15,118,110,.38);
}
.hero-badge.badge-dca:hover{ background: var(--ta-accent-ink); color:#fff; }


/* =====================================================================
 * 2 · THẺ SẢN PHẨM
 * ===================================================================== */
.flagship-section{ padding-block: 0 clamp(36px, 5vw, 58px); }

/* BON THE MOT HANG, CHOT BANG LUOI.
 *
 * Bon cot `col-lg-3` cong lai dung bang be ngang cua `.row` - do tren
 * trang that: the 306px, cot 330px, bon cot 1320px, hang cung 1320px.
 * Vua khit thi Chrome van ngat dong sau ba the: tam the ra 3 / 4 / 1.
 * Cai nay da vap mot lan voi `col-lg-4` hom nay roi.
 *
 * Luoi bon cot thi khong con phep cong nao de sai: tam the chia chan
 * 4 + 4. `gap: 0` va de nguyen padding 12px cua `g-4` lo phan khe ho, de
 * khoang cach khong doi. `width: auto` de de len `width: 25%` cua
 * Bootstrap - de nguyen thi the tu tinh be ngang, luoi khong con quyen.
 */
@media (min-width: 992px){
  .flagship-section > .container > .row{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .flagship-section > .container > .row > [class*="col-"]{
    width: auto; max-width: none;
  }
  /* Ghim tung o. De luoi tu xep thi no bo trong o hang 1 cot 3 - do tren
     trang that ra 3 / 4 / 1, the thu ba nhay sang cot 4. Khong tim ra
     luat nao ghim cho do, nhung ghim het tam o thi khong con gi de doan
     va ket qua kiem duoc bang thuoc. */
  .flagship-section > .container > .row > :nth-child(1){ grid-area: 1 / 1; }
  .flagship-section > .container > .row > :nth-child(2){ grid-area: 1 / 2; }
  .flagship-section > .container > .row > :nth-child(3){ grid-area: 1 / 3; }
  .flagship-section > .container > .row > :nth-child(4){ grid-area: 1 / 4; }
  .flagship-section > .container > .row > :nth-child(5){ grid-area: 2 / 1; }
  .flagship-section > .container > .row > :nth-child(6){ grid-area: 2 / 2; }
  .flagship-section > .container > .row > :nth-child(7){ grid-area: 2 / 3; }
  .flagship-section > .container > .row > :nth-child(8){ grid-area: 2 / 4; }
}

.product-row-card{
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  overflow: hidden;
  box-shadow: var(--e1);
  height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.product-row-card:hover{ box-shadow: var(--e2); transform: translateY(-2px); }

/* --- đầu thẻ: nền màu, cấu trúc giống hệt nhau ở cả bốn --- */
.pr-brand{
  padding: 22px 20px 18px;
  color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.pr-brand::after{
  content:""; position:absolute; right:-40px; top:-50px; width:170px; height:170px;
  border-radius:50%; background: rgba(255,255,255,.07); pointer-events:none;
}
.pr-brand-dca { background: linear-gradient(150deg, var(--sp1), var(--sp1b)); }
.pr-brand-vip { background: linear-gradient(150deg, var(--sp2), var(--sp2b)); }
.pr-brand-tv  { background: linear-gradient(150deg, var(--sp3), var(--sp3b)); }
.pr-brand-copy{ background: linear-gradient(150deg, var(--sp4), var(--sp4b)); }

.pr-icon{ font-size: 30px; line-height: 1; position: relative; }
/* Chua san cho HAI DONG ten. Tam san pham co ten dai ngan khac nhau -
   "TradingView Bot" mot dong, "Telegram, Discord to MT5 Signal Copier"
   hai dong - ma the nao cung xuong dong o mot kho man hinh nao do. De
   cao tu do thi khoi dau cua tung the lech nhau, keo theo danh sach
   tinh nang ben duoi khong thang hang voi cac the cung hang. Chua san
   hai dong thi moi khoi dau cao bang nhau o moi kho. */
.pr-brand h3{
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
  margin: 12px 0 0; position: relative; color: #fff;
  line-height: 1.28; text-wrap: balance;
}
/* Co chu co dan theo be ngang the. Ten dai nhat
   ("MT5, Telegram, Discord to Telegram, Discord Signal Broadcaster",
   62 ky tu) o 16,5px thi an BON dong khi the hep (992-1100px) - chua san
   bon dong thi bay the con lai tro nen rong huech. Co chu nho lai mot
   chut o kho hep thi no vua BA dong, va ba dong la muc chua san. */
.pr-brand h3{ font-size: clamp(14.2px, .82vw + 6.2px, 16.5px); }
/* Muc chua san doi theo kho, vi 992-1199px la khoang the hep nhat ma
   van con xep bon cot: o do ten dai nhat an BON dong, tu 1200px tro len
   thi vua BA. Chua theo tung kho thi khong cho nao thua mot dong trong,
   ma cung khong cho nao bi tran. */
@media (min-width: 992px){
  .pr-brand h3{ min-height: calc(4 * 1.28em); display: flex;
    align-items: center; justify-content: center; }
}
@media (min-width: 1200px){
  .pr-brand h3{ min-height: calc(3 * 1.28em); }
}
/* Nhãn dưới tên: markup dùng `.badge.bg-light.text-dark` của Bootstrap,
   trên nền màu thì nó thành một mảng trắng chói. Đổi thành viền mảnh. */
.pr-brand .badge{
  /* Lop phu TOI chu khong phai lop phu SANG. Chu la trang, nen phu them
     trang len sac nen thi keo nen lai gan mau chu - tren ba sac sang
     nhat (#0F766E, #8A5D03, #1B6B3A) tut xuong 3,9-4,5:1. Phu den thi
     nguoc lai, day len 6,8:1 tren chinh sac xau nhat. Do tren trang. */
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff !important;
  font: 600 10.5px/1 var(--ta-mono); letter-spacing: .06em;
  padding: 5px 11px; margin-top: 10px; position: relative;
}
/* Dong phu cung chua san hai dong, cung mot ly do nhu the <h3>: co the
   ghi "Nhan tin hieu tu TradingView" mot dong, co the ghi
   "MT5 - Telegram - Discord -> Telegram / Discord" hai dong. */
.pr-brand p{
  /* .78 la qua mo: tren sac #0F766E chi con 4,00:1. .92 thi 4,90:1 ma
     nhin van du nhat so voi dong ten ben tren. */
  font-size: 12px; font-weight: 300; color: rgba(255,255,255,.92);
  margin-top: 8px; position: relative; line-height: 1.45;
}
@media (min-width: 992px){
  .pr-brand p{ min-height: calc(2 * 1.45em); }
}

/* --- thân thẻ: danh sách tính năng --- */
.pr-features{ padding: 18px 20px; flex: 1; }
.feature-list{ margin: 0; padding: 0; list-style: none; }
.feature-list li{
  font-size: 13px; line-height: 1.55; color: var(--ta-fg-2);
  margin-bottom: 10px; display: flex; gap: 9px; align-items: flex-start;
}
.feature-list li:last-child{ margin-bottom: 0; }
.feature-list li i{ flex: none; margin-top: 3px; font-size: 13px; }

/* Biểu tượng từng dòng giữ nguyên — chúng nói được nội dung của dòng.
   Chỉ đổi màu cho khớp sắc của thẻ. */
.color-dca { color: var(--sp1) !important; }
.color-vip { color: var(--sp2) !important; }
.color-tv  { color: var(--sp3) !important; }
.color-copy{ color: var(--sp4) !important; }

/* --- chân thẻ: giá và nút --- */
.pr-action{
  padding: 16px 20px 20px;
  border-top: 1px solid var(--ta-line-2);
  margin-top: auto;
}
/* Giá: BỐN THẺ CÙNG MỘT KIỂU CHỮ. Trước đây mỗi thẻ một màu chữ (cam,
   xanh lá, xanh dương, tím) nên không so được bằng mắt. */
.pr-price{
  text-align: center;
  font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 700; letter-spacing: -.035em;
  color: var(--ta-fg); line-height: 1.15;
}
.pr-price .period{
  font: 400 13px/1 var(--ta-font); color: var(--ta-fg-3); letter-spacing: 0;
}
.pr-price .subtext,
.pr-price .d-block,
.pr-price .d-flex{
  font-family: var(--ta-font); font-variant-numeric: normal;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  color: var(--ta-fg-3); line-height: 1.55;
}
.pr-price .subtext strong,
.pr-price .d-block strong{ color: var(--ta-fg-2); font-weight: 600; }
.pr-price a{ color: var(--ta-accent-ink) !important; font-weight: 600; }

/* Đã bỏ 19/09/2026: `.price-dca .subtext{ background: ... }`.
   Quy tắc đó sinh ra cho ô “miễn phí khi đăng ký qua link IB Vantage” —
   một lời mời riêng nên được cho mặt nền để tách khỏi giá. Nay ô đó không
   còn, chủ dự án bán qua hệ thống quản lý chứ không qua link giới thiệu
   sàn nữa. Để lại thì chữ phụ của thẻ DCA đeo một khung xanh mà ba thẻ
   còn lại không có — bốn thẻ cạnh nhau mà một cái khác kiểu. */

.pr-buttons{ display: flex; gap: 8px; margin-top: 14px; }
.pr-buttons .btn{
  flex: 1; font-size: 13px; font-weight: 600;
  padding: 10px 12px; border-radius: var(--ta-r-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; border: 1px solid transparent;
}
/* Nút chính của từng thẻ mang sắc của thẻ đó; nút phụ thì trung tính.
   Hai nút cùng màu đậm thì không biết cái nào là việc chính. */
.btn-dca-primary { background: var(--sp1) !important; color:#fff !important; }
.btn-vip-primary { background: var(--sp2) !important; color:#fff !important; }
.btn-tv-primary  { background: var(--sp3) !important; color:#fff !important; }
.btn-copy-primary{ background: var(--sp4) !important; color:#fff !important; }
.btn-dca-primary:hover { background: var(--sp1b) !important; }
.btn-vip-primary:hover { background: var(--sp2b) !important; }
.btn-tv-primary:hover  { background: var(--sp3b) !important; }
.btn-copy-primary:hover{ background: var(--sp4b) !important; }

.btn-outline-dca, .btn-outline-vip, .btn-outline-tv, .btn-outline-copy{
  background: var(--ta-surface-2) !important;
  border-color: var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
}
.btn-outline-dca:hover, .btn-outline-vip:hover,
.btn-outline-tv:hover, .btn-outline-copy:hover{
  background: var(--ta-sunken) !important; color: var(--ta-fg) !important;
}


/* =====================================================================
 * 2b · BA THE CONG CU (Trade Panel, Copy Signal, Broadcaster)
 * ---------------------------------------------------------------------
 * Dung lai toan bo cau truc .product-row-card o tren - chi them ba sac.
 * Viet rieng mot muc chu khong nhet vao danh sach tren vi day la NHOM
 * KHAC: bon the tren la bot tu chay, ba the nay la cong cu nguoi dung
 * cam tay. Tren markup chung duoc dat trong mot dai rieng co tieu de.
 * ===================================================================== */
.pr-brand-tp { background: linear-gradient(150deg, var(--sp5), var(--sp5b)); }
.pr-brand-st { background: linear-gradient(150deg, var(--sp6), var(--sp6b)); }
.pr-brand-sb { background: linear-gradient(150deg, var(--sp7), var(--sp7b)); }

.color-tp { color: var(--sp5) !important; }
.color-st { color: var(--sp6) !important; }
.color-sb { color: var(--sp7) !important; }

.btn-tp-primary { background: var(--sp5) !important; color:#fff !important; }
.btn-st-primary { background: var(--sp6) !important; color:#fff !important; }
.btn-sb-primary { background: var(--sp7) !important; color:#fff !important; }
.btn-tp-primary:hover { background: var(--sp5b) !important; }
.btn-st-primary:hover { background: var(--sp6b) !important; }
.btn-sb-primary:hover { background: var(--sp7b) !important; }

.btn-outline-tp, .btn-outline-st, .btn-outline-sb{
  background: var(--ta-surface-2) !important;
  border-color: var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
}
.btn-outline-tp:hover, .btn-outline-st:hover, .btn-outline-sb:hover{
  background: var(--ta-sunken) !important; color: var(--ta-fg) !important;
}

.pr-brand-m5m { background: linear-gradient(150deg, var(--sp9), var(--sp9b)); }
.color-m5m    { color: var(--sp9) !important; }
.btn-m5m-primary       { background: var(--sp9) !important; color:#fff !important; }
.btn-m5m-primary:hover { background: var(--sp9b) !important; }
.btn-outline-m5m{
  background: var(--ta-surface-2) !important;
  border-color: var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
}
.btn-outline-m5m:hover{
  background: var(--ta-sunken) !important; color: var(--ta-fg) !important;
}

.pr-brand-cb{ background: linear-gradient(150deg, var(--sp8), var(--sp8b)); }
.color-cb{ color: var(--sp8) !important; }
.btn-cb-primary{ background: var(--sp8) !important; color:#fff !important; }
.btn-cb-primary:hover{ background: var(--sp8b) !important; }
.btn-outline-cb{
  background: var(--ta-surface-2) !important;
  border-color: var(--ta-line) !important;
  color: var(--ta-fg-2) !important;
}
.btn-outline-cb:hover{ background: var(--ta-sunken) !important; color: var(--ta-fg) !important; }

/* Da bo 19/09/2026: `.congcu-section` va luoi nam o cua no.
   Trang tung tach lam hai dai - bot va cong cu - nhung bay mon chia hai
   nhom thi moi nhom trong it oi, ma mat phai doc hai lan tieu de truoc
   khi toi duoc mon hang. Nay gom lai mot khoi tam the, 4 + 4, dung luoi
   Bootstrap binh thuong. Bo luon quy tac luoi 6 cot viet rieng cho nam
   the: khong con cho nao dung toi. */

/* =====================================================================
 * 3 · BẢNG HIỆU SUẤT VIPTREND
 * ---------------------------------------------------------------------
 * Bảng này là tài sản mạnh nhất của trang: tám bot với P&L, win rate và
 * profit factor thật. Nhưng số phải THẲNG CỘT mới so được — số nhảy cột
 * là mắt phải đọc lại từ đầu mỗi dòng.
 * ===================================================================== */
.section-heading{
  font-size: clamp(23px, 2.9vw, 33px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ta-fg);
}
.section-heading i{ color: var(--ta-accent); }
.section-subtitle{
  font-size: 15.5px; font-weight: 300; color: var(--ta-fg-2); margin-top: 11px;
}

.table-responsive{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  overflow: hidden;
  box-shadow: var(--e1);
}
.table-responsive > .table{ margin: 0; border-radius: 0; box-shadow: none; }

.table thead{ background: var(--ta-surface) !important; }
.table thead th{
  font: 600 10.5px/1 var(--ta-mono) !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ta-fg-3) !important;
  background: var(--ta-surface) !important;
  border-bottom: 1px solid var(--ta-line) !important;
  padding: 14px 14px !important; white-space: nowrap;
  text-align: right;
}
.table thead th:first-child{ text-align: left; }
.table thead th:last-child{ text-align: center; }
/* Markup có sẵn `.text-white` trên từng ô tiêu đề vì nền cũ là xanh đậm.
   Nền nay là màu sáng nên phải thắng lại quy tắc đó. */
.table thead th.text-white{ color: var(--ta-fg-3) !important; }

.table tbody td{
  padding: 13px 14px !important;
  font: 400 13.5px/1.5 var(--ta-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ta-fg-2);
  border-bottom: 1px solid var(--ta-line-2);
  text-align: right; vertical-align: middle; white-space: nowrap;
}
.table tbody td:first-child{
  text-align: left; font-family: var(--ta-font); font-weight: 650; color: var(--ta-fg);
}
.table tbody td:last-child{ text-align: center; }
.table tbody tr:last-child td{ border-bottom: 0; }
.table tbody tr:hover td{ background: rgba(15,118,110,.035); }

/* P&L luôn dương trong bảng này, nhưng vẫn để màu ngữ nghĩa — nếu sau
   này có số âm thì nó tự nổi lên. */
.table .text-success{ color: var(--ta-ok) !important; }

/* Nhãn 🔥 Hot / 🆕 Mới / 🛡️ PF cao nhất / 🔗 Combo: giữ nguyên chữ, chỉ
   cho chúng một hình dạng chung thay vì mỗi cái một màu nền viết tay. */
.table .badge{
  font: 700 9.5px/1 var(--ta-mono) !important; letter-spacing: .06em;
  padding: 4px 8px !important; border-radius: var(--ta-r-pill) !important;
  vertical-align: 1px; margin-left: 4px;
  background: var(--ta-warn-soft) !important; color: var(--ta-warn) !important;
}
.table .btn-outline-primary{
  font-size: 12.5px !important; font-weight: 600;
  padding: 6px 13px !important; border-radius: var(--ta-r-sm) !important;
  background: var(--ta-accent-soft) !important;
  border-color: transparent !important;
  color: var(--ta-accent-ink) !important;
}
.table .btn-outline-primary:hover{
  background: var(--ta-accent) !important; color: #fff !important;
}


/* =====================================================================
 * 4 · TẠI SAO CHỌN CHÚNG TÔI
 * ===================================================================== */
.why-card{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  padding: 24px 22px;
  height: 100%;
  transition: box-shadow .18s, transform .18s;
}
.why-card:hover{ box-shadow: var(--e1); transform: translateY(-2px); }
.why-icon{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--ta-accent-soft) !important;
  color: var(--ta-accent-ink) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 15px;
}
.why-card h4, .why-card h5{
  font-size: 16px; font-weight: 650; color: var(--ta-fg); margin-bottom: 8px;
}
.why-card p{
  font-size: 13.5px; font-weight: 300; line-height: 1.65;
  color: var(--ta-fg-2); margin: 0;
}


/* =====================================================================
 * 5 · GỌI HÀNH ĐỘNG
 * ===================================================================== */
.cta-section{
  background: linear-gradient(140deg, #172026, #0F2C2E);
  color: #fff;
  border-radius: var(--ta-r-lg);
  padding: clamp(30px, 5vw, 50px);
  text-align: center;
  position: relative; overflow: hidden;
  margin-block: clamp(30px, 4vw, 48px);
  margin-inline: 0;
}
.cta-section::after{
  content:""; position:absolute; inset:auto -20% -75% 30%; height:330px;
  background: radial-gradient(closest-side, rgba(15,118,110,.32), transparent);
  pointer-events:none;
}
.cta-section h2, .cta-section h3{
  font-size: clamp(22px, 2.9vw, 31px); font-weight: 700;
  color: #fff; position: relative; letter-spacing: -.02em;
}
.cta-section p{
  font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,.76);
  max-width: 58ch; margin: 12px auto 0; position: relative;
}
.cta-section .btn{
  position: relative; margin-top: 24px;
  background: var(--ta-accent) !important; color: #fff !important;
  border: 0 !important;
  font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--ta-r-sm);
  box-shadow: 0 8px 24px rgba(15,118,110,.34);
}
.cta-section .btn:hover{ background: var(--ta-accent-ink) !important; }


/* =====================================================================
 * 6 · MÀN HÌNH HẸP
 * ===================================================================== */
@media (max-width: 1199.98px){
  .pr-brand h3{ font-size: 15.5px; }
  .feature-list li{ font-size: 12.5px; }
}
@media (max-width: 767.98px){
  .homepage-hero{ padding-block: 38px; }
  .pr-buttons{ flex-direction: column; }
  .pr-buttons .btn{ width: 100%; }
  .pr-price{ font-size: 24px; }
}


/* =====================================================================
 * SỐ LIỆU + "KHÁCH HÀNG NÓI GÌ"  (20/09/2026)
 * ---------------------------------------------------------------------
 * Đặt ngay trước khối kêu gọi hành động: người đọc vừa xem xong tám công
 * cụ và sáu lý do, giờ cần thấy có người khác đã trả tiền rồi — rồi mới
 * tới nút bấm.
 *
 * Ảnh đại diện là CHỮ VIẾT TẮT trên nền màu, không phải ảnh chụp người.
 * Mỗi người một sắc lấy từ bảng màu sản phẩm sẵn có, để hàng thẻ có nhịp
 * màu chứ không phẳng lì.
 * ===================================================================== */

.tc-so{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 26px 20px;
}
.tc-so__o{ text-align: center; }
.tc-so__o + .tc-so__o{ border-left: 1px solid var(--ta-line-2); }
.tc-so__n{
  font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--ta-mono);
  color: var(--ta-accent-ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tc-so__l{
  margin-top: 6px; font-size: 13px; color: var(--ta-fg-3);
  line-height: 1.4;
}

.tc-dg{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tc-d{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  padding: 22px 24px; margin: 0;
  display: flex; flex-direction: column;
}
/* Sao là NỘI DUNG — nó nói khách chấm mấy điểm — nên phải đọc được như
   mọi chữ khác. Dùng sắc vàng đồng đã đặt cho VipTrend: 5,42:1. */
.tc-d__sao{ color: var(--sp2); font-size: 15px; letter-spacing: 2px; }
.tc-d__loi{
  margin: 11px 0 0; font-size: 14.5px; line-height: 1.72;
  color: var(--ta-fg-2); flex: 1;
  /* blockquote của trình duyệt thụt lề 40px hai bên */
  padding: 0; border: 0; quotes: none;
}
.tc-d__ai{
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--ta-line-2);
}
/* Anh va vong tron chu dung CHUNG mot kich thuoc va mot hinh dang:
   thẻ nao co anh, the nao chua co, hang van thang. */
.tc-d__anh, .tc-d__chu{
  flex: none; width: 48px; height: 48px; border-radius: 50%;
}
.tc-d__anh{
  object-fit: cover; object-position: center;
  border: 1px solid var(--ta-line);
  background: var(--ta-sunken);   /* cho san cho anh chua ve */
}
.tc-d__chu{
  display: flex; align-items: center; justify-content: center;
  /* Ba chữ viết tắt chứ không phải một chữ, nên hạ cỡ cho vừa vòng tròn. */
  font: 700 13px/1 var(--ta-mono); letter-spacing: .02em;
  color: #fff;
}
.tc-d__chu--sp3{ background: var(--sp3); }
.tc-d__chu--sp4{ background: var(--sp4); }
.tc-d__chu--sp6{ background: var(--sp6); }
.tc-d__chu--sp8{ background: var(--sp8); }
.tc-d__ten{ font-size: 14.5px; font-weight: 650; color: var(--ta-fg); }
.tc-d__vai{ font-size: 12.5px; color: var(--ta-fg-3); margin-top: 1px; }

@media (max-width: 767.98px){
  .tc-dg{ grid-template-columns: minmax(0, 1fr); }
  /* Bon o tren mot hang o dien thoai thi moi o chi con ~80px - nhan
     "bot da ban giao" xuong ba dong. Hai hang hai o thi vua. */
  .tc-so{ grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 14px; gap: 18px 8px; }
  /* Duong ke doc chi dung giua hai o CUNG HANG - o thu ba mo dau hang
     moi nen khong ke. */
  .tc-so__o + .tc-so__o{ border-left: 0; }
  .tc-so__o:nth-child(even){ border-left: 1px solid var(--ta-line-2); }
  .tc-so__l{ font-size: 11.5px; }
}

/* =====================================================================
 * MT5 MANAGER — dai ngang, nam TREN tam the san pham  (22/09/2026)
 * ---------------------------------------------------------------------
 * Vi sao khong dung chung .product-row-card: the doc cao gan gap doi be
 * ngang, ma san pham nay co sau y va mot doan moi dang ky nen no cao
 * vot len, lam le hang. Dai ngang thi cung noi dung ay chi chiem chung
 * mot phan ba chieu cao, va doc ra la MOT MUC RIENG chu khong phai mon
 * hang thu chin trong bang gia.
 *
 * Ba vung, xep ngang tren man hinh rong:
 *     ten san pham + gia  |  sau y (luoi 3 cot)  |  loi moi + nut
 * Duoi 992px thi xep doc; duoi 576px thi sau y ve mot cot.
 * ===================================================================== */
.m5m-dai{
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 2.5fr) minmax(235px, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  margin-bottom: 30px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 14px;
  background: var(--ta-surface);
  border: 1px solid var(--ta-line);
  /* Vach mau ben trai — dau hieu "muc rieng", re hon mot dai gradient
     phu kin ma van doc ra ngay. */
  border-left: 5px solid var(--sp9);
}

/* ---------- vung 1: ten + gia ---------- */
.m5m-dai__gia{
  display: inline-block;
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  background: var(--sp9);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.m5m-dai__ten h2{
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
}
.m5m-dai__ten p{
  margin: 0 0 6px;
  color: var(--ta-fg-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.m5m-dai__nho{ font-size: 13px; color: var(--ta-fg-3); }

/* ---------- vung 2: sau y ---------- */
.m5m-dai__y{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m5m-dai__y li{
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: start;
}
.m5m-dai__y i{
  grid-row: 1 / 3;
  font-size: 17px;
  color: var(--sp9);
  line-height: 1.25;
}
.m5m-dai__y b{ font-size: 14px; font-weight: 650; line-height: 1.3; }
.m5m-dai__y span{
  font-size: 12.5px;
  color: var(--ta-fg-3);
  line-height: 1.35;
}

/* ---------- vung 3: loi moi + nut ---------- */
.m5m-dai__nut{ display: flex; flex-direction: column; gap: 9px; }
.m5m-dai__moi{
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ta-fg-2);
}
.m5m-dai__nut .btn{ width: 100%; }

/* ---------- thu hep ---------- */
@media (max-width: 991.98px){
  .m5m-dai{ grid-template-columns: 1fr; text-align: left; }
  .m5m-dai__nut{ flex-direction: row; flex-wrap: wrap; align-items: center; }
  .m5m-dai__moi{ flex: 1 1 100%; }
  .m5m-dai__nut .btn{ width: auto; flex: 1 1 200px; }
}
@media (max-width: 575.98px){
  .m5m-dai__y{ grid-template-columns: 1fr; }
}

/* Dai vat ngang duoi cung — thong diep ban hang, vat het ba cot.
   Tach khoi sau y phia tren bang mot duong ke: sau y la tinh nang cua
   chinh no, con dong nay noi ve san pham KHAC. Gop chung thi doc ra nhu
   y thu bay va mat han suc nang. */
.m5m-dai__them{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--ta-line-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ta-fg-2);
}
.m5m-dai__them i{ color: var(--sp9); margin-right: 6px; }
.m5m-dai__them a{
  color: var(--sp9);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sp9) 40%, transparent);
}
.m5m-dai__them a:hover{ border-bottom-color: var(--sp9); }
@media (max-width: 991.98px){
  .m5m-dai__them{ margin-top: 6px; }
}