/* gioi-thieu.css — 18/10/2026 · chuẩn WCAG 2.2 AAA, bảng màu khớp Sách Trắng. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #faf9f5; color: #141413; font-family: 'Charter', 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'Georgia', serif; font-size: 18px; line-height: 1.7; }
:root { --nen: #faf9f5; --mat: #ffffff; --nen2: #f0eee6; --ke: #e8e6dc; --muc: #141413; --phu: #504f4c; --nhan: #7b3e1c; }
.gt-khung { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.gt-nav { position: sticky; top: 0; z-index: 90; background: rgba(250,249,245,0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); padding: 14px max(24px, calc((100vw - 760px) / 2)); display: flex; align-items: center; gap: 24px; border-bottom: 1px solid transparent; }
.gt-nav img { width: 92px; height: 36px; object-fit: contain; object-position: 0 50%; }
.gt-nav .gt-lk { margin-left: auto; display: flex; gap: 24px; font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 15px; }
.gt-nav .gt-lk a { color: var(--muc); text-decoration: none; }
.gt-nav .gt-lk a:hover, .gt-nav .gt-lk a:focus-visible { color: var(--nhan); outline: none; }
.gt-nav .gt-ngon { padding: 7px 13px; border: 1px solid var(--ke); border-radius: 8px; color: var(--muc); background: var(--mat); font-size: 14px; cursor: pointer; }
.gt-nav .gt-vao { padding: 10px 16px; border-radius: 8px; background: var(--muc); color: #ffffff; text-decoration: none; font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 14px; font-weight: 600; }
.gt-nav .gt-vao:hover, .gt-nav .gt-vao:focus-visible { background: #3d3d3a; outline: none; }
.gt-bo-qua { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px; background: var(--muc); color: #ffffff; font-family: 'Inter', sans-serif; font-size: 15px; text-decoration: none; }
.gt-bo-qua:focus { left: 12px; top: 12px; }
.gt-tap { font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--nhan); margin: 0 0 20px; }
.gt-nhap { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.012em; margin: 0 0 40px; color: var(--muc); font-weight: 400; }
.gt-chao { font-size: 24px; margin: 0 0 24px; color: var(--muc); font-weight: 400; }
.gt-doan { margin: 0 0 24px; font-size: 20px; line-height: 1.65; color: var(--muc); }
.gt-doan em { font-style: italic; color: var(--phu); }
.gt-doan strong { font-weight: 600; color: var(--muc); }
.gt-muc { margin-top: 56px; margin-bottom: 20px; font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--nhan); }
.gt-muc + h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.012em; color: var(--muc); margin: 0 0 24px; line-height: 1.2; }
.gt-tru { margin: 0 0 30px; padding: 20px 24px; background: var(--mat); border: 1px solid var(--ke); border-radius: 10px; }
.gt-tru-ten { font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nhan); margin: 0 0 10px; }
.gt-tru-m { font-size: 17px; color: var(--muc); line-height: 1.6; margin: 0; }
.gt-mi { display: block; margin: 24px 0; padding: 24px; background: var(--mat); border: 1px solid var(--ke); border-radius: 12px; text-decoration: none; color: var(--muc); transition: border-color .15s, transform .15s; }
.gt-mi:hover, .gt-mi:focus-visible { border-color: var(--muc); outline: none; transform: translateY(-1px); }
.gt-mi-t { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.008em; margin: 0 0 8px; color: var(--muc); display: flex; justify-content: space-between; align-items: baseline; }
.gt-mi-m { font-size: 16px; color: var(--phu); margin: 0 0 10px; line-height: 1.55; }
.gt-mi-c { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--nhan); }
.gt-mi-c::after { content: " →"; }
.gt-ky { margin-top: 36px; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0.08em; color: var(--phu); }
.ten-alliw { font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-weight: 700; letter-spacing: -0.015em; color: var(--muc); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--nhan); outline-offset: 3px; border-radius: 2px; }
html:not([lang="en"]) .nn-en, html[lang="en"] .nn-vi { display: none !important; }
@media (max-width: 600px) {
  .gt-khung { padding: 44px 18px 72px; }
  .gt-nhap { font-size: 32px; }
  .gt-nav .gt-lk { display: none; }
}