/* huydt.com — giấy ngà, mực xanh đen, nhấn màu son.
   Sáng/tối: theo máy người xem; bấm nút "Sáng/Tối" thì <html data-theme="light|dark"> ghi đè.
   Cỡ chữ tính bằng rem (1rem = cỡ chữ người xem đặt, mặc định 16px) -> chỉnh chữ to trên điện thoại/trình duyệt là web to theo. */
:root {
  color-scheme: light;
  --nen: #faf8f3; --giay: #ffffff; --muc: #1d2a33; --nhat: #5d6b73; --duong: #e4e0d6;
  --nhan: #b4432f; --nhan-nhe: #f6e7e2; --lien-ket: #1f4f8f;
  --f-chu: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --f-tieu-de: "Lora", Georgia, "Times New Roman", serif;
  --le: max(1rem, env(safe-area-inset-left, 0px));
  --le-phai: max(1rem, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nen: #14181b; --giay: #1b2126; --muc: #e8ecee; --nhat: #9aa8af; --duong: #2c353b;
    --nhan: #f08a73; --nhan-nhe: #3a2420; --lien-ket: #8eb4ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nen: #14181b; --giay: #1b2126; --muc: #e8ecee; --nhat: #9aa8af; --duong: #2c353b;
  --nhan: #f08a73; --nhan-nhe: #3a2420; --lien-ket: #8eb4ff;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--nen); color: var(--muc); font-family: var(--f-chu); font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word }
a { color: var(--lien-ket) }
img { max-width: 100%; height: auto; border-radius: 8px }
.khung { max-width: 47.5rem; margin: 0 auto; padding-left: var(--le); padding-right: var(--le-phai) }
.skip { position: absolute; left: -999px } .skip:focus { left: 1rem; top: .5rem; background: var(--giay); padding: .375rem .625rem; z-index: 10 }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px }

.dau { border-bottom: 1px solid var(--duong); background: var(--giay) }
.dau-trong { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-top: .875rem; padding-bottom: .875rem }
.logo { font-family: var(--f-tieu-de); font-weight: 700; font-size: 1.375rem; color: var(--muc); text-decoration: none; letter-spacing: -0.01em }
.logo::after { content: "."; color: var(--nhan) }
.dau-phai { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.125rem }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.125rem }
nav a { color: var(--nhat); text-decoration: none; font-size: .9375rem; font-weight: 500; display: inline-block; padding: .25rem 0 }
nav a:hover, nav a[aria-current="page"] { color: var(--muc) }
nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--nhan) }
.doi-nen { font: inherit; font-size: .875rem; font-weight: 500; line-height: 1; padding: .5rem .75rem; min-height: 2.25rem; border-radius: 99px; border: 1px solid var(--duong); background: var(--nen); color: var(--muc); cursor: pointer; white-space: nowrap }
.doi-nen:hover { border-color: var(--nhan); color: var(--nhan) }

main { padding-top: clamp(1.5rem, 4vw, 2.25rem); padding-bottom: 3.5rem }
h1, h2, h3 { font-family: var(--f-tieu-de); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem); margin: 0 0 .75rem }
h2 { font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem); margin: 2.25rem 0 .625rem }
h3 { font-size: 1.1875rem; margin: 1.75rem 0 .5rem }
p { margin: 0 0 1rem }
blockquote { margin: 1.25rem 0; padding: .25rem 1.125rem; border-left: 3px solid var(--nhan); color: var(--nhat) }
.bang { overflow-x: auto; margin: 1.25rem 0 }
.bang table { border-collapse: collapse; width: 100%; font-size: .94em; min-width: 32.5rem }
.bang th, .bang td { border: 1px solid var(--duong); padding: .5rem .625rem; text-align: left; vertical-align: top }
.bang th { background: var(--nhan-nhe) }
code { font-size: 0.92em; background: var(--nhan-nhe); padding: 1px 5px; border-radius: 4px }
pre { background: var(--giay); border: 1px solid var(--duong); padding: .875rem; border-radius: 8px; overflow-x: auto }
pre code { background: none; padding: 0 }
hr { border: 0; border-top: 1px solid var(--duong); margin: 2rem 0 }
ul, ol { padding-left: 1.375rem; margin: 0 0 1rem }
li { margin: .25rem 0 }

.loi-chao { padding: .5rem 0 1.25rem; border-bottom: 1px solid var(--duong); margin-bottom: .5rem; display: flex; align-items: center; gap: 1.25rem 1.75rem }
.loi-chao p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--nhat); max-width: 34em; margin-bottom: 0 }
/* Ảnh đại diện vuông bo 4 góc (trang chủ 120px, Giới thiệu 160px) */
.dai-dien { flex: none; width: 7.5rem; height: 7.5rem; border-radius: 16%; object-fit: cover; border: 3px solid var(--giay); box-shadow: 0 0 0 1px var(--duong), 0 4px 14px rgb(0 0 0 / .12) }
.dai-dien.lon { width: 10rem; height: 10rem }
.dau-gioi-thieu { display: flex; align-items: center; gap: 1rem 1.75rem; margin-bottom: 1.5rem }
.dau-gioi-thieu h1 { margin: 0 }
@media (max-width: 40rem) {
  .loi-chao, .dau-gioi-thieu { flex-direction: column; align-items: flex-start }
  .dai-dien { width: 6.5rem; height: 6.5rem }
  .dai-dien.lon { width: 8.5rem; height: 8.5rem }
}
.muc-tieu-de { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; margin-top: 2rem }
.muc-tieu-de h2 { margin: 0 }
.muc-tieu-de a { font-size: .9375rem }

