/* ============================================
   NGUYENTHAIMMO.COM — AUTHOR PAGE
   Thích nghi từ Kiet_Author.html
   Brand: Warm Tech Minimal — Cam #E05A2B
   Cập nhật: Tháng 6/2026
============================================ */
.author-page {
  overflow: hidden;
  color: var(--text-primary);
  background-color: var(--bg-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='none'/%3E%3Cpath d='M0 0v40M40 0v40M0 0h40M0 40h40' stroke='%23E8E2DA' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  line-height: var(--leading-normal);
  font-family: var(--font-body);
}
.author-page .ntm-mobile-toggle { display: none !important; }
.author-page * { box-sizing: border-box; }
.author-page img { max-width: 100%; display: block; }
.author-page a { text-decoration: none; color: inherit; }
.author-page .container { width: min(1180px, 92%); margin: 0 auto; }
.author-page .section { padding: var(--space-16) 0; }

/* Eyebrow badge */
.author-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--accent-primary-light);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.author-page .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
}
.author-page .eyebrow:hover {
  transform: translateY(-2px);
  background: rgba(224, 90, 43, 0.2);
}

/* Headings */
.author-page h1, .author-page h2, .author-page h3 {
  color: var(--text-primary);
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: 0;
}
.author-page h1 { font-size: var(--text-4xl); margin-bottom: var(--space-5); font-weight: 800; }
.author-page .hero-title-wrap { display: block; }
.author-page .hero-avatar-mobile { display: none !important; }
.author-page h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); font-weight: 700; }
.author-page h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); font-weight: 600; }
.author-page p { margin-top: 0; margin-bottom: var(--space-4); color: var(--text-secondary); }
.author-page .lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: 680px; }
.author-page .muted { color: var(--text-muted); }

