/* ==========================================================================
   Trước Cổng Trường — stylesheet
   Viết tay. Không framework, không build step.
   Bảng màu: Sương sớm / Mực bút bi cạn / Bóng hàng rào / Xanh bảng /
             Vạch kẻ / Vệt phấn
   Chữ:      Be Vietnam Pro (tiêu đề, nav, meta) + Bitter (thân bài)
   ========================================================================== */

/* --- Font self-host, subset vietnamese + latin ---------------------------- */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-normal-vn.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bvp-400-normal-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-normal-vn.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bvp-600-normal-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bitter';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/bitter-400-italic-vn.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Bitter';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/bitter-400-italic-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/bitter-400-600-normal-vn.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Bitter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/bitter-400-600-normal-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- Token ---------------------------------------------------------------- */
:root{
  --nen:   #edf0ee;  /* Sương sớm        — bề mặt duy nhất của cả trang */
  --muc:   #20302e;  /* Mực bút bi cạn   — chữ chính */
  --bong:  #5c6b67;  /* Bóng hàng rào    — meta, ngày, byline */
  --bang:  #1f5f4b;  /* Xanh bảng        — CHỈ dùng cho link */
  --ke:    #c9d2cd;  /* Vạch kẻ          — hairline, dấu hỏi treo */
  --phan:  #dde3e0;  /* Vệt phấn         — nền hover, ::selection */

  --serif: 'Bitter', Georgia, 'Times New Roman', serif;
  --sans:  'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Bitter đo được 0.476em/ký tự với văn bản tiếng Việt.
     38rem = 608px → 67 ký tự/dòng ở 19px, 71 ký tự ở 18px. */
  --cot:   38rem;
  --le:    1.25rem;
}

/* --- Reset tối thiểu ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* --- Nền và chữ ----------------------------------------------------------- */
body{
  background: var(--nen);
  color: var(--muc);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.006rem + 0.25vw, 1.1875rem); /* 17 → 19px */
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--phan); }

/* --- Layout: một cột, không card, không viền, không shadow ---------------- */
.wrap{
  max-width: calc(var(--cot) + var(--le) * 2);
  margin-inline: auto;
  padding-inline: var(--le);
}

/* --- Link ----------------------------------------------------------------- */
a{
  color: var(--bang);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--bang) 40%, transparent);
}
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--bang); }
a[target="_blank"]::after{
  content: "↗";
  font-family: var(--sans);
  font-size: 0.72em;
  vertical-align: 0.35em;
  margin-left: 0.15em;
  text-decoration: none;
  color: var(--bong);
}

/* --- Focus: nhìn rõ khi tab ---------------------------------------------- */
:focus-visible{
  outline: 2px solid var(--bang);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- Bỏ qua tới nội dung -------------------------------------------------- */
.skip{
  position: absolute; left: -9999px;
  font-family: var(--sans); font-size: 0.9rem;
}
.skip:focus{
  left: var(--le); top: 0.5rem; z-index: 10;
  background: var(--nen); padding: 0.5rem 0.75rem;
  text-decoration: none;
}

/* --- Header --------------------------------------------------------------- */
.site-head{
  padding-block: 1.75rem 1.1rem;
  border-bottom: 1px solid var(--ke);
  margin-bottom: 2.75rem;
}
.site-name{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-bottom: 0.45rem;
}
.site-name a{ color: var(--muc); text-decoration: none; }
.site-name a:hover{ text-decoration: underline; text-decoration-thickness: 1px; }

/* Chủ đề: danh sách chữ inline ngăn bằng dấu chấm giữa. Không pill, không viền. */
.topics{
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--bong);
}
.topics li{ display: inline; }
.topics li + li::before{
  content: "·";
  margin-inline: 0.45em;
  color: var(--ke);
}
.topics a{ text-decoration: none; }
.topics a:hover{ text-decoration: underline; text-underline-offset: 0.2em; }
.topics [aria-current="page"]{ color: var(--muc); font-weight: 600; }

/* --- Yếu tố ký tự: DẤU HỎI TREO LỀ --------------------------------------
   Chữ đầu tiên của tiêu đề vẫn thẳng cột chữ; dấu hỏi treo ra ngoài lề.
   Dưới 60em không còn lề để treo → biến mất hẳn, không thu nhỏ lệch lạc.  */
.hoi{ position: relative; }
@media (min-width: 60em){
  .hoi::before{
    content: "?";
    position: absolute;
    right: 100%;
    margin-right: 0.45em;
    top: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.05em;
    line-height: inherit;
    color: var(--ke);
    pointer-events: none;
  }
}

