/* =====================================================================
 * TRANG CÔNG KHAI — BỘ KHUNG GIAO DIỆN
 * Viết lại 17/09/2026 (trước đó file này chỉ là một lớp vá tương phản)
 * ---------------------------------------------------------------------
 * Web này có HAI nửa:
 *
 *   shell/app/…   — khu vực đã đăng nhập, đã có bộ khung từ 17/09
 *   shell/site/…  — trang công khai: giới thiệu, bảng giá, hướng dẫn, FAQ
 *
 * Nửa công khai nạp Bootstrap thẳng từ CDN và KHÔNG có bộ khung nào.
 * Đo được: 215 mã màu khác nhau và 3.476 dòng CSS nội tuyến rải trên 54
 * tệp. Mỗi trang là một hòn đảo, nên hai nửa web nhìn như hai sản phẩm
 * của hai công ty.
 *
 * CÁCH LÀM Ở ĐÂY: KHÔNG sửa 54 trang.
 * Bootstrap 5.3 nhận màu qua biến `--bs-*`. Nối bộ biến của mình vào đó
 * là toàn bộ nút, thẻ, bảng, nhãn, cảnh báo, phân trang… của cả 54 trang
 * đổi theo cùng lúc, không phải chạm vào trang nào. Màu viết tay trong
 * từng trang thì gỡ dần ở các đợt sau.
 *
 * THỨ TỰ NẠP (shell/site/header.php):
 *   bootstrap.min.css  →  ta-tokens.css  →  trangcong.css
 * Phải đúng thứ tự này: mục 1 dưới đây ghi đè biến của Bootstrap, mà
 * ghi đè thì phải đến sau.
 *
 * BỐ CỤC FILE
 *   1. Nối bộ biến vào Bootstrap
 *   2. Nền, chữ, tiêu đề
 *   3. Thanh trên cùng và menu
 *   4. Chân trang
 *   5. Nút hỗ trợ nổi
 *   6. Khối dùng lại: hero, thẻ sản phẩm, thẻ giá
 *   7. Lớp vá tương phản cũ — số đo thật, đừng xoá khi chưa đo lại
 * ===================================================================== */


/* =====================================================================
 * 1. NỐI BỘ BIẾN VÀO BOOTSTRAP
 * ---------------------------------------------------------------------
 * Bootstrap tự tính nhiều thứ từ mấy biến này (viền bảng, nền nhạt của
 * cảnh báo, màu chữ phụ…), nên đặt ở đây rẻ hơn nhiều so với đuổi theo
 * từng lớp một.
 * ===================================================================== */
:root{
  --bs-body-bg:            var(--ta-bg);
  --bs-body-color:         var(--ta-fg);
  --bs-secondary-color:    var(--ta-fg-2);
  --bs-tertiary-color:     var(--ta-fg-3);
  --bs-body-font-family:   var(--ta-font);

  --bs-primary:            #0F766E;
  --bs-primary-rgb:        15, 118, 110;
  --bs-link-color:         #0A56C6;
  --bs-link-hover-color:   #0A4FB4;
  --bs-link-color-rgb:     10, 86, 198;

  --bs-border-color:       var(--ta-line);
  --bs-border-radius:      var(--ta-r);
  --bs-border-radius-sm:   var(--ta-r-sm);
  --bs-border-radius-lg:   var(--ta-r-lg);
  --bs-border-radius-pill: var(--ta-r-pill);

  --bs-success:  #0B6E4F;  --bs-success-rgb:  11, 110, 79;
  --bs-warning:  #9A6206;  --bs-warning-rgb:  154, 98, 6;
  --bs-danger:   #A62222;  --bs-danger-rgb:   166, 34, 34;
  --bs-info:     #1D4ED8;  --bs-info-rgb:     29, 78, 216;

  /* Chiều cao thanh trên cùng — dùng cho padding-top của body và cho
     scroll-margin của các mục có neo. Khai một chỗ để không lệch. */
  --tc-bar: 62px;
}