.ds-bai { list-style: none; padding: 0; margin: .5rem 0 0 }
.ds-bai li { padding: 1.125rem 0; border-bottom: 1px solid var(--duong); margin: 0 }
.ds-bai a.ten { font-family: var(--f-tieu-de); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem); font-weight: 600; color: var(--muc); text-decoration: none; line-height: 1.35 }
.ds-bai a.ten:hover { color: var(--nhan) }
.ds-bai p { margin: .375rem 0 0; color: var(--nhat); font-size: 1rem }
/* 09/11/2026: ảnh nhỏ cho bài có ảnh bìa — máy tính: ảnh bên phải; điện thoại: ảnh lên trên */
.ds-bai li.co-anh { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 1rem 1.25rem; align-items: start }
.ds-bai li.co-anh .anh-nho { grid-column: 2; grid-row: 1; display: block }
.ds-bai .anh-nho img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--duong) }
.ds-bai li.co-anh > div { grid-column: 1; grid-row: 1; min-width: 0 }
@media (max-width: 34rem) {
  .ds-bai li.co-anh { grid-template-columns: 1fr }
  .ds-bai li.co-anh .anh-nho, .ds-bai li.co-anh > div { grid-column: 1; grid-row: auto }
}
.meta { font-size: .875rem; color: var(--nhat) }
.nhan { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: var(--nhan); background: var(--nhan-nhe); border-radius: 99px; padding: 1px .5625rem; margin-left: .375rem; vertical-align: 2px }

.ds-the { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem }
.the { font-size: .8125rem; font-weight: 500; color: var(--nhan); background: var(--nhan-nhe); border-radius: 99px; padding: .125rem .625rem; text-decoration: none; line-height: 1.6 }
.the:hover { text-decoration: underline }
.the span { color: var(--nhat); font-weight: 400; margin-left: 2px }
.may-the { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem }
.bai .meta + .ds-the { margin-top: .625rem }

.the-app { display: block; background: var(--giay); border: 1px solid var(--duong); border-radius: 10px; padding: 1rem 1.125rem; margin: .75rem 0; color: var(--muc); text-decoration: none }
.the-app:hover { border-color: var(--nhan) }
.the-app strong { font-size: 1.125rem; display: block; margin-bottom: .25rem }
.the-app span { color: var(--nhat); font-size: .9375rem; display: block }
.the-app .khoa { color: var(--nhan); font-size: .8125rem; font-weight: 600; margin-top: .5rem }

.bai header { margin-bottom: 1.5rem }
.bai .anh-bia { margin: 0 0 1.5rem }
.bai p > img { display: block; max-height: 80vh; width: auto; margin: .5rem auto }
.chia-se { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--duong) }
.chia-se span { font-size: .875rem; color: var(--nhat); align-self: center; margin-right: .25rem }
.chia-se button { font: inherit; font-size: .875rem; padding: .4375rem .875rem; border-radius: 99px; border: 1px solid var(--duong); background: var(--giay); color: var(--muc); cursor: pointer }
.chia-se button:hover { border-color: var(--nhan); color: var(--nhan) }

.chan { border-top: 1px solid var(--duong); color: var(--nhat); font-size: .875rem }
.chan-trong { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.125rem; padding-bottom: max(1.125rem, env(safe-area-inset-bottom, 0px)) }
.chan a { color: var(--nhat) }
.nhap-bao { background: var(--nhan-nhe); color: var(--nhan); border-radius: 8px; padding: .5rem .75rem; font-size: .875rem; font-weight: 600; margin-bottom: 1.25rem }

/* Màn hình hẹp (điện thoại): tên web + nút Sáng/Tối 1 dòng, menu xuống dòng dưới */
@media (max-width: 40rem) {
  .dau-phai { display: contents }
  .dau nav { order: 3; flex-basis: 100% }
}
/* Màn hình cảm ứng: vùng bấm tối thiểu ~44px */
@media (pointer: coarse) {
  nav a { padding: .625rem 0 }
  .doi-nen, .chia-se button { min-height: 2.75rem; padding-left: 1rem; padding-right: 1rem }
  .the { padding: .375rem .75rem }
}
/* Màn hình lớn: chữ đọc thoáng hơn chút, khung vẫn ~70 ký tự/dòng */
@media (min-width: 1600px) {
  .khung { max-width: 52rem }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }