/* Kiểu riêng của trang yeu-cau-xoa-tai-khoan.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. */

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

.tm__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; }
.tm__brand:hover { opacity: 1; }
.tm__brand img { height: 40px; width: auto; margin-right: 2px; }

.tm__hero { text-align: center; padding: 40px 0 6px; }
.tm__eyebrow { font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.tm__title { font-family: var(--f-head); font-weight: 800; color: #fff; font-size: clamp(27px, 4.5vw, 43px); margin: 0 0 14px; }
.tm__meta { color: rgba(255,255,255,0.55); font-size: 14.5px; line-height: 1.7; }
.tm__meta b { color: rgba(255,255,255,0.8); font-weight: 600; }

.tm__toc { margin-top: 34px; background: rgba(37, 99, 235,0.06); border: 1px solid rgba(37, 99, 235,0.22); border-radius: 18px; padding: 24px 28px; }
.tm__toctitle { font-family: var(--f-body); font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.tm__toclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; }
.tm__toclist a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14.5px; display: flex; gap: 10px; line-height: 1.5; }
.tm__toclist a:hover { color: #fff; }
.tm__toclist a span { color: var(--accent); font-weight: 700; flex: none; }

.tm__sec { margin-top: 40px; padding-top: 36px; border-top: 1px solid rgba(37, 99, 235,0.14); }
.tm__sec:first-of-type { border-top: none; }
.tm__h2 { display: flex; align-items: center; gap: 14px; font-family: var(--f-head); font-weight: 700; color: #fff; font-size: clamp(19px, 2.6vw, 26px); margin: 0 0 18px; scroll-margin-top: 20px; }
.tm__no { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-head); font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--blue), rgba(37, 99, 235,0.42)); box-shadow: 0 5px 16px rgba(37, 99, 235,0.3); }
.tm__p { color: rgba(255,255,255,0.72); font-size: 15.5px; line-height: 1.85; margin: 0 0 14px; }
.tm__p:last-child { margin-bottom: 0; }
.tm__k { color: var(--accent); font-weight: 700; }
.tm__lbl { color: #fff; font-weight: 700; }
.tm__sub { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 17px; margin: 24px 0 8px; }
.tm__sub .tm__k { font-family: var(--f-body); }
.tm__def { color: rgba(255,255,255,0.72); font-size: 15.5px; line-height: 1.8; margin: 0 0 12px; }
.tm__def b { color: #fff; }
.tm__def a { color: var(--accent); text-decoration: none; }
.tm__def a:hover { color: #fff; }
.tm__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.tm__list li { position: relative; padding-left: 24px; color: rgba(255,255,255,0.72); font-size: 15.5px; line-height: 1.7; }
.tm__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--blue)); }

/* Stepper */
.tm__steps { margin-top: 24px; }
.tm__step { position: relative; padding: 0 0 30px 66px; }
.tm__step::before { content: ""; position: absolute; left: 23px; top: 8px; bottom: -8px; width: 2px; background: linear-gradient(180deg, rgba(37, 99, 235,0.55), rgba(37, 99, 235,0.08)); }
.tm__step:last-child { padding-bottom: 0; }
.tm__step:last-child::before { display: none; }
.tm__stepnum { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(160deg, var(--blue), rgba(37, 99, 235,0.45)); box-shadow: 0 6px 20px rgba(37, 99, 235,0.32); }
.tm__steptitle { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 8px; padding-top: 10px; }
.tm__stepdesc { color: rgba(255,255,255,0.65); font-size: 15px; line-height: 1.72; }
.tm__stepdesc b { color: var(--accent); }

/* Cảnh báo */
.tm__warn { margin-top: 4px; background: rgba(255,150,120,0.06); border: 1px solid rgba(255,150,120,0.28); border-radius: 14px; padding: 18px 22px; }
.tm__warn .tm__p { color: rgba(255,210,200,0.9); }