/* =====================================================================
 * 2. NỀN, CHỮ, TIÊU ĐỀ
 * ===================================================================== */
body{
  background: var(--ta-bg);
  color: var(--ta-fg);
  font-family: var(--ta-font);
  padding-top: var(--tc-bar);
  -webkit-font-smoothing: antialiased;
}

/* Thang cỡ chữ. Trước đây mỗi trang tự đặt font-size cho h1/h2 nên cùng
   một cấp tiêu đề ở hai trang lại to nhỏ khác nhau. */
h1, .h1{ font-size: clamp(28px, 3.4vw, 42px); }
h2, .h2{ font-size: clamp(23px, 2.4vw, 31px); }
h3, .h3{ font-size: clamp(19px, 1.8vw, 24px); }
h4, .h4{ font-size: 19px; }
h5, .h5{ font-size: 16.5px; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
  font-weight: 650;
  line-height: 1.25;
  text-wrap: balance;
  /* KHONG dat color o day. Site co nhung dai nen toi (hero trang chu,
     chan trang) ma tieu de trong do thua mau trang tu khoi cha. Dat mau
     toi o pham vi toan trang la de len ca nhung cho do. */
  color: inherit;
}
p{ line-height: 1.7; }

/* Bề rộng dòng đọc. Chữ dài quá 90 ký tự thì mắt trượt dòng. Chỉ áp cho
   đoạn văn nằm trong luồng nội dung, không áp cho đoạn trong thẻ/bảng. */
.tc-doc p, .tc-doc li{ max-width: 78ch; }

/* Khối `.container` trước đây được đặt nền trắng + bóng trong header,
   nghĩa là MỌI container trên site thành một cái thẻ — kể cả container
   chỉ dùng để canh lề. Trả nó về đúng việc: chỉ canh lề. */
