/* Kiểu riêng của trang huong-dan-su-dung.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. */

.hd { position: relative; overflow: hidden; padding: 40px clamp(20px, 5vw, 80px) 72px; }
.hd::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.15), transparent 60%); pointer-events: none;
}
.hd__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

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

/* Hero */
.hd__hero { text-align: center; padding: 40px 0 12px; }
.hd__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: 16px; }
.hd__title { font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1.15; font-size: clamp(28px, 4.6vw, 46px); margin: 0 auto 20px; }
.hd__lead { color: rgba(255,255,255,0.68); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.8; max-width: 760px; margin: 0 auto; }
.hd__lead b { color: #fff; }

/* Hai vai trò */
.hd__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.hd__role { display: block; text-decoration: none; background: linear-gradient(180deg, rgba(24,22,48,0.6), rgba(12,12,22,0.6)); border: 1px solid rgba(37, 99, 235,0.26); border-radius: 18px; padding: 24px; transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease; }
.hd__role:hover { transform: translateY(-3px); border-color: rgba(96, 165, 250,0.6); }
.hd__roletag { font-family: var(--f-body); font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.hd__rolename { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: #fff; margin: 8px 0 6px; }
.hd__roledesc { color: rgba(255,255,255,0.6); font-size: 14.5px; line-height: 1.65; }

/* Section */
.hd__section { margin-top: 76px; }
.hd__part { font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); }
.hd__h2 { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: clamp(23px, 3.2vw, 34px); margin: 10px 0 0; }
.hd__h2::after { content: ""; display: block; width: 60px; height: 3px; border-radius: 999px; margin: 16px 0 0; background: linear-gradient(90deg, var(--blue), var(--accent)); }

.hd__sub { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 20px; margin: 40px 0 14px; }
.hd__p { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.85; margin: 0 0 14px; }
.hd__p b { color: #fff; }

/* Stepper */
.hd__steps { margin-top: 26px; }
.hd__step { position: relative; padding: 0 0 30px 66px; }
.hd__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)); }
.hd__step:last-child { padding-bottom: 0; }
.hd__step:last-child::before { display: none; }
.hd__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); }
.hd__steptitle { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 8px; padding-top: 10px; }
.hd__stepdesc { color: rgba(255,255,255,0.63); font-size: 15px; line-height: 1.72; }

/* FAQ */
.hd__faq { border: 1px solid rgba(37, 99, 235,0.22); border-radius: 14px; margin-bottom: 14px; background: rgba(255,255,255,0.02); overflow: hidden; }
.hd__faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; position: relative; font-family: var(--f-head); font-weight: 700; font-size: 16.5px; color: #fff; }
.hd__faq summary::-webkit-details-marker { display: none; }
.hd__faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; }
.hd__faq[open] summary::after { content: "\2013"; }
.hd__faq[open] summary { color: var(--accent); }
.hd__faqbody { padding: 0 22px 20px; color: rgba(255,255,255,0.64); font-size: 15px; line-height: 1.78; }

/* CTA */
.hd__cta { margin-top: 60px; text-align: center; background: linear-gradient(180deg, rgba(28,24,60,0.7), rgba(12,12,24,0.85)); border: 1.5px solid rgba(37, 99, 235,0.45); border-radius: 24px; padding: clamp(30px, 4vw, 44px); }
.hd__ctatitle { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 22px; }
.hd__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hd__btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-body); font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; border-radius: 13px; padding: 15px 26px; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease; }
.hd__btn--primary { color: #fff; background: var(--blue); border: 1.5px solid var(--blue); }
.hd__btn--primary:hover { background: #60A5FA; transform: translateY(-2px); box-shadow: 0 12px 30px var(--glow); }
.hd__btn--ghost { color: #fff; background: rgba(37, 99, 235,0.10); border: 1.5px solid var(--blue); }
.hd__btn--ghost:hover { background: rgba(37, 99, 235,0.22); transform: translateY(-2px); box-shadow: 0 0 24px var(--glow); }

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

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

/* ============ NỀN TRẮNG — light theme ============ */
body { background: #ffffff; color: #334155; }
.hd::before { background: radial-gradient(circle, rgba(106,92,240,0.06), transparent 62%); }
.logo-white { color: #0F172A; }
.logo-accent, .hd__eyebrow, .hd__part, .hd__roletag, .hd__stepdesc b { color: #2563EB; }
.hd__title, .hd__h2, .hd__sub, .hd__rolename, .hd__steptitle { color: #0F172A; }
.hd__lead, .hd__p, .hd__roledesc, .hd__stepdesc { color: #334155; }
.hd__lead b, .hd__p b { color: #0F172A; }
.hd__role { background: #ffffff; border-color: #E2E8F0; box-shadow: 0 6px 22px rgba(30,30,60,0.05); }
.hd__role:hover { border-color: #2563EB; }
.hd__stepnum { background: linear-gradient(160deg, #2563EB, #60A5FA); box-shadow: 0 6px 18px rgba(106,92,240,0.22); }
.hd__step::before { background: linear-gradient(180deg, rgba(106,92,240,0.45), rgba(106,92,240,0.06)); }
.hd__faq { background: #F8FAFC; border-color: #E2E8F0; }
.hd__faq summary { color: #0F172A; }
.hd__faq summary::after, .hd__faq[open] summary { color: #2563EB; }
.hd__faqbody { color: #334155; }
.hd__back a { color: #1D4ED8; }
.hd__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 --- */
.hd__part { color: #93C5FD; }
.hd__back a { color: #93C5FD; }
.hd__back a:hover { color: #ffffff; }