/* Kiểu riêng của trang nang-cap-chuyen-gia.html
   ------------------------------------------------------------
   Trước đây khối này nằm thẳng trong thẻ <style> của file HTML.
   Tách ra đây để CSP không còn phải mở style-src cho 'unsafe-inline':
   đóng được cửa đó thì kẻ chèn được mã vào trang cũng không dựng
   nổi một khối <style> giả để che nút, đè nội dung hay dò dữ liệu
   người dùng gõ vào form bằng mẹo selector.
   Nạp SAU styles.css nên vẫn ghi đè được như khi còn nằm trong HTML. */

.up { position: relative; overflow: hidden; padding: 40px clamp(20px, 5vw, 80px) 72px; }
.up::before {
  content: ""; position: absolute; z-index: 0; top: -6%; left: 50%;
  width: min(900px, 130vw); height: min(900px, 130vw); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(37, 99, 235,0.16), transparent 60%); pointer-events: none;
}
.up__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }

.up__brand {
  display: inline-flex; align-items: center; gap: 2px; text-decoration: none;
  font-family: var(--f-head); font-size: 22px; font-weight: 800; opacity: .92; transition: opacity .2s ease;
}
.up__brand:hover { opacity: 1; }
.up__brand img { height: 40px; width: auto; margin-right: 2px; }

/* ---- Hero ---- */
.up__hero { text-align: center; padding: 40px 0 8px; }
.up__eyebrow {
  font-family: var(--f-body); font-weight: 800; font-size: 13.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.up__title {
  font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1.14;
  font-size: clamp(28px, 5vw, 50px); max-width: 900px; margin: 0 auto 22px;
}
.up__title span { color: var(--accent); text-shadow: 0 0 40px var(--glow); }
.up__lead {
  color: rgba(255,255,255,0.68); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8;
  max-width: 800px; margin: 0 auto;
}

/* ---- Section heading ---- */
.up__h2 {
  font-family: var(--f-head); font-weight: 700; color: #fff; text-align: center;
  font-size: clamp(22px, 3vw, 32px); margin: 72px 0 8px;
}
.up__h2::after {
  content: ""; display: block; width: 64px; height: 3px; border-radius: 999px; margin: 16px auto 0;
  background: linear-gradient(90deg, var(--blue), var(--accent));
}

/* ---- Benefits grid ---- */
.up__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.up__card {
  position: relative; background: linear-gradient(180deg, rgba(24,22,48,0.6), rgba(12,12,22,0.6));
  border: 1px solid rgba(37, 99, 235,0.24); border-radius: 18px; padding: 28px 24px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.up__card:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250,0.6); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.up__num {
  font-family: var(--f-head); font-weight: 800; font-size: 26px;
  background: linear-gradient(180deg, var(--accent), var(--blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  display: block; margin-bottom: 14px;
}
.up__cardtitle { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.35; margin-bottom: 10px; }
.up__carddesc { color: rgba(255,255,255,0.6); font-size: 14.5px; line-height: 1.7; }

/* ---- Panel (phù hợp / cam kết) ---- */
.up__panel {
  margin-top: 44px; background: rgba(37, 99, 235,0.06); border: 1px solid rgba(37, 99, 235,0.24);
  border-radius: 20px; padding: clamp(26px, 4vw, 40px);
}
.up__fitlist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.up__fitlist li { position: relative; padding-left: 26px; color: rgba(255,255,255,0.78); font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.65; }
.up__fitlist li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--blue));
}
.up__paneltext { color: rgba(255,255,255,0.74); font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.85; margin: 20px 0 0; }