.container{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Mục có neo (#id) không bị thanh trên cùng che mất tiêu đề khi nhảy tới */
:target, [id]{ scroll-margin-top: calc(var(--tc-bar) + 12px); }


/* =====================================================================
 * 3. THANH TRÊN CÙNG VÀ MENU
 * ---------------------------------------------------------------------
 * Trước: hai hàng — hàng trên là menu căn giữa trên nền trắng, hàng dưới
 * là ô chọn ngôn ngữ 60 thứ tiếng nằm góc trái cùng nút đăng nhập nằm
 * góc phải. Không có chỗ nào mang tên thương hiệu: khách vào trang giới
 * thiệu sản phẩm không biết mình đang ở web nào.
 *
 * Nay: MỘT hàng — tên web bên trái, menu ở giữa, ngôn ngữ và đăng nhập
 * bên phải. Ô chọn ngôn ngữ thu lại thành một nút nhỏ; nó là bản dịch
 * máy, không đáng chiếm chỗ đẹp nhất của trang.
 * ===================================================================== */
.main-menu{
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  min-height: var(--tc-bar);
  display: flex; align-items: center;
  background: var(--ta-fg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 12px rgba(23,32,38,.18);
  padding-bottom: 0;
}
.main-menu > .container{
  display: flex; align-items: center; gap: 14px;
  /* Rong hon cot noi dung (1320px). Thanh dieu huong khong phai cot chu
     de doc, no chi can du cho. Do that: ten web 144px + menu + khoi phai
     ~213px. */
  max-width: 1600px; margin-inline: auto;
  padding-inline: 14px;
}

/* --- tên web --- */
.tc-brand{
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  color: #FFFFFF; text-decoration: none; white-space: nowrap;
}
.tc-brand:hover{ color: #FFFFFF; opacity: .88; }
.tc-brand .tc-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ta-accent); flex: none;
  box-shadow: 0 0 0 3px rgba(15,118,110,.28);
}

/* --- hàng menu --- */
.main-menu .nav{
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
}
.main-menu .nav-link{
  color: rgba(255,255,255,.82);
  font-size: 14px; font-weight: 500;
  padding: 8px 10px; border-radius: var(--ta-r-sm);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.main-menu .nav-link:hover,
.main-menu .nav-item:hover > .nav-link{
  color: #FFFFFF; background: rgba(255,255,255,.10);
}
.main-menu .nav-item.dropdown > .nav-link::after{
  content: ""; display: inline-block; margin-left: 6px;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px); opacity: .7;
}

/* --- khối bên phải --- */
.secondary-row{
  display: flex; align-items: center; gap: 10px;
  flex: none; margin: 0; padding: 0; background: none; border: 0;
}
.secondary-row .header-left{ margin: 0; }
.tc-right{ display: flex; align-items: center; gap: 10px; }

/* Ô chọn ngôn ngữ của Google Translate: thu nhỏ lại cho vừa thanh. */
.custom-lang-selector .lang-dropdown,
select.lang-dropdown{
  width: 64px; max-width: 64px;
  background: rgba(255,255,255,.10);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ta-r-sm);
  font-size: 13px; padding: 6px 30px 6px 10px;
  appearance: none; -webkit-appearance: none;
  /* appearance:none bo luon mui ten cua he dieu hanh - phai tu ve lai,
     khong thi o nay nhin nhu mot o nhap chu binh thuong. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
select.lang-dropdown:hover{ background-color: rgba(255,255,255,.18); }
select.lang-dropdown option{ color: var(--ta-fg); background: #FFFFFF; }
select.lang-dropdown:focus{
  outline: 2px solid var(--ta-accent); outline-offset: 1px;
}

.secondary-row .btn,
.tc-right .btn{
  font-size: 13.5px; font-weight: 600;
  padding: 7px 15px; border-radius: var(--ta-r-sm);
  white-space: nowrap;
}
.tc-btn-ghost{
  background: transparent; color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
}
.tc-btn-ghost:hover{ background: rgba(255,255,255,.12); color: #FFFFFF; }
.tc-btn-solid{
  background: var(--ta-accent); color: #FFFFFF; border: 1px solid transparent;
}
.tc-btn-solid:hover{ background: #0B5D57; color: #FFFFFF; }

/* --- menu thả xuống --- */
.main-menu .dropdown-content,
.main-menu .submenu{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r);
  box-shadow: 0 14px 40px rgba(23,32,38,.20);
  padding: 8px;
  min-width: 250px;
}
/* Mau chu o day KHONG an - xem khoi "MAU CHU TRONG MENU" o cuoi tep.
   Giu lai dong `color` nay lam ban khai y dinh; noi cuong che nam duoi. */
.main-menu .dropdown-content a,
.main-menu .submenu a,
.main-menu .has-submenu > span{
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--ta-r-sm);
  color: var(--ta-fg-2); font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.main-menu .dropdown-content a:hover,
.main-menu .submenu a:hover,
.main-menu .has-submenu:hover > span{
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
}
.main-menu .dropdown-content a i,
.main-menu .submenu a i,
.main-menu .has-submenu > span i{
  width: 17px; text-align: center; color: var(--ta-accent); flex: none;
}
/* Nhãn nhóm trong menu thả xuống. Chữ nhỏ, mono, hoa - đủ để mắt
   phân đoạn mà không đòi đọc. Đo trên nền trắng: 6,1:1. */
.main-menu .dropdown-content .mn-nhom{
  padding: 10px 11px 4px;
  font: 600 10px/1 var(--ta-mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ta-fg-3);
}
/* Nhãn thứ hai trở đi có đường kẻ mảnh phía trên: hai nhóm dính nhau
   thì chỉ riêng chữ nhỏ không đủ tách. */
.main-menu .dropdown-content .mn-nhom + .mn-nhom,
.main-menu .dropdown-content > * + .mn-nhom{
  margin-top: 6px; padding-top: 11px;
  border-top: 1px solid var(--ta-line-2);
}

/* Nhóm có menu con: thêm mũi tên chỉ sang phải cho biết còn nữa */
.main-menu .has-submenu > span::after{
  content: "›"; margin-left: auto; opacity: .55; font-size: 16px;
}

/* --- cách đặt chỗ của menu thả xuống ---------------------------------
 * Chuyển từ khối <style> trong menu.php sang đây (17/09/2026). Đây là
 * phần CẤU TRÚC: mở ra khi rê chuột, và vùng đệm trong suốt để con trỏ
 * đi từ mục cha sang menu con mà menu không đóng mất giữa đường.
 */
.main-menu .dropdown,
.main-menu .nav-item.dropdown{ position: relative; }

.main-menu .dropdown-content{
  display: none;
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 1000;
}
.main-menu .nav-item.dropdown:hover > .dropdown-content,
.main-menu .dropdown:hover > .dropdown-content,
.main-menu .dropdown-content:hover{ display: block; }

/* Vùng đệm 10px phía trên: giữa nút và menu có một khe, không có vùng
   này thì chuột đi qua khe là menu đóng. */
.main-menu .dropdown-content::before{
  content: ""; position: absolute;
  top: -10px; left: 0; right: 0; height: 10px; background: transparent;
}

.main-menu .has-submenu{ position: relative; }
.main-menu .submenu{
  display: none;
  position: absolute; left: 100%; top: -1px;
  min-width: 224px; z-index: 1001;
}
.main-menu .has-submenu:hover > .submenu{ display: block; }
/* Vùng đệm bên trái menu con, cùng lý do như trên */
.main-menu .submenu::before{
  content: ""; position: absolute;
  top: 0; left: -15px; width: 15px; height: 100%; background: transparent;
}

/* --- màn hình hẹp --- */
.tc-burger{
  display: none; flex: none;
  background: rgba(255,255,255,.10); color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ta-r-sm);
  width: 38px; height: 34px; font-size: 15px; line-height: 1;
}
@media (max-width: 1400px){
  .main-menu .nav-link{ padding: 8px 8px; font-size: 13.5px; }
  .main-menu > .container{ gap: 10px; }
}
@media (max-width: 1100px){
  .tc-brand span:not(.tc-dot){ display: none; }  /* chi con cham mau */
}
@media (max-width: 991.98px){
  .tc-burger{ display: inline-flex; align-items: center; justify-content: center; }
  .main-menu > .container{ flex-wrap: wrap; row-gap: 0; }
  .main-menu .nav{
    order: 3; width: 100%;
    flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    max-height: 0; overflow: hidden;
    transition: max-height .22s ease;
  }
  .main-menu.tc-mo .nav{ max-height: 70vh; overflow-y: auto; padding-bottom: 10px; }
  .main-menu .nav-link{ padding: 10px 12px; }
  .main-menu .dropdown-content,
  .main-menu .submenu{
    position: static; box-shadow: none; border: 0;
    background: rgba(255,255,255,.05); min-width: 0;
    margin: 2px 0 6px 10px;
  }
  .main-menu .dropdown-content a,
  .main-menu .submenu a,
  .main-menu .has-submenu > span{ color: rgba(255,255,255,.80); }
  .main-menu .dropdown-content a:hover,
  .main-menu .submenu a:hover{ background: rgba(255,255,255,.12); color: #FFFFFF; }
  /* Menu di dong nằm trên nền tối nên nhãn nhóm phải đổi chiều màu. */
  .main-menu .dropdown-content .mn-nhom{ color: rgba(255,255,255,.55); }
  .main-menu .dropdown-content > * + .mn-nhom{ border-top-color: rgba(255,255,255,.14); }
  .secondary-row{ margin-left: auto; }
  select.lang-dropdown{ max-width: 110px; }
}
@media (max-width: 575.98px){
  :root{ --tc-bar: 56px; }
  .tc-brand{ font-size: 15px; }
  .tc-right .tc-btn-ghost{ display: none; }
}


/* =====================================================================
 * 4. CHÂN TRANG
 * ===================================================================== */
footer, .footer-main{
  background: var(--ta-fg);
  color: rgba(255,255,255,.72);
}
footer h5, .footer-main h5{ color: #FFFFFF; font-size: 15px; }
footer a:not(.btn), .footer-main a:not(.btn){
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
}
footer a:not(.btn):hover, .footer-main a:not(.btn):hover{
  color: #FFFFFF !important; text-decoration: underline;
}


/* =====================================================================
 * 5. NÚT HỖ TRỢ NỔI
 * ---------------------------------------------------------------------
 * Trước là hai nút xếp chồng, đè lên nội dung ở góc phải dưới. Gộp lại
 * còn một, và chừa chỗ cho thanh cuộn.
 * ===================================================================== */
.contact-fab__btn{
  background: var(--ta-accent);
  border: 0; color: #FFFFFF;
  border-radius: var(--ta-r-pill);
  box-shadow: 0 8px 26px rgba(15,118,110,.38);
  padding: 11px 17px; font-size: 14px; font-weight: 600;
}
.contact-fab__btn:hover{ background: #0B5D57; }
.contact-fab__panel{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: 0 18px 50px rgba(23,32,38,.22);
}
.contact-fab__desc{ color: var(--ta-fg-3); font-size: 12.5px; }


/* =====================================================================
 * 6. KHỐI DÙNG LẠI
 * ---------------------------------------------------------------------
 * Bốn thẻ sản phẩm ở trang chủ đang mỗi thẻ một màu chuyển sắc khác hẳn
 * nhau (xanh navy, xanh lá, xanh tím, xanh ngọc). Bốn màu đó không nói
 * lên điều gì về sản phẩm — chỉ là bốn màu. Nay cùng một mặt thẻ, và
 * phần khác biệt dồn vào chữ.
 * ===================================================================== */
.tc-hero{
  background: linear-gradient(180deg, #172026 0%, #0F2C2E 100%);
  color: #FFFFFF;
  padding: clamp(38px, 6vw, 72px) 0;
}
.tc-hero h1{ color: #FFFFFF; }
.tc-hero p{ color: rgba(255,255,255,.80); max-width: 60ch; margin-inline: auto; }

.tc-card{
  background: var(--ta-surface-2);
  border: 1px solid var(--ta-line);
  border-radius: var(--ta-r-lg);
  box-shadow: var(--e1);
  overflow: hidden;
}
.tc-card__head{
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ta-line-2);
}
.tc-card__body{ padding: 16px 20px 20px; }
.tc-card__tag{
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--ta-r-pill);
  background: var(--ta-accent-soft); color: var(--ta-accent-ink);
}
.tc-price{
  font-size: 27px; font-weight: 700; color: var(--ta-fg);
  font-variant-numeric: tabular-nums;
}
.tc-price small{ font-size: 13px; font-weight: 500; color: var(--ta-fg-3); }


/* =====================================================================
 * 7. LỚP VÁ TƯƠNG PHẢN
 * ---------------------------------------------------------------------
 * Phần này có từ lần sửa tương phản 17/09. Mỗi dòng kèm tỉ lệ ĐO ĐƯỢC
 * trước → sau. Mục 1 ở trên đã xử lý gốc rễ cho phần lớn, nhưng màu viết
 * tay trong từng trang thì bộ biến không với tới — nên giữ lại.
 *
 * VÌ SAO VẪN CẦN !important: file này nạp trong <head>, còn mỗi trang có
 * khối <style> riêng nằm SAU nó trong tài liệu. Cùng độ cụ thể thì cái
 * sau thắng.
 * ===================================================================== */

/* Mã lệnh: hồng mặc định của Bootstrap #E83E8C trên #F8F9FA = 3,62:1
   (135 chỗ). Vẫn là hồng, chỉ đậm hơn: 6,1:1. */
code, kbd, samp, .text-code{ color: #A32A73 !important; }

/* Nhãn KHÔNG khai màu nền. Bootstrap 5 cho `.badge` chữ trắng nhưng nền
   thì phải tự đặt bằng `.bg-*` — thiếu lớp đó là chữ trắng trên nền
   trắng, đo được 1,06:1 ở 5 nhãn trên /toolintroduce/trendbot. Loại trừ
   nhãn đã có `bg-*`, `text-bg-*` hoặc màu viết thẳng trong `style=`. */
.badge:not([class*="bg-"]):not([style*="background"]){
  background-color: var(--ta-accent-soft);
  color: var(--ta-accent-ink);
}

/* Liên kết #007BFF trên #F8F9FA = 3,78:1 → #0A56C6 = 6,3:1.
   Loại trừ .text-white/.text-light: chân trang nền tối, liên kết trong
   đó là chữ trắng. Lần sửa đầu tôi không loại trừ nên quy tắc này biến
   110 liên kết chân trang thành xanh đậm trên nền tối — 2,64:1.

   Sửa 18/09/2026: trước là #0B5ED7. Đợt thử nền #DCE2EA màu đó chỉ còn
   4,48:1 ở những liên kết nằm thẳng trên nền — đo được 7 chỗ như thế ở
   /update/tradingview. #0A56C6 cho 5,6:1 trên nền trang #E7EEEC chốt
   lại và 6,3:1 trên mặt khối, vẫn đọc ra là màu liên kết. */
a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand),
.text-primary{ color: #0A56C6 !important; }
.bg-dark a:not(.btn), footer a:not(.btn), .footer a:not(.btn){ color: #8FC4FF !important; }


/* =====================================================================
 * MAU CHU TRONG MENU THA XUONG
 * ---------------------------------------------------------------------
 * Phai viet o DAY, sau luat mau lien ket ben tren, va phai lap lai dung
 * chuoi `:not(...)` cua no. Ly do:
 *
 *   luat toan cuc  a:not(.btn):not(.nav-link):not(.page-link)
 *                   :not(.text-white):not(.text-light):not(.tc-brand)
 *                  -> 1 the + 6 lop, co !important
 *   luat cua menu  .main-menu .dropdown-content a
 *                  -> 1 the + 2 lop
 *
 * Hai ben cung `!important` thi ben DAC HIEU HON thang, khong phai ben
 * viet sau. Nen chi them `!important` vao luat menu la vo ich - da thu,
 * do lai van ra #0A56C6. Lap lai chuoi `:not()` cho no thanh 8 lop moi
 * du can.
 *
 * Do duoc truoc khi chua:
 *   may ban, nen menu #FFFFFF -> 6,65:1  qua nguong, nhung sai mau thiet ke
 *   di dong, nen menu #172026 -> 2,49:1  HONG
 * Menu la khung dung chung nen cho hong do nam tren MOI trang cua web.
 * Cung mot benh voi lien ket chan trang, da phai chua bang dong
 * `.bg-dark a:not(.btn)` ngay tren.
 * ===================================================================== */
.main-menu .dropdown-content a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand),
.main-menu .submenu a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
  color: var(--ta-fg-2) !important;
}
.main-menu .dropdown-content a:hover:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand),
.main-menu .submenu a:hover:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
  color: var(--ta-accent-ink) !important;
}

/* Menu di dong nam tren nen toi nen doi chieu mau. Khoi nay cung phai
   o sau luat toan cuc, khong dung lai duoc khoi @media ben tren. */
@media (max-width: 991.98px){
  .main-menu .dropdown-content a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand),
  .main-menu .submenu a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
      color: rgba(255,255,255,.80) !important;
    }
  .main-menu .dropdown-content a:hover:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand),
  .main-menu .submenu a:hover:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){
      color: #FFFFFF !important;
    }
}