/* Buttons */
.author-page .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.author-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: var(--radius-md) !important;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: 0.25s ease;
  border: 2px solid transparent !important;
  position: relative;
  overflow: hidden;
}
.author-page .btn-primary {
  background: var(--accent-primary) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-accent) !important;
}
.author-page .btn-primary:hover {
  background: var(--accent-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.author-page .btn-outline {
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
  background: var(--bg-surface) !important;
}
.author-page .btn-outline:hover {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  background: var(--accent-primary-light) !important;
}
.author-page .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -85%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.author-page .btn:hover::after { left: 125%; }

/* ── HERO ── */
.author-page .hero {
  position: relative;
  padding: var(--space-16) 0;
  background: radial-gradient(circle at top right, rgba(224, 90, 43, 0.13), transparent 34%), linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}
.author-page .hero .container.hero-grid {
  width: min(1280px, 92%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap: var(--space-12) !important;
  align-items: center !important;
}
.author-page .hero-card-shell {
  width: 300px !important;
  height: 300px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 8px !important;
  border-radius: 50% !important;
  background: var(--accent-primary-light) !important;
  border: 1px solid rgba(224, 90, 43, 0.15) !important;
  box-shadow: 0 20px 48px rgba(224, 90, 43, 0.08) !important;
  position: relative !important;
  transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.author-page .hero-card-shell:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 28px 64px rgba(224, 90, 43, 0.14) !important;
}
.author-page .hero-card-core {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 4px solid var(--bg-surface) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
.author-page .hero-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.author-page .hero-card-shell:hover .hero-image {
  transform: scale(1.035);
}
.author-page .trust-badge {
  position: absolute;
  left: 50% !important;
  bottom: -16px !important;
  transform: translateX(-50%) !important;
  width: max-content;
  max-width: 290px;
  padding: 8px 16px !important;
  border-radius: var(--radius-full) !important;
  background: var(--text-primary) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.7s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.author-page .hero-card-shell:hover .trust-badge {
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.author-page .trust-badge strong {
  display: inline !important;
  color: var(--accent-primary) !important;
  font-size: var(--text-sm) !important;
  margin-right: 6px !important;
  font-weight: 800;
}
.author-page .trust-badge span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

/* ── ABOUT ── */
.author-page .about-box { max-width: 900px; margin: 0 auto; text-align: center; }
.author-page .about-box p { font-size: var(--text-lg); }

/* ── EXPERIENCE ── */
.author-page .experience-section { background: var(--bg-base); }
.author-page .experience-grid {
  display: grid !important;
  grid-template-columns: minmax(380px, 560px) 1fr !important;
  gap: var(--space-10) !important;
  align-items: center !important;
}
.author-page .experience-media { display: flex; align-items: flex-start !important; justify-content: flex-start !important; }
.author-page .image-panel {
  width: 100% !important;
  max-width: 560px !important;
  aspect-ratio: 1/1 !important;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  background-size: cover;
  background-position: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.author-page .image-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.author-page .experience-content { display: flex; flex-direction: column; justify-content: flex-start !important; }
.author-page .check-list { display: grid; gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.author-page .check-list li {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) 50px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.author-page .check-list li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: 900;
  font-size: 13px;
}
.author-page .check-list li:hover { transform: translateX(4px); }

/* ── SECTION HEADING ── */
.author-page .soft-section { background: var(--bg-base); }
.author-page .section-heading { max-width: 760px; margin: 0 auto var(--space-6); text-align: center; }
.author-page .sponsor-cert-section .section-heading { max-width: 960px !important; }
.author-page .nowrap-desktop { white-space: nowrap !important; }
@media (max-width: 980px) {
  .author-page .nowrap-desktop { white-space: normal !important; }
}

/* ── CARD GRID (4 chủ đề) ── */
.author-page .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.author-page .card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.author-page .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium);
}
.author-page .topic-card { padding: 26px; }
.author-page .topic-thumb-link { display: block; margin-bottom: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; }
.author-page .topic-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  background-color: var(--bg-elevated);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: 0.25s ease;
}
.author-page .topic-card:hover .topic-thumb { transform: scale(1.035); }
.author-page .topic-title { margin-bottom: var(--space-3); font-size: var(--text-xl); line-height: 1.3; }
.author-page .topic-title a { color: var(--text-primary); transition: 0.25s ease; }
.author-page .topic-title a:hover { color: var(--accent-primary); }
.author-page .topic-card p { margin-bottom: 0; }

/* ── TRUST CARDS ── */
.author-page .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.author-page .trust-card {
  padding: 30px 28px;
  border-radius: var(--radius-xl);
  background: var(--text-primary);
  color: var(--text-inverse);
  min-height: 210px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.author-page .trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.author-page .trust-grid .trust-card h3,
.author-page .trust-card h3 {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 18px !important;
  margin-bottom: var(--space-3) !important;
  font-family: var(--font-heading) !important;
}
.author-page .trust-card p { color: rgba(255, 255, 255, 0.82); margin-bottom: 0; }

/* ── CHANNELS ── */
.author-page .channels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.author-page .social-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.author-page .social-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  font-weight: 800;
  color: var(--text-primary);
  transition: transform 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease, color 0.24s ease;
}
.author-page .social-list a:hover {
  background: var(--text-primary);
  color: var(--text-inverse);
  transform: translateX(4px);
}

/* ── POSTS GRID ── */
.author-page .posts-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--space-6) !important; }
.author-page .post-card {
  overflow: hidden !important;
  border-radius: var(--radius-xl) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.author-page .post-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-medium) !important;
}
.author-page .post-card > .post-thumb {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  padding-bottom: 56.25% !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.author-page .post-body { padding: var(--space-5) !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
.author-page .post-body h3 { font-size: var(--text-xl) !important; line-height: var(--leading-tight) !important; margin-bottom: var(--space-2) !important; }
.author-page .post-title a {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: color 0.24s ease, background-size 0.24s ease !important;
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 0% 2px !important;
}
.author-page .post-title a:hover { color: var(--accent-primary) !important; background-size: 100% 2px !important; }

/* ── CERT STAGE (dùng cho Case Study / Screenshots) ── */
.author-page .sponsor-cert-section {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at top left, rgba(224, 90, 43, 0.18), transparent 30%), radial-gradient(circle at bottom right, rgba(26, 26, 26, 0.22), transparent 34%), linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 100%) !important;
  color: var(--text-inverse) !important;
}
.author-page .sponsor-cert-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.36;
  pointer-events: none;
}
.author-page .sponsor-cert-section .container { position: relative !important; z-index: 1 !important; }
.author-page .sponsor-cert-section .section-heading h2 { color: var(--text-inverse) !important; }
.author-page .sponsor-cert-section .section-heading p { color: rgba(255, 255, 255, 0.76) !important; }
.author-page .cert-stage {
  position: relative !important;
  min-height: 430px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  perspective: 1200px !important;
}
.author-page .cert-photo-card {
  position: absolute !important;
  width: min(27vw, 340px) !important;
  aspect-ratio: 1/1 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.30) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease !important;
}
.author-page .cert-photo-card::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, rgba(224, 90, 43, 0.10), rgba(26, 26, 26, 0.14)), var(--cert-img, linear-gradient(135deg, #E05A2B 0%, #FAF7F4 48%, #1A1A1A 100%)) !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.45s ease !important;
}
.author-page .cert-photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.38) 100%); pointer-events: none; }
.author-page .cert-photo-card span {
  position: absolute !important;
  left: 16px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-full) !important;
  background: rgba(224, 90, 43, 0.92) !important;
  color: #fff !important;
  font-size: var(--text-sm) !important;
  font-weight: 900 !important;
}
.author-page .cert-photo-card:nth-child(1) { transform: translateX(-430px) translateY(36px) rotateY(18deg) rotateZ(-5deg) scale(0.72) !important; z-index: 1 !important; filter: saturate(0.94) brightness(0.88) !important; }
.author-page .cert-photo-card:nth-child(2) { transform: translateX(-255px) translateY(14px) rotateY(12deg) rotateZ(-3deg) scale(0.86) !important; z-index: 2 !important; filter: saturate(0.98) brightness(0.93) !important; }
.author-page .cert-photo-card:nth-child(3) { width: min(35vw, 420px) !important; transform: translateX(0) scale(1) !important; z-index: 5 !important; border-color: rgba(224, 90, 43, 0.46) !important; box-shadow: 0 30px 76px rgba(0, 0, 0, 0.40) !important; }
.author-page .cert-photo-card:nth-child(4) { transform: translateX(255px) translateY(14px) rotateY(-12deg) rotateZ(3deg) scale(0.86) !important; z-index: 2 !important; filter: saturate(0.98) brightness(0.93) !important; }
.author-page .cert-photo-card:nth-child(5) { transform: translateX(430px) translateY(36px) rotateY(-18deg) rotateZ(5deg) scale(0.72) !important; z-index: 1 !important; filter: saturate(0.94) brightness(0.88) !important; }
.author-page .cert-photo-card:hover { z-index: 8 !important; box-shadow: 0 34px 86px rgba(0, 0, 0, 0.44) !important; filter: saturate(1.04) brightness(1) !important; }
.author-page .cert-note { max-width: 820px !important; margin: 8px auto 0 !important; text-align: center !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 16px !important; }
.author-page .cert-dots { display: none !important; }

