/* ============================================================================
   KHỐI RIÊNG CỦA TRANG CÁ NHÂN annt — nạp SAU style.css của bộ khung.

   Để riêng một file, không sửa style.css, vì hai lý do: bộ khung còn được
   nâng cấp từ skill /landing-page-vercel.app-maker, và mọi thứ dưới đây chỉ
   đúng cho một trang người (ảnh chân dung, dải số liệu, thẻ chương trình).

   Đọc 01.huong-thi-giac.md trước khi đổi bất cứ thứ gì ở đây.
   Token màu (mòng két + hổ phách) nằm ở đầu style.css, không nằm ở file này.
   ========================================================================= */

/* ── HERO hai cột: chữ trái, ảnh phải ──────────────────────────────────────
   KHÔNG đặt max-width lên .hero-in — bó hero nhỏ hơn --wrap là mép trái của
   trang gãy hai bậc so với các mục dưới (bẫy số 7 của bộ khung). Ở đây bề
   rộng do lưới quyết định, còn giới hạn dòng chữ vẫn nằm ở .hero h1. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 48px;
  align-items: center;
}
.hero-grid .hero-in h1 { max-width: 100%; }

/* Ảnh chân dung. Chưa có file /assets/annt.jpg thì <img onerror> tự ẩn và
   khối chữ nằm dưới lộ ra — trang người mà để ô trống là hỏng. */
.portrait {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.portrait img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}
.portrait-fallback {
  grid-area: 1 / 1;
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.portrait figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-hi);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  font-size: 13.6px; font-weight: 650; letter-spacing: -.01em;
  text-align: center;
}

/* ── DẢI SỐ LIỆU ──────────────────────────────────────────────────────────
   Bốn con số, mỗi con tra ngược được về annt-profile/ho-so.json. */