/* Nút viền của Bootstrap lúc được tô. Viết `.btn.btn-primary` chứ không
   phải `.btn-primary`: menu.php có sẵn `.btn-outline-primary{...!important}`
   trong khối <style> nằm SAU file này — phải hơn nó về độ cụ thể. */
.btn.btn-primary, .btn.btn-outline-primary, .btn.btn-dashboard,
.btn.btn-outline-primary:hover, .btn.btn-outline-primary.active{
  background-color: #0A56C6 !important; border-color: #0A56C6 !important;
  color: #fff !important;
}
.btn.btn-success{ background-color: #1B7A37 !important; border-color: #1B7A37 !important; }
.btn.btn-outline-success{ color: #116343 !important; border-color: #116343 !important;
  background-color: transparent !important; }
/* Nút trong thanh trên cùng đã có màu riêng ở mục 3 — đừng để quy tắc
   trên đè lên. */
.main-menu .btn.tc-btn-ghost{ background: transparent !important; border-color: rgba(255,255,255,.22) !important; }
.main-menu .btn.tc-btn-solid{ background-color: var(--ta-accent) !important; border-color: transparent !important; }

/* Mảng nền đặc: trắng trên #28A745 = 3,13:1 · trắng trên #0DCAF0 = 1,96:1.
   Với xanh ngọc thì làm tối nền đi là mất hẳn màu — nên đổi CHỮ. */
.bg-success, .badge.bg-success, .version, .status{
  background-color: #1B7A37 !important; color: #fff !important;
}
.bg-info, .badge.bg-info, .card-header.bg-info{
  background-color: #0DCAF0 !important; color: #06333D !important;
}
/* Sửa 18/09/2026 — vá này từng ĐÚNG rồi thành SAI vì chính mục 1 ở trên.
   Bootstrap để `.bg-warning` là hổ phách nhạt #FFC107, nên vá đặt chữ nâu
   đậm lên. Nhưng mục 1 đã đổi `--bs-warning` thành #9A6206 — nền hoá đậm,
   mà chữ vẫn nâu đậm: đo trên /codeservice/codebot được 2,43:1. Chữ
   trắng trên #9A6206 là 5,09:1. `.text-dark` trong markup phải thua nên
   cần `!important`. */
.bg-warning, .badge.bg-warning,
.bg-warning.text-dark, .badge.bg-warning.text-dark,
.card-header.bg-warning.text-dark{ color: #FFFFFF !important; }
/* #FFC107 trên #F8F9FA chỉ được 1,55:1 */
.text-warning{ color: #9A6206 !important; }
.bg-dark .text-warning, .text-warning.bg-dark{ color: #FFC107 !important; }

/* Màu viết tay trong từng trang */
/* Đã bỏ 18/09/2026: `.stat-sub` và `.stat-value`. Hai lớp đó chỉ có ở
   tám trang botvip, mà tám trang ấy nay nạp trangphu.css — nơi hai lớp
   được tả đầy đủ (kể cả phông đẳng chiều cho cột số). Vá thêm ở đây
   chỉ còn là hai dòng tranh nhau với nó. */
.vip-name  { color: #A83A00 !important; }  /* #E65100 trên trắng   3,79:1 */
.ic        { color: #0B5D57 !important; }  /* #0E7C86 trên #E6F3F4 4,35:1 */
.badge.mt-2{ background-color: #A83A00 !important; }  /* trắng/#E65100 3,79:1 */

/* Đã bỏ 18/09/2026: `.sdca{ --muted: #5A6572 !important }`.
   Lúc đó khối `.sdca` tự đặt `--muted:#8794a5` — 2,87:1 trên nền của nó,
   nên phải vá. Nay khối đó đã nối về bộ biến chung và `--muted` lấy
   `--ta-fg-3` (5,0:1), vá thêm chỉ còn là rác. */

/* Đã bỏ 18/09/2026: ba vá bám vào màu viết trong `style=`
     [style*="#27ae60"]                #27AE60 trên #E8F5E8 = 2,55:1
     .badge[style*="#e65100"]          trắng trên #E65100   = 3,79:1
     .panel-btn.blue / .panel-btn.green
   Cả ba màu ấy nay không còn trong trang nào nữa — đo lại ngày
   18/09/2026, `grep` ra không tệp nào. Bốn nút bảng điều khiển đã
   được tả trong trangphu.css, nơi trang dùng chúng có nạp. */

/* Ô biểu tượng đựng EMOJI — emoji tự có màu nên phép đo tương phản ở đây
   không có nghĩa. Vẫn đặt màu đậm phòng khi ô đó đựng ký tự thường. */
.feature-icon{ color: #9A6206 !important; }