.tm__contact { margin-top: 18px; background: linear-gradient(180deg, rgba(24,22,48,0.6), rgba(12,12,22,0.6)); border: 1px solid rgba(37, 99, 235,0.28); border-radius: 16px; padding: 24px 26px; }
.tm__cname { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 17px; margin-bottom: 16px; }
.tm__crow { font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.65; margin-bottom: 10px; }
.tm__crow:last-child { margin-bottom: 0; }
.tm__crow b { color: var(--accent); font-weight: 600; }
.tm__crow a { color: rgba(255,255,255,0.85); text-decoration: none; }
.tm__crow a:hover { color: #fff; }

.tm__closing { margin-top: 30px; text-align: center; color: rgba(255,255,255,0.6); font-size: 14.5px; font-style: italic; line-height: 1.7; }

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

@media (max-width: 600px) { .tm__toclist { grid-template-columns: 1fr; } }

/* ============ TÍM CHỦ ĐẠO — TRẮNG ĐỐI LẬP ============
   Nền trang: tím tối (giống toàn bộ website). Mỗi mục là một thanh tím,
   bấm vào mới mở ra phần nội dung trên nền TRẮNG để đọc cho rõ.
   Nhờ vậy tím vẫn là màu chủ đạo, trắng là màu đối lập làm nổi nội dung. */
body { background: #0B0F19; color: #CBD5E1; }
.tm::before { background: radial-gradient(circle, rgba(37, 99, 235,0.20), transparent 62%); }
.logo-white { color: #ffffff; }
.logo-accent, .tm__eyebrow, .tm__toctitle, .tm__toclist a span, .tm__k, .tm__crow b, .tm__stepdesc b { color: #2563EB; }
.tm__title, .tm__h2, .tm__sub, .tm__lbl, .tm__def b, .tm__cname, .tm__steptitle, .tm__stepnote, .tm__table td:last-child { color: #0F172A; }
.tm__meta, .tm__closing, .tm__pricedesc { color: #64748B; }
.tm__meta b { color: #334155; }
.tm__p, .tm__def, .tm__list li, .tm__paneltext, .tm__stepdesc, .tm__crow, .tm__toclist a { color: #334155; }
.tm__toclist a:hover, .tm__back a:hover { color: #0F172A; }
.tm__def a, .tm__crow a, .tm__back a { color: #1D4ED8; }
.tm__contact { background: #F8FAFC; border-color: #E2E8F0; }
.tm__sec { border-top-color: #E2E8F0; }
.tm__no, .tm__stepnum { background: linear-gradient(160deg, #2563EB, #60A5FA); box-shadow: 0 5px 16px rgba(106,92,240,0.22); }
.tm__step::before { background: linear-gradient(180deg, rgba(106,92,240,0.45), rgba(106,92,240,0.06)); }
.tm__tablewrap { border-color: #E2E8F0; }
.tm__table th, .tm__table td { border-bottom-color: #E2E8F0; }
.tm__table thead th { color: #2563EB; background: #F1F5F9; }
.tm__table td { color: #334155; }
.tm__warn { background: #fff5f0; border-color: #ffd6c4; }
.tm__warn .tm__p { color: #b5502a; }
  
/* ============================================================
   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; }


/* --- phần nằm trực tiếp trên nền tím: dùng chữ sáng --- */
.tm__toc { background: rgba(37, 99, 235,0.10); border-color: rgba(96, 165, 250,0.34); }
.tm__toctitle { color: #93C5FD; }
.tm__toclist a { color: #CBD5E1; }
.tm__toclist a span { color: #93C5FD; }
.tm__toclist a:hover { color: #ffffff; }
.tm__toclist a { border-bottom-color: rgba(96, 165, 250,0.18); }
.tm__closing { color: rgba(217,213,242,0.72); }
.tm__back a { color: #93C5FD; }
.tm__back a:hover { color: #ffffff; }
/* --- bên trong hộp trắng: giữ nguyên chữ tối cho dễ đọc --- */
.acc__body .tm__contact { background: #F8FAFC; border-color: #E2E8F0; }