.stats-sec { padding: 8px 0 26px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat {
  padding: 20px 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .3s var(--spring), border-color .3s var(--ease);
}
.stat:hover { transform: translateY(-4px); border-color: var(--line-hi); }
.stat b {
  display: block;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800; letter-spacing: -.035em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat span { display: block; margin-top: 4px; color: var(--text-2); font-size: 14.4px; }

/* ── GIỚI THIỆU + cột chứng chỉ ──────────────────────────────────────────── */
.about-in {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: 40px;
  align-items: start;
}
.about-p { margin-top: 18px; color: var(--text-2); font-size: 16px; line-height: 1.72; }
.about-p:first-of-type { margin-top: 26px; }

.creds {
  padding: 24px 24px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.creds h3 { font-size: 16.5px; }
.creds ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.creds li { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.creds b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.012em; }
.creds i { display: block; margin-top: 2px; font-style: normal; font-size: 13.4px; color: var(--text-3); }

/* ── THẺ CHỦ ĐỀ ───────────────────────────────────────────────────────────
   Bộ khung chia lưới cho SÁU thẻ; trang này có NĂM. Chia lại thành hai hàng
   khép kín (4+2 · 2+2+2), nếu không hàng cuối hụt mất 3 cột. */
.cards .card:nth-child(1) { grid-column: span 4; }
.cards .card:nth-child(2) { grid-column: span 2; }
.cards .card:nth-child(3) { grid-column: span 2; }
.cards .card:nth-child(4) { grid-column: span 2; }
.cards .card:nth-child(5) { grid-column: span 2; }

.tag {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12.4px; font-weight: 700; letter-spacing: .01em;
}
:root[data-theme="light"] .tag { color: var(--accent); }

/* ── THẺ CHƯƠNG TRÌNH ─────────────────────────────────────────────────────── */
.event {
  margin-top: 38px;
  padding: 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.event-head h3 { margin-top: 12px; font-size: clamp(21px, 2.6vw, 27px); }
.event-head p  { margin-top: 12px; color: var(--text-2); font-size: 15.6px; max-width: 720px; }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
  background: color-mix(in srgb, var(--accent-2) 13%, transparent);
  color: var(--accent-2);
  font-size: 12.6px; font-weight: 700;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
}

.event-meta {
  margin: 26px 0 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.event-meta div { min-width: 0; }
.event-meta dt { font-size: 12.6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.event-meta dd { margin: 5px 0 0; font-size: 15px; color: var(--text); line-height: 1.5; }

.agenda {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid; gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.half h4 { margin: 0; font-size: 15.4px; letter-spacing: -.012em; }
.half ul { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 10px; }
.half li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 14.8px; line-height: 1.6; }
.half li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}
.event-note {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 14.4px; line-height: 1.65;
}

/* ── HỌC TIẾP ─────────────────────────────────────────────────────────────
   Icon vẽ bằng SVG nhúng, tô bằng CHÍNH màu accent viết cứng: data URI không
   đọc được biến CSS. Đổi --accent thì phải đổi cả bốn chuỗi %232dd4bf dưới. */
.links {
  margin-top: 38px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.link-card {
  display: block; padding: 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .3s var(--spring), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.link-card:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: var(--shadow-hi); }
.link-card b { display: block; font-size: 16px; letter-spacing: -.014em; }
.link-card i { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.lc-ic {
  display: block; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background-color: var(--surface-2);
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.lc-web { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.6 2.6 15.4 0 18M12 3c-2.6 2.6-2.6 15.4 0 18'/%3E%3C/svg%3E"); }
.lc-yt  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='1.6'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='4'/%3E%3Cpath d='M10 9.2l5 2.8-5 2.8z' fill='%232dd4bf' stroke='none'/%3E%3C/svg%3E"); }
.lc-tt  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='1.6'%3E%3Cpath d='M14 4v10.2a3.6 3.6 0 11-3.1-3.6'/%3E%3Cpath d='M14 4c.5 2.3 2.1 3.8 4.5 4'/%3E%3C/svg%3E"); }
.lc-in  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7.5 10.5V17M7.5 7.4v.1M11.6 17v-3.6a2 2 0 014 0V17'/%3E%3C/svg%3E"); }

/* ── LIÊN HỆ (trang này KHÔNG có form) ───────────────────────────────────── */
.contact-solo .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.contact-fine { margin-top: 22px; color: var(--text-3); font-size: 14px; }

/* ── KHỔ MÀN HÌNH ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .portrait { max-width: 400px; aspect-ratio: 1 / 1; }
  .about-in { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .links { grid-template-columns: repeat(2, 1fr); }
  /* Bộ khung ép mọi .card về span 1 ở khổ này; lặp lại vì luật 5 thẻ ở trên
     có specificity cao hơn (.cards .card) nên sẽ đè mất luật của bộ khung. */
  .cards .card:nth-child(n) { grid-column: span 1; }
}

@media (max-width: 760px) {
  .event { padding: 22px; }
  .event-meta, .agenda { grid-template-columns: 1fr; }
  .contact-solo .channels { grid-template-columns: 1fr; }
  .links { grid-template-columns: 1fr; }
  .portrait { max-width: 100%; }
}

/* ── Mép trái phải THẲNG một đường suốt trang ─────────────────────────────
   Bẫy số 7 của bộ khung, gặp lại ở đây: cho FAQ và khối liên hệ dùng
   .wrap-narrow (820px) thì cả hai khối thụt vào giữa, mép trái của trang gãy
   hai bậc so với các mục trên. Đọc CSS thấy rất hợp lý, chỉ nhìn ảnh chụp mới
   thấy. Bó bề rộng ở CHÍNH danh sách, không bó ở khối bọc. */
#cau-hoi .faq { max-width: 860px; }
.contact-solo .channels, .contact-solo .sec-sub, .contact-fine { max-width: 860px; }

/* ── Chữ Nhật trên màn hình hẹp ──────────────────────────────────────────
   ĐÃ DÍNH 05/09: ở khổ 390px, bản JA tràn ngang — tên "グエン・ティエン・アン"
   và đoạn dẫn bị cắt mất mép phải. Bản VI cùng khổ thì bình thường, nên nhìn
   bản VI xong tưởng xong là sai.

   Lý do: tiếng Nhật không có dấu cách, một câu là MỘT cụm dài; cỡ chữ hero
   38px ở khổ 390px thì chỉ vừa 9 ký tự một dòng. Cho phép ngắt ở bất kỳ đâu
   (line-break: strict vẫn giữ luật cấm đầu/cuối dòng của tiếng Nhật) và hạ cỡ
   chữ xuống. */
html[lang="ja"] .hero h1 {
  overflow-wrap: anywhere;
  line-break: strict;
  line-height: 1.28;
}
html[lang="ja"] .lead,
html[lang="ja"] .card p,
html[lang="ja"] .event-head p,
html[lang="ja"] .half li,
html[lang="ja"] .about-p { overflow-wrap: anywhere; line-break: strict; }

@media (max-width: 760px) {
  html[lang="ja"] .hero h1 { font-size: clamp(25px, 6.6vw, 34px); }
  html[lang="ja"] .btn { font-size: 14.5px; }
}