/* ── COMMITMENT ── */
.author-page .commitment {
  max-width: 920px;
  margin: 0 auto;
  padding: 42px;
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.author-page .commitment:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── FINAL CTA ── */
.author-page .final-cta {
  position: relative;
  background: radial-gradient(circle at top left, rgba(224, 90, 43, 0.22), transparent 28%), linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 100%);
  color: var(--text-inverse);
  text-align: center;
  padding: var(--space-16) 0;
}
.author-page .final-cta h2,
.author-page #tu-van h2 {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.author-page .final-cta p { max-width: 760px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.82); font-size: var(--text-lg); }
.author-page .final-cta .btn-group { justify-content: center; }
.author-page .final-cta .btn-outline { background: transparent; color: var(--text-inverse); border-color: rgba(255, 255, 255, 0.3); }
.author-page .final-cta .btn-outline:hover { background: var(--bg-surface); color: var(--text-primary); }



/* ── RESPONSIVE ── */
@media (max-width:980px) {
  .author-page .hero .container.hero-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .author-page .hero-card-shell { display: none !important; }
  .author-page .hero-title-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-5) !important;
  }
  .author-page .hero-title-wrap h1 {
    margin-bottom: 0 !important;
    font-size: min(5.2vw, 24px) !important;
    text-align: left !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .author-page .hero-avatar-mobile {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border: 2px solid var(--bg-surface) !important;
    box-shadow: var(--shadow-md) !important;
    flex-shrink: 0 !important;
  }
  .author-page .trust-badge { left: 20px; }
  .author-page .experience-grid { grid-template-columns: 1fr !important; }
  .author-page .experience-media { justify-content: center !important; }
  .author-page .image-panel { max-width: min(92vw, 520px) !important; }
  .author-page .card-grid, .author-page .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .author-page .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .author-page .channels { grid-template-columns: 1fr; }
  .author-page .cert-stage { min-height: 380px !important; }
  .author-page .cert-photo-card { width: min(30vw, 300px) !important; }
  .author-page .cert-photo-card:nth-child(3) { width: min(38vw, 360px) !important; }
  .author-page .cert-photo-card:nth-child(1) { transform: translateX(-320px) translateY(32px) rotateY(18deg) rotateZ(-5deg) scale(0.72) !important; }
  .author-page .cert-photo-card:nth-child(2) { transform: translateX(-195px) translateY(13px) rotateY(12deg) rotateZ(-3deg) scale(0.86) !important; }
  .author-page .cert-photo-card:nth-child(4) { transform: translateX(195px) translateY(13px) rotateY(-12deg) rotateZ(3deg) scale(0.86) !important; }
  .author-page .cert-photo-card:nth-child(5) { transform: translateX(320px) translateY(32px) rotateY(-18deg) rotateZ(5deg) scale(0.72) !important; }

}