/* --- Tiêu đề -------------------------------------------------------------- */
h1, h2, h3{
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1{ font-size: clamp(1.75rem, 1.32rem + 1.9vw, 2.25rem); }  /* 28 → 36px */
h2{ font-size: clamp(1.375rem, 1.21rem + 0.73vw, 1.75rem); } /* 22 → 28px */
h3{ font-size: 1.3125rem; line-height: 1.35; }

/* --- Trang chủ ------------------------------------------------------------ */
.gioi-thieu{ margin-bottom: 1.6rem; }
.gioi-thieu p{ margin-top: 0.9rem; color: var(--muc); }

/* hairline ngắn canh trái — dấu ngắt biên tập, không phải đường trang trí */
.ngat{
  border: 0;
  border-top: 1px solid var(--ke);
  width: 4rem;
  margin: 2.25rem 0;
}

/* Nhãn nhỏ dùng chung */
.nhan{
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bong);
  font-weight: 600;
  margin-bottom: 1.6rem;
}

/* Danh mục ở trang chủ */
.danh-muc > li{ margin-bottom: 2.1rem; }
.danh-muc h2{ font-size: 1.5rem; margin-bottom: 0.3rem; }
.danh-muc h2 a{ color: var(--muc); text-decoration: none; }
.danh-muc h2 a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ke);
  text-underline-offset: 0.18em;
}
.danh-muc p{ font-size: 0.9375em; line-height: 1.62; color: var(--bong); }

/* Danh sách câu hỏi của một nhóm */
.cau-hoi{ margin-top: 1.5rem; }
.cau-hoi li{
  margin-bottom: 1.15rem;
  font-size: 1.0625em;
  line-height: 1.45;
}
.cau-hoi a{ color: var(--muc); text-decoration: none; }
.cau-hoi a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ke);
  text-underline-offset: 0.18em;
}
.xem-nhom{
  font-family: var(--sans);
  font-size: 0.9375rem;
  margin-top: 1.4rem;
}

/* --- Bài viết ------------------------------------------------------------- */
.vun{ /* breadcrumb */
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--bong);
  margin-bottom: 1.1rem;
}
.vun ol{ display: flex; flex-wrap: wrap; gap: 0.4em; }
.vun li + li::before{ content: "›"; margin-right: 0.4em; color: var(--ke); }
.vun a{ text-decoration: none; }
.vun a:hover{ text-decoration: underline; }

.byline{
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--bong);
  margin-top: 0.85rem;
}
.byline a{ color: var(--bong); text-decoration-color: var(--ke); }

/* Trả lời thẳng: chỉ to hơn thân bài một nấc. Không viền trái, không nền. */
.tra-loi{
  font-size: 1.15em;
  line-height: 1.55;
  margin-top: 1.75rem;
}

.than-bai > * + *{ margin-top: 1.15rem; }
.than-bai h2{ margin-top: 2.4rem; }
.than-bai h3{ margin-top: 1.9rem; }
.than-bai strong{ font-weight: 600; }
.than-bai ul{ margin-left: 0; }
.than-bai li{
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.55rem;
}
.than-bai li::before{
  content: "–";
  position: absolute;
  left: 0;
  color: var(--bong);
}
.than-bai ol{ counter-reset: n; }
.than-bai ol li{ counter-increment: n; }
.than-bai ol li::before{
  content: counter(n) ".";
  font-family: var(--sans);
  font-size: 0.85em;
  color: var(--bong);
}
.than-bai blockquote{
  font-style: italic;
  color: var(--bong);
  padding-left: 1.1rem;
  border-left: 1px solid var(--ke);
}

/* Đoạn dẫn sang bài khác — văn xuôi thật, không phải khối "bài liên quan" */
.doc-tiep{ margin-top: 2.5rem; }

/* --- Trang chủ đề --------------------------------------------------------- */
.mo-ta-nhom{ margin-top: 1rem; color: var(--muc); }

/* --- Trang Về blog này ---------------------------------------------------- */
.than-bai dl dt{ font-family: var(--sans); font-weight: 600; margin-top: 1.4rem; }
.than-bai dl dd{ margin-top: 0.35rem; }

/* --- Footer --------------------------------------------------------------- */
.site-foot{
  margin-top: 4.5rem;
  padding-block: 1.25rem 3rem;
  border-top: 1px solid var(--ke);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--bong);
  line-height: 1.7;
}
.site-foot a{ color: var(--bong); text-decoration-color: var(--ke); }
.site-foot a:hover{ color: var(--bang); }
.site-foot p + p{ margin-top: 0.4rem; }

/* --- 404 ------------------------------------------------------------------ */
.lac-duong ul{ margin-top: 1.2rem; }
.lac-duong li{ margin-top: 0.5rem; }

/* --- Màn hình hẹp --------------------------------------------------------- */
@media (max-width: 26em){
  :root{ --le: 1.125rem; }
  .site-head{ padding-block: 1.35rem 1rem; margin-bottom: 2rem; }
  .than-bai h2{ margin-top: 2rem; }
}

/* --- Tôn trọng prefers-reduced-motion ------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}