/* NotesVN — quy chuẩn màn hình (docs/QUY-CHUAN-MAN-HINH.md). Tác giả: ToànQV.
   Một bảng số cho cả site: các trang chỉ gọi tên biến, không ghi số px riêng.
   Nhóm: A <390 · B 390–767 · C 768–1023 · D 1024–1365 · E 1366–1919 · F ≥1920. */

:root {
  /* Khung */
  --tn-gutter: 16px;
  --tn-w-read: 720px;
  --tn-w-narrow: 1100px;
  --tn-w: 1280px;
  --tn-w-wide: 1400px;

  /* Chữ */
  --tn-t-xs: 12px;      /* nhãn nhỏ viết hoa, menu — không chữ nào nhỏ hơn */
  --tn-t-sm: 13px;      /* chữ phụ: ngày, số đếm, chú thích */
  --tn-t-card: 14px;    /* chữ trong thẻ, link chân trang */
  --tn-t-body: 15px;    /* đoạn văn */
  --tn-t-lead: 17px;    /* đoạn mở đầu */
  --tn-t-h3: 20px;
  --tn-t-h2: 28px;
  --tn-t-h1: 34px;
  --tn-t-display: 38px; /* tiêu đề lớn trang chủ */

  /* Nút / vùng chạm */
  --tn-tap: 44px;
  --tn-tap-icon: 44px;
}
@media (min-width: 390px) {
  :root { --tn-gutter: 20px; --tn-t-body: 16px; --tn-t-h2: 30px; --tn-t-h1: 36px; --tn-t-display: 40px; }
}
@media (min-width: 768px) {
  :root { --tn-gutter: 32px; --tn-t-card: 15px; --tn-t-lead: 18px; --tn-t-h3: 22px; --tn-t-h2: 36px; --tn-t-h1: 48px; --tn-t-display: 56px; }
}
@media (min-width: 1024px) {
  :root { --tn-gutter: 40px; --tn-t-h3: 24px; --tn-t-h2: 44px; --tn-t-h1: 60px; --tn-t-display: 72px; --tn-tap: 36px; --tn-tap-icon: 40px; }
}
@media (min-width: 1366px) {
  :root { --tn-gutter: 48px; --tn-t-sm: 14px; --tn-t-body: 17px; --tn-t-lead: 20px; --tn-t-h3: 26px; --tn-t-h2: 52px; --tn-t-h1: 72px; --tn-t-display: 96px; }
}
@media (min-width: 1920px) {
  :root { --tn-t-h2: 56px; --tn-t-h1: 80px; --tn-t-display: 104px; }
}
/* Màn cảm ứng cỡ lớn (iPad ngang) vẫn giữ nút 44px. */
@media (pointer: coarse) {
  :root { --tn-tap: 44px; --tn-tap-icon: 44px; }
}
/* Điện thoại xoay ngang: tiêu đề lớn không chiếm hết màn. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --tn-t-h1: 34px; --tn-t-display: 40px; }
}

/* Tiêu đề trang: một cỡ cho mọi trang. */
[data-tn-h1] { font-size: var(--tn-t-h1); }

/* Menu chính: cao 44px; điện thoại & máy tính bảng nhỏ = 1 hàng kéo ngang ở MỌI trang (không gãy 2 hàng). */
nav[aria-label="Menu chính"] > div > a { display: inline-flex !important; align-items: center; min-height: 44px; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
@media (max-width: 767px) {
  nav[aria-label="Menu chính"] > div {
    flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tn-gutter), #000 calc(100% - var(--tn-gutter)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--tn-gutter), #000 calc(100% - var(--tn-gutter)), transparent 100%);
  }
  nav[aria-label="Menu chính"] > div::-webkit-scrollbar { display: none; }
}

/* Vùng bấm vô hình đủ 44px cho nút / link trông nhỏ (gắn bởi assets/js/tn-hit.js trên điện thoại, máy tính bảng, màn cảm ứng). */
.tn-hit-rel { position: relative; }
.tn-hit::before { content: ""; position: absolute; top: calc(-1 * var(--tn-hy, 0px)); bottom: calc(-1 * var(--tn-hy, 0px)); left: calc(-1 * var(--tn-hx, 0px)); right: calc(-1 * var(--tn-hx, 0px)); }
/* Vòng ảnh tròn: phần bo tròn chuyển vào ảnh bên trong để vùng bấm nhô ra được. */
.tn-hit-clip { overflow: visible !important; }
.tn-hit-clip > * { border-radius: inherit; overflow: hidden; }
/* Link chữ không nền: đệm trong suốt + lề âm bù lại → vùng bấm lớn hơn, bố cục không xê dịch. */
.tn-hit-pad-y {
  padding-top: calc(var(--tn-p0t) + var(--tn-py, 0px)) !important; padding-bottom: calc(var(--tn-p0b) + var(--tn-py, 0px)) !important;
  margin-top: calc(var(--tn-m0t) - var(--tn-py, 0px)) !important; margin-bottom: calc(var(--tn-m0b) - var(--tn-py, 0px)) !important;
}
/* Gạch chân vẽ bằng nền (hiệu ứng rê chuột) vẫn bám sát chữ khi có thêm đệm. */
.tn-hit-pad-y, .tn-hit-pad-x { background-origin: content-box !important; background-clip: content-box !important; }
.tn-hit-pad-h { height: auto !important; }
.tn-hit-pad-x {
  padding-left: calc(var(--tn-p0l) + var(--tn-px, 0px)) !important; padding-right: calc(var(--tn-p0r) + var(--tn-px, 0px)) !important;
  margin-left: calc(var(--tn-m0l) - var(--tn-px, 0px)) !important; margin-right: calc(var(--tn-m0r) - var(--tn-px, 0px)) !important;
}

/* An toàn: ảnh / video không vượt khung; chữ dài (tên chai, nhà chế tác) được xuống dòng. */
img, svg, video { max-width: 100%; }
h1, h2, h3 { overflow-wrap: anywhere; }

/* Ô nhập chữ / ô chọn: cao tối thiểu bằng vùng chạm (44px trên điện thoại, máy tính bảng, màn cảm ứng). */
@media (max-width: 1023px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select { min-height: var(--tn-tap); }
}