@media (max-width:760px) {
  .author-page .cert-stage { 
    min-height: auto !important; 
    justify-content: flex-start !important; 
    gap: 16px !important; 
    padding: 8px 4vw 18px !important; 
    overflow-x: auto !important; 
    scroll-snap-type: x mandatory !important; 
    perspective: none !important; 
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .author-page .cert-stage::-webkit-scrollbar {
    display: none !important;
  }
  .author-page .cert-photo-card, 
  .author-page .cert-photo-card:nth-child(1), 
  .author-page .cert-photo-card:nth-child(2), 
  .author-page .cert-photo-card:nth-child(3), 
  .author-page .cert-photo-card:nth-child(4), 
  .author-page .cert-photo-card:nth-child(5) { 
    position: relative !important; 
    flex: 0 0 min(76vw, 320px) !important; 
    width: min(76vw, 320px) !important; 
    transform: none !important; 
    z-index: 1 !important; 
    filter: none !important; 
    scroll-snap-align: center !important; 
  }
  
  .author-page .cert-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
  .author-page .cert-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
  .author-page .cert-dot.active {
    width: 24px !important;
    border-radius: 4px !important;
    background: var(--accent-primary, #E05A2B) !important;
  }
}

@media (max-width:640px) {
  .author-page .section { padding: var(--space-10) 0; }
  .author-page .hero { padding: var(--space-10) 0; }
  .author-page .final-cta { padding: var(--space-12) 0; }
  .author-page .hero-card-shell { display: none !important; }
  .author-page .hero-title-wrap h1 {
    font-size: min(5.2vw, 20px) !important;
  }
  .author-page .card-grid, .author-page .trust-grid, .author-page .social-list { grid-template-columns: 1fr; }
  .author-page .posts-grid { grid-template-columns: 1fr !important; }
  .author-page .trust-badge {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: var(--space-4) auto 0 !important;
    width: max-content;
    max-width: 100%;
    white-space: normal;
  }
  .author-page .commitment { padding: var(--space-6); }
  .author-page .trust-card { min-height: auto; padding: 24px; }
  .author-page .btn { width: 100%; min-height: 50px; font-size: 15.5px; }
}