@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root {
  --bg:#0a0e27;
  --panel:#ffffff0d;
  --cyan:#00f0ff;
  --purple:#a855f7;
  --pink:#ec4899;
  --muted:#b4bbce
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:#f8f9ff;
  font-family:Montserrat,Arial,sans-serif;
  line-height:1.6;
  background:radial-gradient(circle at 90% 5%,#1b3155,transparent 35%),linear-gradient(135deg,#0a0e27,#16213e,#0a0e27);
  overflow-x:hidden
}
a {
  text-decoration:none;
  color:inherit
}
button,input,textarea {
  font:inherit
}
.header {
  position:sticky;
  top:0;
  z-index:50;
  height:66px;
  padding:0 max(5%,20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#0a1028e8;
  border-bottom:1px solid #00f0ff88;
  backdrop-filter:blur(16px)
}
.brand {
  font-weight:800;
  color:var(--cyan);
  text-shadow:0 0 20px #00f0ff99
}
.nav {
  display:flex;
  gap:4px
}
.nav a {
  padding:8px 12px;
  border-radius:8px;
  color:#d7dced;
  font-size:.9rem;
  font-weight:600
}
.nav a:hover,.nav a.current {
  color:var(--cyan);
  background:#00f0ff14
}
.hamburger {
  display:none;
  background:transparent;
  border:0;
  color:var(--cyan);
  font-size:1.5rem
}
.page {
  width:min(1180px,90%);
  margin:auto;
  padding:76px 0
}
.hero {
  min-height:calc(100vh - 66px);
  display:grid;
  grid-template-columns:1fr .85fr;
  align-items:center;
  gap:48px;
  padding-top:35px
}
.badge,.tag {
  display:inline-block;
  border:1px solid #00f0ff80;
  border-radius:99px;
  padding:6px 13px;
  color:var(--cyan);
  background:#00f0ff10;
  font-weight:700;
  font-size:.82rem
}
.hero h1 {
  font-size:clamp(2.2rem,5.6vw,5.4rem);
  line-height:1.1;
  margin:17px 0 8px;
  color:var(--cyan);
  text-shadow:0 0 25px #00f0ff88
}
.hero h2 {
  margin:0;
  color:var(--purple);
  font-size:clamp(1.3rem,2.7vw,2.2rem)
}
.quote {
  font-style:italic;
  color:#e4e7f0;
  font-size:1.18rem
}
.avatar {
  position:relative;
  width:min(400px,75vw);
  aspect-ratio:1;
  margin:auto
}
.avatar:before {
  position:absolute;
  content:"";
  inset:-22px;
  border-radius:50%;
  background:conic-gradient(var(--cyan),var(--purple),var(--pink),var(--cyan));
  filter:blur(22px);
  opacity:.55;
  animation:spin 6s linear infinite
}
.avatar img {
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
  border:5px solid var(--cyan);
  border-radius:50%;
  cursor:zoom-in
}
.grid {
  display:grid;
  gap:18px
}
.stats,.info {
  grid-template-columns:repeat(4,1fr)
}
.card {
  padding:23px;
  border:1px solid #ffffff2c;
  border-radius:18px;
  background:var(--panel);
  backdrop-filter:blur(12px)
}
.cyan {
  border-color:#00f0ff8a;
  box-shadow:0 0 15px #00f0ff1f
}
.purple {
  border-color:#a855f78a;
  box-shadow:0 0 15px #a855f71f
}
.pink {
  border-color:#ec48998a;
  box-shadow:0 0 15px #ec48991f
}
.stat-value {
  display:block;
  font-size:clamp(1.1rem,2vw,2rem);
  line-height:1.15;
  color:var(--cyan);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.stat-icon {
  width:27px;
  height:27px;
  display:block;
  margin-bottom:10px;
  color:var(--cyan)
}
.purple .stat-icon { color:var(--purple) }
.pink .stat-icon { color:var(--pink) }
.title-icon {
  width:1em;
  height:1em;
  display:inline-block;
  margin:0 .24em -.12em 0;
  vertical-align:baseline
}
.info b,.card h2 {
  display:flex;
  align-items:center;
  gap:9px
}
.info b svg,.card-title-icon {
  width:21px;
  height:21px;
  flex:0 0 auto;
  color:var(--cyan)
}
.purple .card-title-icon { color:var(--purple) }
.muted {
  color:var(--muted);
  font-size:clamp(.72rem,.9vw,.92rem);
  line-height:1.4
}
.title {
  text-align:center;
  font-size:clamp(2rem,4vw,3.2rem);
  color:var(--cyan);
  margin:0 0 8px;
  text-shadow:0 0 19px #00f0ff88
}
.intro {
  max-width:830px;
  margin:0 auto 45px;
  text-align:center;
  color:var(--muted)
}
.section-gap {
  margin-top:74px
}
.values {
  grid-template-columns:repeat(3,1fr)
}
.value {
  text-align:center;
  padding:26px 18px 20px;
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,101,201,.35),0 18px 35px rgba(13,16,32,.22)
}
.value-icon {
  width:56px;
  height:56px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  background:transparent;
  box-shadow:none
}
.value svg {
  width:72px;
  height:72px;
  color:var(--pink);
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:none;
}
.value-icon > svg,
.value-icon > i {
  width:56px;
  height:56px;
  color:var(--pink)
}
.value-symbol {
  width:42px;
  height:42px;
  margin:0 auto 12px;
  color:var(--pink)
}
.info .card {
  text-align:center
}
.info b {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1.2;
  font-size:1rem
}
.info b svg {
  width:24px;
  height:24px
}
.info .muted {
  font-size:.78rem
}
.value h3 {
  color:var(--pink);
  font-size:2.1rem;
  margin:0 0 10px;
  letter-spacing:.02em
}
.certs {
  grid-template-columns:repeat(4,1fr)
}
.cert {
  overflow:hidden;
  padding:0
}
.cert img {
  height:175px;
  width:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in
}
.cert p {
  padding:12px;
  margin:0;
  font-size:.83rem
}
.skill-grid,.experiences {
  grid-template-columns:repeat(2,1fr)
}
.skill-top {
  display:flex;
  justify-content:space-between;
  color:var(--cyan);
  font-weight:700
}
.bar {
  height:10px;
  background:#111a35;
  border-radius:99px;
  overflow:hidden;
  margin-top:13px
}
.skill-note {
  margin:10px 0 0;
  font-size:.78rem
}
.detail-page {
  padding-top:42px
}
.detail-page {
  --detail-accent:var(--cyan)
}
.detail-purple {
  --detail-accent:var(--purple)
}
.detail-pink {
  --detail-accent:var(--pink)
}
.detail-back {
  display:inline-flex;
  margin-bottom:22px
}
.detail-hero,.detail-panel {
  background:linear-gradient(145deg,#ffffff12,#ffffff08);
  border:1px solid color-mix(in srgb,var(--detail-accent) 54%,transparent);
  box-shadow:0 18px 55px #0000003d
}
.detail-hero {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:32px;
  align-items:center;
  padding:36px;
  border-radius:28px;
  overflow:hidden;
  position:relative
}
.detail-hero:after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-100px;
  top:-100px;
  background:var(--detail-accent);
  filter:blur(75px);
  opacity:.15;
  pointer-events:none
}
.detail-hero-copy,.detail-cover {
  position:relative;
  z-index:1
}
.detail-hero h1 {
  margin:0 0 8px;
  font-size:clamp(2.25rem,5vw,4.25rem);
  line-height:1.12;
  color:var(--detail-accent);
  text-shadow:0 0 20px color-mix(in srgb,var(--detail-accent) 44%,transparent)
}
.detail-role {
  margin:0 0 24px;
  font-size:clamp(1.25rem,2.5vw,1.85rem);
  font-weight:700
}
.detail-meta {
  display:flex;
  flex-wrap:wrap;
  gap:22px
}
.detail-meta > span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#dce4f6;
  font-weight:650;
  box-shadow:none
}
.detail-meta-icon {
  width:19px;
  height:19px;
  flex:0 0 auto;
  color:var(--detail-accent);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--detail-accent) 62%,transparent))
}
.detail-icon {
  width:24px;
  height:24px;
  flex:0 0 auto;
  color:var(--detail-accent);
  font-weight:900
}
.detail-image-button {
  display:block;
  padding:0;
  border:0;
  background:#081023;
  cursor:zoom-in;
  overflow:hidden
}
.detail-image-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}
.detail-image-button:hover img {
  transform:scale(1.05)
}
.detail-cover {
  border-radius:22px;
  height:300px;
  box-shadow:0 18px 45px #00000070
}
.detail-panel {
  border-color:#ffffff18;
  border-radius:20px;
  margin-top:28px;
  padding:30px
}
.detail-achievements {
  border-color:color-mix(in srgb,var(--detail-accent) 45%,transparent)
}
.detail-panel h2,.detail-media-section h3 {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  font-size:1.55rem
}
.detail-description {
  margin:0;
  color:#d7dced;
  font-size:1.08rem
}
.detail-achievements ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px
}
.detail-achievement {
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  overflow:hidden;
  border:1px solid #ffffff18;
  border-radius:16px;
  background:#07102370
}
.detail-achievement>div {
  display:flex;
  gap:14px;
  padding:19px
}
.detail-achievement p {
  margin:0;
  color:#d7dced
}
.detail-dot {
  width:9px;
  height:9px;
  margin-top:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--detail-accent);
  box-shadow:0 0 12px var(--detail-accent)
}
.detail-achievement .detail-image-button {
  min-height:155px;
  border-left:1px solid #ffffff18
}
.detail-media-section {
  margin-top:32px
}
.detail-media-section h3 {
  margin-bottom:14px;
  font-size:1.2rem
}
.detail-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.detail-gallery .detail-image-button {
  height:210px;
  border:1px solid #ffffff18;
  border-radius:15px
}
.detail-video-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.detail-video-grid video {
  width:100%;
  max-height:500px;
  border:1px solid #ffffff18;
  border-radius:15px;
  background:#000
}
.detail-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.detail-bottom .detail-panel {
  height:100%
}
.detail-impact {
  margin:0;
  color:var(--detail-accent);
  font-size:1.12rem;
  font-weight:600
}
.detail-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.detail-tags span {
  padding:7px 12px;
  border:1px solid #ffffff25;
  border-radius:8px;
  background:#ffffff09;
  color:#e8ecf8;
  font-size:.88rem
}
@media (max-width:760px) {
  .detail-page { width:min(92%,1180px); padding-top:24px }
  .detail-hero { grid-template-columns:1fr; padding:24px; gap:24px }
  .detail-cover { height:235px }
  .detail-panel { padding:22px; margin-top:20px }
  .detail-achievement { grid-template-columns:1fr }
  .detail-achievement .detail-image-button { min-height:190px; border-left:0; border-top:1px solid #ffffff18 }
  .detail-gallery,.detail-video-grid,.detail-bottom { grid-template-columns:1fr }
  .detail-gallery .detail-image-button { height:230px }
  .detail-bottom { gap:0 }
}
.bar i {
  display:block;
  height:100%;
  background:var(--cyan);
  border-radius:99px;
  box-shadow:0 0 14px var(--cyan);
  transform-origin:left;
  transform:scaleX(0)
}
.reveal.show .bar i {
  animation:load 1.25s ease forwards
}
.experience {
  display:flex;
  flex-direction:column
}
.experience h3 {
  margin:0;
  color:var(--cyan);
  font-size:1.35rem
}
.experience h4 {
  margin:4px 0
}
.experience p {
  color:var(--muted)
}
.button {
  align-self:start;
  margin-top:auto;
  cursor:pointer;
  border:1px solid #00f0ff8a;
  background:#00f0ff10;
  color:var(--cyan);
  padding:10px 15px;
  border-radius:10px;
  font-weight:700;
  transition:.25s
}
.button:hover {
  background:#00f0ff2c;
  transform:translateY(-2px)
}
.detail-top {
  display:grid;
  grid-template-columns:1fr 350px;
  gap:32px;
  align-items:center
}
.detail-top h1 {
  font-size:clamp(2rem,4vw,3.5rem);
  margin:0;
  color:var(--cyan);
  text-shadow:0 0 18px #00f0ff77
}
.detail-cover {
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:14px;
  cursor:zoom-in
}
.back {
  color:var(--cyan);
  font-weight:700;
  display:inline-block;
  margin-bottom:20px
}
.achievements li {
  padding:9px 0;
  color:#d9deed
}
.media {
  grid-template-columns:repeat(3,1fr)
}
.media img,.media video {
  width:100%;
  height:205px;
  display:block;
  object-fit:cover;
  border:0;
  border-radius:12px;
  background:#000
}
.media button {
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.tag {
  color:#e3e6f1;
  background:#ffffff0b;
  border-color:#ffffff33
}
.contact {
  grid-template-columns:1fr 1fr
}
.field {
  display:grid;
  gap:6px;
  margin:0 0 16px;
  color:#e7eaf4;
  font-weight:600
}
input,textarea {
  border:1px solid #4b5671;
  border-radius:9px;
  background:#070d21cc;
  color:#fff;
  padding:12px;
  resize:vertical
}
.links {
  display:grid;
  gap:10px
}
.links a {
  padding:13px;
  border:1px solid #a855f780;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:11px
}
.links a:hover {
  background:#a855f714
}
.contact-icon {
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:8px;
  background:#00f0ff20;
  color:var(--cyan);
  font-weight:800;
  line-height:1
}
.contact-icon svg {
  width:17px;
  height:17px;
  display:block;
  fill:currentColor
}
.contact-zalo { background:#0068ff30; color:#65a6ff }
.zalo-logo {
  font-size:.6rem;
  font-weight:900;
  letter-spacing:-.06em;
  font-family:Arial,sans-serif
}
.contact-linkedin { background:#0a66c230; color:#60a5fa }
.contact-facebook { background:#1877f230; color:#75adff }
.floating a svg {
  width:15px;
  height:15px;
  display:block;
  fill:currentColor
}
.floating .zalo-logo {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:20px;
  color:inherit;
  font-size:.62rem;
  font-style:normal
}
.footer {
  margin-top:30px;
  border-top:1px solid #a855f780;
  padding:28px 5%;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:.84rem
}
.footer div {
  display:flex;
  gap:15px
}
.floating {
  position:fixed;
  z-index:30;
  right:18px;
  bottom:18px;
  display:grid;
  gap:8px;
  backdrop-filter:blur(10px)
}
.floating a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  padding:10px 13px;
  background:#101b3bea;
  border:1px solid #00f0ff88;
  border-radius:11px;
  color:var(--cyan);
  font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  transform:translateZ(0)
}
.floating a+ a {
  border-color:#a855f788;
  color:var(--purple)
}
@media (max-width:760px) {
  .floating {
    right:12px;
    bottom:12px;
    gap:6px
  }
  .floating a {
    padding:9px 11px;
    font-size:.9rem;
    width:38px;
    height:38px;
    padding:0
  }
  body {
    padding-bottom:72px
  }
}
dialog {
  padding:0;
  border:0;
  border-radius:14px;
  background:#02040c
}
dialog::backdrop {
  background:#000c
}
dialog img {
  display:block;
  max-width:92vw;
  max-height:87vh
}
dialog button {
  position:absolute;
  right:7px;
  top:6px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#000b;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer
}
.reveal {
  opacity:0;
  transform:translateY(38px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)
}
.reveal.show {
  opacity:1;
  transform:none
}
.reveal:nth-child(2) {
  transition-delay:.09s
}
.reveal:nth-child(3) {
  transition-delay:.18s
}
.reveal:nth-child(4) {
  transition-delay:.27s
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes load {
  to {
    transform:scaleX(1)
  }
}
@media(max-width:760px) {
  .header {
    height:auto;
    min-height:64px;
    flex-wrap:wrap;
    padding-top:11px;
    padding-bottom:11px
  }
  .hamburger {
    display:block
  }
  .nav {
    display:none;
    width:100%;
    flex-direction:column;
    padding-bottom:5px
  }
  .nav.open {
    display:flex
  }
  .hero,.detail-top,.contact {
    grid-template-columns:1fr;
    text-align:center
  }
  .hero {
    gap:24px;
    padding-top:35px
  }
  .hero .avatar {
    grid-row:1
  }
  .stats,.info {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
  }
  .stats .card,.info .card {
    min-width:0;
    padding:12px 8px
  }
  .stats .card,
  .info .card {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center
  }
  .stats .card .stat-value,
  .info .card b,
  .info .card .muted {
    width:100%;
    max-width:100%;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    word-break:break-word
  }
  .values {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    overflow:hidden;
    min-height:410px;
    padding:6px 0
  }
  .values .value {
    position:absolute;
    top:50%;
    left:50%;
    width:min(72vw, 300px);
    min-width:0;
    transform:translate(-50%,-50%) scale(.82);
    opacity:1;
    pointer-events:none;
    transition:transform .6s ease,filter .6s ease;
    filter:blur(0.4px);
    z-index:0
  }
  .values .value.is-left,
  .values .value.is-right {
    opacity:1;
    filter:blur(.2px)
  }
  .values .value.is-left {
    transform:translate(-118%,-50%) scale(.75)
  }
  .values .value.is-right {
    transform:translate(18%,-50%) scale(.75)
  }
  .values .value.is-active {
    opacity:1;
    transform:translate(-50%,-50%) scale(.9);
    z-index:2;
    filter:none
  }
  .skill-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .experiences {
    grid-template-columns:1fr
  }
  .certs {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px
  }
  .cert {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    overflow:hidden;
    border-width:1px;
    border-radius:12px;
    padding:0 !important;
    min-height:220px
  }
  .cert img {
    width:100%;
    height:140px;
    min-height:140px;
    object-fit:cover;
    display:block;
    padding:0;
    margin:0;
    background:rgba(8,16,35,.35);
    border:0
  }
  .cert p {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 8px 12px;
    margin:0;
    font-size:.75rem;
    line-height:1.35;
    text-align:center
  }
  .page {
    padding:62px 0
  }
  .card {
    padding:18px
  }
  .detail-top {
    text-align:left
  }
  .footer {
    flex-direction:column;
    text-align:center
  }
  .footer div {
    justify-content:center
  }
  .floating span {
    display:none
  }
  .floating .zalo-logo {
    display:inline-flex
  }
}
.honeypot {
  display:none!important
}
.hero .stats {
  grid-column:1/-1;
  width:100%;
  margin-top:22px
}
@media(min-width:761px) {
  #home .stats,
  #about .info,
  #about .values {
    width:min(100%,1000px);
    margin-left:auto;
    margin-right:auto
  }
  #home .stats {
    margin-top:34px
  }
  #home .stats .card,
  #about .info .card {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center
  }
  #home .stats .stat-icon {
    margin-left:auto;
    margin-right:auto
  }
}
.stats .card {
  min-height:165px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.timeline {
  position:relative;
  max-width:1080px;
  margin:0 auto
}
.timeline:before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 12px var(--cyan)
}
.timeline-item {
  position:relative;
  width:50%;
  padding:0 54px 42px
}
.timeline-item:nth-child(odd) {
  margin-left:50%
}
.timeline-item:before {
  content:"";
  position:absolute;
  top:29px;
  width:17px;
  height:17px;
  border:4px solid var(--cyan);
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 17px var(--cyan)
}
.timeline-item:nth-child(odd):before {
  left:-10px
}
.timeline-item:nth-child(even):before {
  right:-10px
}
.timeline-item:nth-child(even) .card {
  text-align:right
}
.timeline-item .card {
  transition:transform .3s,box-shadow .3s
}
.timeline-item .card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 38px #0005
}
@media(max-width:760px) {
  .stats .card,
  .info .card {
    justify-content:flex-start
  }
  .stats .card {
    min-height:132px;
    padding:11px 4px
  }
  .stats .stat-icon {
    width:24px;
    height:24px;
    flex:0 0 24px;
    margin:0 0 7px
  }
  .stats .stat-value {
    font-size:1.2rem
  }
  .stats .muted {
    overflow:visible;
    font-size:.63rem;
    line-height:1.27
  }
  .info .card b {
    flex:0 0 70px;
    gap:4px;
    font-size:.9rem
  }
  .info .card b > span {
    display:block;
    white-space:normal
  }
  .info .card b svg {
    width:21px;
    height:21px
  }
  .info .card .muted {
    overflow:visible;
    font-size:.78rem;
    line-height:1.28;
    word-break:normal
  }
  .value .muted {
    font-size:.88rem;
    line-height:1.55
  }
  .skill-top {
    font-size:.82rem
  }
  .skill-note {
    font-size:.68rem
  }
  .timeline-item .card h3 {
    margin:0 0 4px;
    font-size:1rem
  }
  .timeline-item .card b {
    font-size:.82rem
  }
  .timeline-item .card p,
  .timeline-item .card .muted {
    font-size:.76rem;
    line-height:1.4
  }
  .timeline:before {
    left:9px;
    transform:none
  }
  .timeline-item,.timeline-item:nth-child(odd) {
    width:100%;
    margin-left:0;
    padding:0 0 29px 35px
  }
  .timeline-item:before,.timeline-item:nth-child(odd):before {
    left:1px;
    right:auto;
    top:25px
  }
  .timeline-item:nth-child(even) .card {
    text-align:left
  }
}