/* ---- Pricing card ---- */
.up__price {
  margin: 52px auto 0; max-width: 620px; text-align: center;
  background: linear-gradient(180deg, rgba(28,24,60,0.85), rgba(12,12,24,0.9));
  border: 1.5px solid rgba(37, 99, 235,0.5); border-radius: 24px; padding: clamp(30px, 4vw, 48px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 60px rgba(37, 99, 235,0.12);
}
.up__pricename {
  display: inline-block; font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); background: rgba(37, 99, 235,0.14);
  border: 1px solid rgba(37, 99, 235,0.4); border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
.up__amount { font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1; font-size: clamp(38px, 6vw, 58px); }
.up__amount b { color: var(--accent); }
.up__per { color: rgba(255,255,255,0.55); font-size: 18px; font-weight: 500; }
.up__pricedesc { color: rgba(255,255,255,0.66); font-size: 15px; line-height: 1.7; max-width: 460px; margin: 16px auto 28px; }

.up__cta {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 380px;
  font-family: var(--f-body); font-weight: 700; font-size: 16px; color: #fff; text-decoration: none; cursor: pointer;
  background: var(--blue); border: none; border-radius: 14px; padding: 17px 24px;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
}
.up__cta:hover { background: #60A5FA; transform: translateY(-2px); box-shadow: 0 12px 30px var(--glow); }
.up__cta:active { transform: translateY(0) scale(.99); }
.up__note { color: rgba(255,255,255,0.45); font-size: 13px; line-height: 1.6; margin: 18px auto 0; max-width: 460px; }

.up__back { text-align: center; margin-top: 40px; }
.up__back a { color: rgba(96, 165, 250,0.85); text-decoration: none; font-size: 14px; }
.up__back a:hover { color: #fff; }

@media (max-width: 900px) { .up__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .up__grid { grid-template-columns: 1fr; } }

/* ============ NỀN TRẮNG — light theme ============ */
body { background: #ffffff; color: #334155; }
.up::before { background: radial-gradient(circle, rgba(106,92,240,0.06), transparent 62%); }
.logo-white { color: #0F172A; }
.logo-accent, .up__eyebrow, .up__title span, .up__pricename { color: #2563EB; }
.up__title, .up__cardtitle, .up__amount { color: #0F172A; }
.up__amount b { color: #2563EB; }
.up__lead, .up__carddesc, .up__paneltext, .up__fitlist li { color: #334155; }
.up__per, .up__pricedesc, .up__note { color: #64748B; }
.up__h2 { color: #0F172A; }
.up__num { background-image: linear-gradient(180deg, #2563EB, #1D4ED8); }
.up__card { background: #ffffff; border-color: #E2E8F0; box-shadow: 0 6px 22px rgba(30,30,60,0.05); }
.up__card:hover { border-color: #2563EB; box-shadow: 0 14px 34px rgba(30,30,60,0.10); }
.up__panel { background: #F8FAFC; border-color: #E2E8F0; }
.up__price { background: #ffffff; border-color: #DBEAFE; box-shadow: 0 18px 50px rgba(30,30,60,0.08); }
.up__pricename { background: #EFF6FF; border-color: #DBEAFE; }
.up__cta { background: #2563EB; }
.up__cta:hover { background: #1D4ED8; }
.up__back a { color: #1D4ED8; }
.up__back a:hover { color: #0F172A; }
  
/* ============================================================
   TÍM LÀM CHỦ ĐẠO — nền trang tím tối, TRẮNG là màu đối lập dùng cho
   phần nội dung khi mở ra, để văn bản dài vẫn dễ đọc.
   ============================================================ */
body {
  background:
radial-gradient(900px 420px at 50% -140px, rgba(37, 99, 235,0.30), transparent 70%),
#0B0F19;
  color: #CBD5E1;
}

/* Dải tím ở đầu trang */
.tm__hero, .hd__hero, .up__hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 48%, #60A5FA 100%);
  border-radius: 24px;
  padding: clamp(30px, 4vw, 48px) clamp(22px, 3.4vw, 44px);
  box-shadow: 0 18px 46px rgba(37, 99, 235,0.30);
}
/* hoa văn chấm mờ cho sang */
.tm__hero::after, .hd__hero::after, .up__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 62%);
      mask-image: linear-gradient(160deg, #000, transparent 62%);
}
.tm__hero > *, .hd__hero > *, .up__hero > * { position: relative; z-index: 1; }

.tm__hero .tm__eyebrow, .hd__hero .hd__eyebrow, .up__hero .up__eyebrow { color: rgba(255,255,255,0.88); }
.tm__hero .tm__title,   .hd__hero .hd__title,   .up__hero .up__title   { color: #fff; }
.tm__hero .tm__title span, .up__hero .up__title span { color: #DBEAFE; }
.tm__hero .tm__meta,    .hd__hero .hd__sub,     .hd__hero .hd__lead,
.up__hero .up__lead { color: rgba(255,255,255,0.92); }
.tm__hero .tm__meta b { color: #fff; }

/* Logo trên nền tím tối: chữ trắng */
.tm__brand .logo-white, .hd__brand .logo-white, .up__brand .logo-white { color: #ffffff; }

  
/* Logo: hình dấu vốn màu trắng -> đặt trên nền tím cho nổi trên nền sáng */
.tm__brand img, .hd__brand img, .up__brand img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.tm__brand, .hd__brand, .up__brand { align-items: center; gap: 8px; }

  
/* Mọi chữ trong dải tím đều sáng để đọc rõ */
.tm__hero b, .tm__hero strong, .hd__hero b, .hd__hero strong,
.up__hero b, .up__hero strong { color: #fff; }
.hd__hero p, .up__hero p, .tm__hero p { color: rgba(255,255,255,0.92); }
/* các thẻ trắng nằm TRONG dải tím giữ chữ tối cho dễ đọc */
.hd__hero .hd__rolecard, .hd__hero .hd__rolecard *,
.up__hero .up__card, .up__hero .up__card * { color: inherit; }

  
/* Chừa các thẻ NỀN TRẮNG nằm trong dải tím: chữ phải tối mới đọc được */
.hd__hero .hd__role, .hd__hero .hd__role p,
.hd__hero .hd__roledesc { color: #334155; }
.hd__hero .hd__rolename { color: #0F172A; }
.up__hero .up__card, .up__hero .up__card p,
.up__hero .up__carddesc { color: #334155; }
.up__hero .up__cardtitle { color: #0F172A; }


/* --- phần nằm trực tiếp trên nền tím: dùng chữ sáng --- */
.up__h2 { color: #ffffff; }
/* trừ tiêu đề nằm TRONG khung sáng -> giữ chữ tối */
.up__panel .up__h2 { color: #0F172A; }
/* .up__note nằm trong thẻ giá nền trắng -> giữ chữ tối */
.up__back a { color: #93C5FD; }
.up__back a:hover { color: #ffffff; }